@fluentui/react-color-picker 9.3.0 → 9.3.2

package/lib/utils/adjustChannel.js

@@ -18,5 +18,6 @@ import { clamp } from "@fluentui/react-utilities";
  * @param {ChannelActions<T>} actions - An object containing actions for each color channel.
  * @returns {T} - The result of the action corresponding to the specified channel, or the hue action if the channel is not found.
  */ export function adjustChannel(channel, actions) {
-    return actions[channel] || actions.hue;
+    var _actions_channel;
+    return (_actions_channel = actions[channel]) !== null && _actions_channel !== void 0 ? _actions_channel : actions.hue;
 }

package/lib/utils/adjustChannel.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/utils/adjustChannel.ts"],"sourcesContent":["import type { ColorChannel } from '../components/ColorSlider/ColorSlider.types';\nimport { MIN, HUE_MAX, MAX as COLOR_MAX } from './constants';\nimport { clamp } from '@fluentui/react-utilities';\n\n/**\n * Clamps a given value to the valid range for a specified color channel.\n *\n * @param value - The numeric value to be clamped.\n * @param channel - The color channel to use for clamping. Defaults to 'hue'.\n * @returns The clamped value within the range defined by the color channel.\n */\nexport function clampValue(value: number, channel: ColorChannel = 'hue'): number {\n  const MAX = channel === 'hue' ? HUE_MAX : COLOR_MAX;\n  return clamp(value, MIN, MAX);\n}\n\nexport type ChannelActions<T> = {\n  hue: T;\n  saturation: T;\n  value: T;\n};\n\n/**\n * Adjusts the specified color channel using the provided actions.\n *\n * @template T - The type of the result returned by the actions.\n * @param {ColorChannel} channel - The color channel to adjust.\n * @param {ChannelActions<T>} actions - An object containing actions for each color channel.\n * @returns {T} - The result of the action corresponding to the specified channel, or the hue action if the channel is not found.\n */\nexport function adjustChannel<T>(channel: ColorChannel, actions: ChannelActions<T>): T {\n  return actions[channel] || actions.hue;\n}\n"],"names":["MIN","HUE_MAX","MAX","COLOR_MAX","clamp","clampValue","value","channel","adjustChannel","actions","hue"],"mappings":"AACA,SAASA,GAAG,EAAEC,OAAO,EAAEC,OAAOC,SAAS,QAAQ,iBAAc;AAC7D,SAASC,KAAK,QAAQ,4BAA4B;AAElD;;;;;;CAMC,GACD,OAAO,SAASC,WAAWC,KAAa,EAAEC,UAAwB,KAAK;IACrE,MAAML,MAAMK,YAAY,QAAQN,UAAUE;IAC1C,OAAOC,MAAME,OAAON,KAAKE;AAC3B;AAQA;;;;;;;CAOC,GACD,OAAO,SAASM,cAAiBD,OAAqB,EAAEE,OAA0B;IAChF,OAAOA,OAAO,CAACF,QAAQ,IAAIE,QAAQC,GAAG;AACxC"}
+{"version":3,"sources":["../src/utils/adjustChannel.ts"],"sourcesContent":["import type { ColorChannel } from '../components/ColorSlider/ColorSlider.types';\nimport { MIN, HUE_MAX, MAX as COLOR_MAX } from './constants';\nimport { clamp } from '@fluentui/react-utilities';\n\n/**\n * Clamps a given value to the valid range for a specified color channel.\n *\n * @param value - The numeric value to be clamped.\n * @param channel - The color channel to use for clamping. Defaults to 'hue'.\n * @returns The clamped value within the range defined by the color channel.\n */\nexport function clampValue(value: number, channel: ColorChannel = 'hue'): number {\n  const MAX = channel === 'hue' ? HUE_MAX : COLOR_MAX;\n  return clamp(value, MIN, MAX);\n}\n\nexport type ChannelActions<T> = {\n  hue: T;\n  saturation: T;\n  value: T;\n};\n\n/**\n * Adjusts the specified color channel using the provided actions.\n *\n * @template T - The type of the result returned by the actions.\n * @param {ColorChannel} channel - The color channel to adjust.\n * @param {ChannelActions<T>} actions - An object containing actions for each color channel.\n * @returns {T} - The result of the action corresponding to the specified channel, or the hue action if the channel is not found.\n */\nexport function adjustChannel<T>(channel: ColorChannel, actions: ChannelActions<T>): T {\n  return actions[channel] ?? actions.hue;\n}\n"],"names":["MIN","HUE_MAX","MAX","COLOR_MAX","clamp","clampValue","value","channel","adjustChannel","actions","hue"],"mappings":"AACA,SAASA,GAAG,EAAEC,OAAO,EAAEC,OAAOC,SAAS,QAAQ,iBAAc;AAC7D,SAASC,KAAK,QAAQ,4BAA4B;AAElD;;;;;;CAMC,GACD,OAAO,SAASC,WAAWC,KAAa,EAAEC,UAAwB,KAAK;IACrE,MAAML,MAAMK,YAAY,QAAQN,UAAUE;IAC1C,OAAOC,MAAME,OAAON,KAAKE;AAC3B;AAQA;;;;;;;CAOC,GACD,OAAO,SAASM,cAAiBD,OAAqB,EAAEE,OAA0B;QACzEA;IAAP,OAAOA,CAAAA,mBAAAA,OAAO,CAACF,QAAQ,cAAhBE,8BAAAA,mBAAoBA,QAAQC,GAAG;AACxC"}

package/lib-commonjs/components/AlphaSlider/alphaSliderUtils.cjs

@@ -35,5 +35,5 @@ function getSliderDirection(dir, vertical, transparency) {
     if (vertical) {
         return transparency ? '180deg' : '0deg';
     }
-    return dir === 'ltr' && !transparency ? '90deg' : '-90deg';
+    return dir === 'ltr' !== transparency ? '90deg' : '-90deg';
 }

package/lib-commonjs/components/AlphaSlider/alphaSliderUtils.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/AlphaSlider/alphaSliderUtils.ts"],"sourcesContent":["/**\n * Adjusts the given value based on the transparency flag.\n *\n * @param value - The numeric value to adjust.\n * @param transparency - A boolean flag indicating whether to adjust for transparency.\n * @returns The adjusted value.\n */\nexport function adjustToTransparency(value: number, transparency: boolean): number {\n  return transparency ? 100 - value : value;\n}\n\n/**\n * Calculates the transparency value based on the given parameters.\n *\n * @param transparency - A boolean flag indicating whether to adjust for transparency.\n * @param value - An optional numeric value to adjust.\n * @returns The calculated transparency value or undefined if the value is not provided.\n */\nexport function calculateTransparencyValue(transparency: boolean, value?: number): number | undefined {\n  return value !== undefined ? adjustToTransparency(value * 100, transparency) : undefined;\n}\n\n/**\n * Determines the direction of the slider based on the given parameters.\n *\n * @param dir - The text direction, either 'ltr' (left-to-right) or 'rtl' (right-to-left).\n * @param vertical - A boolean indicating if the slider is vertical.\n * @param transparency - A boolean indicating if the slider is for transparency.\n * @returns The direction of the slider as a string representing degrees (e.g., '90deg').\n */\nexport function getSliderDirection(dir: 'ltr' | 'rtl', vertical: boolean, transparency: boolean): string {\n  if (vertical) {\n    return transparency ? '180deg' : '0deg';\n  }\n  return dir === 'ltr' && !transparency ? '90deg' : '-90deg';\n}\n"],"names":["adjustToTransparency","value","transparency","calculateTransparencyValue","undefined","getSliderDirection","dir","vertical"],"mappings":"AAAA;;;;;;CAMC,GACD;;;;;;;;;;;wBAAgBA;;;8BAWAG;;;IAYAE,kBAAAA;;;;AAvBT,SAASL,qBAAqBC,KAAa,EAAEC,YAAqB;IACvE,OAAOA,eAAe,MAAMD,QAAQA;AACtC;AASO,SAASE,2BAA2BD,YAAqB,EAAED,KAAc;IAC9E,OAAOA,UAAUG,YAAYJ,qBAAqBC,QAAQ,KAAKC,gBAAgBE;AACjF;AAUO,4BAA4BE,GAAkB,EAAEC,QAAiB,EAAEL,YAAqB;IAC7F,IAAIK,UAAU;QACZ,OAAOL,eAAe,WAAW;IACnC;IACA,OAAOI,QAAQ,SAAS,CAACJ,eAAe,UAAU;AACpD"}
+{"version":3,"sources":["../src/components/AlphaSlider/alphaSliderUtils.ts"],"sourcesContent":["/**\n * Adjusts the given value based on the transparency flag.\n *\n * @param value - The numeric value to adjust.\n * @param transparency - A boolean flag indicating whether to adjust for transparency.\n * @returns The adjusted value.\n */\nexport function adjustToTransparency(value: number, transparency: boolean): number {\n  return transparency ? 100 - value : value;\n}\n\n/**\n * Calculates the transparency value based on the given parameters.\n *\n * @param transparency - A boolean flag indicating whether to adjust for transparency.\n * @param value - An optional numeric value to adjust.\n * @returns The calculated transparency value or undefined if the value is not provided.\n */\nexport function calculateTransparencyValue(transparency: boolean, value?: number): number | undefined {\n  return value !== undefined ? adjustToTransparency(value * 100, transparency) : undefined;\n}\n\n/**\n * Determines the direction of the slider based on the given parameters.\n *\n * @param dir - The text direction, either 'ltr' (left-to-right) or 'rtl' (right-to-left).\n * @param vertical - A boolean indicating if the slider is vertical.\n * @param transparency - A boolean indicating if the slider is for transparency.\n * @returns The direction of the slider as a string representing degrees (e.g., '90deg').\n */\nexport function getSliderDirection(dir: 'ltr' | 'rtl', vertical: boolean, transparency: boolean): string {\n  if (vertical) {\n    return transparency ? '180deg' : '0deg';\n  }\n  return (dir === 'ltr') !== transparency ? '90deg' : '-90deg';\n}\n"],"names":["adjustToTransparency","value","transparency","calculateTransparencyValue","undefined","getSliderDirection","dir","vertical"],"mappings":"AAAA;;;;;;CAMC,GACD;;;;;;;;;;;wBAAgBA;;;8BAWAG;;;IAYAE,kBAAAA;;;;AAvBT,SAASL,qBAAqBC,KAAa,EAAEC,YAAqB;IACvE,OAAOA,eAAe,MAAMD,QAAQA;AACtC;AASO,SAASE,2BAA2BD,YAAqB,EAAED,KAAc;IAC9E,OAAOA,UAAUG,YAAYJ,qBAAqBC,QAAQ,KAAKC,gBAAgBE;AACjF;AAUO,4BAA4BE,GAAkB,EAAEC,QAAiB,EAAEL,YAAqB;IAC7F,IAAIK,UAAU;QACZ,OAAOL,eAAe,WAAW;IACnC;IACA,OAAQI,QAAQ,UAAWJ,eAAe,UAAU;AACtD"}

package/lib-commonjs/components/AlphaSlider/useAlphaSlider.cjs

@@ -54,6 +54,7 @@ const useAlphaSliderBase_unstable = (props, ref)=>{
             defaultProps: {
                 id: (0, _reactutilities.useId)('slider-', props.id),
                 ref,
+                'aria-orientation': vertical ? 'vertical' : 'horizontal',
                 ...nativeProps.primary,
                 type: 'range'
             },

package/lib-commonjs/components/AlphaSlider/useAlphaSlider.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/AlphaSlider/useAlphaSlider.ts"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport { getPartitionedNativeProps, useId, slot } from '@fluentui/react-utilities';\nimport type {\n  AlphaSliderBaseProps,\n  AlphaSliderBaseState,\n  AlphaSliderProps,\n  AlphaSliderState,\n} from './AlphaSlider.types';\nimport { useAlphaSliderState_unstable } from './useAlphaSliderState';\nimport { useColorPickerContextValue_unstable } from '../../contexts/colorPicker';\n\n/**\n * Create the state required to render AlphaSlider.\n *\n * The returned state can be modified with hooks such as useAlphaSliderStyles_unstable,\n * before being passed to renderAlphaSlider_unstable.\n *\n * @param props - props from this instance of AlphaSlider\n * @param ref - reference to root HTMLInputElement of AlphaSlider\n */\nexport const useAlphaSlider_unstable = (\n  props: AlphaSliderProps,\n  ref: React.Ref<HTMLInputElement>,\n): AlphaSliderState => {\n  const shapeFromContext = useColorPickerContextValue_unstable(ctx => ctx.shape);\n  const { shape = shapeFromContext, ...baseProps } = props;\n\n  return {\n    ...useAlphaSliderBase_unstable(baseProps, ref),\n    shape,\n  };\n};\n\nexport const useAlphaSliderBase_unstable = (\n  props: AlphaSliderBaseProps,\n  ref: React.Ref<HTMLInputElement>,\n): AlphaSliderBaseState => {\n  const nativeProps = getPartitionedNativeProps({\n    props,\n    primarySlotTagName: 'input',\n    excludedPropNames: ['onChange', 'color'],\n  });\n\n  const {\n    vertical,\n    // Slots\n    root,\n    input,\n    rail,\n    thumb,\n  } = props;\n\n  const state: AlphaSliderBaseState = {\n    vertical,\n    components: {\n      input: 'input',\n      rail: 'div',\n      root: 'div',\n      thumb: 'div',\n    },\n    root: slot.always(root, {\n      defaultProps: nativeProps.root,\n      elementType: 'div',\n    }),\n    input: slot.always(input, {\n      defaultProps: {\n        id: useId('slider-', props.id),\n        ref,\n        ...nativeProps.primary,\n        type: 'range',\n      },\n      elementType: 'input',\n    }),\n    rail: slot.always(rail, { elementType: 'div' }),\n    thumb: slot.always(thumb, { elementType: 'div' }),\n  };\n\n  useAlphaSliderState_unstable(state, props);\n\n  return state;\n};\n"],"names":["getPartitionedNativeProps","useId","slot","useAlphaSliderState_unstable","useColorPickerContextValue_unstable","useAlphaSlider_unstable","props","ref","shapeFromContext","ctx","shape","baseProps","useAlphaSliderBase_unstable","nativeProps","primarySlotTagName","excludedPropNames","vertical","root","input","rail","thumb","state","components","always","defaultProps","elementType","id","primary","type"],"mappings":"AAAA;;;;;;;;;;;;IAmCaY,2BAAAA;;;2BAbAP;;;;gCAnB0C,4BAA4B;qCAOtC,2BAAwB;6BACjB,gCAA6B;AAW1E,MAAMA,0BAA0B,CACrCC,OACAC;IAEA,MAAMC,uBAAmBJ,gDAAAA,EAAoCK,CAAAA,MAAOA,IAAIC,KAAK;IAC7E,MAAM,EAAEA,QAAQF,gBAAgB,EAAE,GAAGG,WAAW,GAAGL;IAEnD,OAAO;QACL,GAAGM,4BAA4BD,WAAWJ,IAAI;QAC9CG;IACF;AACF,EAAE;AAEK,oCAAoC,CACzCJ,OACAC;IAEA,MAAMM,cAAcb,6CAAAA,EAA0B;QAC5CM;QACAQ,oBAAoB;QACpBC,mBAAmB;YAAC;YAAY;SAAQ;IAC1C;IAEA,MAAM,EACJC,QAAQ,EACR,AACAC,IAAI,EACJC,EAFQ,GAEH,EACLC,IAAI,EACJC,KAAK,EACN,GAAGd;IAEJ,MAAMe,QAA8B;QAClCL;QACAM,YAAY;YACVJ,OAAO;YACPC,MAAM;YACNF,MAAM;YACNG,OAAO;QACT;QACAH,MAAMf,oBAAAA,CAAKqB,MAAM,CAACN,MAAM;YACtBO,cAAcX,YAAYI,IAAI;YAC9BQ,aAAa;QACf;QACAP,OAAOhB,oBAAAA,CAAKqB,MAAM,CAACL,OAAO;YACxBM,cAAc;gBACZE,QAAIzB,qBAAAA,EAAM,WAAWK,MAAMoB,EAAE;gBAC7BnB;gBACA,GAAGM,YAAYc,OAAO;gBACtBC,MAAM;YACR;YACAH,aAAa;QACf;QACAN,MAAMjB,oBAAAA,CAAKqB,MAAM,CAACJ,MAAM;YAAEM,aAAa;QAAM;QAC7CL,OAAOlB,oBAAAA,CAAKqB,MAAM,CAACH,OAAO;YAAEK,aAAa;QAAM;IACjD;QAEAtB,iDAAAA,EAA6BkB,OAAOf;IAEpC,OAAOe;AACT,EAAE"}
+{"version":3,"sources":["../src/components/AlphaSlider/useAlphaSlider.ts"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport { getPartitionedNativeProps, useId, slot } from '@fluentui/react-utilities';\nimport type {\n  AlphaSliderBaseProps,\n  AlphaSliderBaseState,\n  AlphaSliderProps,\n  AlphaSliderState,\n} from './AlphaSlider.types';\nimport { useAlphaSliderState_unstable } from './useAlphaSliderState';\nimport { useColorPickerContextValue_unstable } from '../../contexts/colorPicker';\n\n/**\n * Create the state required to render AlphaSlider.\n *\n * The returned state can be modified with hooks such as useAlphaSliderStyles_unstable,\n * before being passed to renderAlphaSlider_unstable.\n *\n * @param props - props from this instance of AlphaSlider\n * @param ref - reference to root HTMLInputElement of AlphaSlider\n */\nexport const useAlphaSlider_unstable = (\n  props: AlphaSliderProps,\n  ref: React.Ref<HTMLInputElement>,\n): AlphaSliderState => {\n  const shapeFromContext = useColorPickerContextValue_unstable(ctx => ctx.shape);\n  const { shape = shapeFromContext, ...baseProps } = props;\n\n  return {\n    ...useAlphaSliderBase_unstable(baseProps, ref),\n    shape,\n  };\n};\n\nexport const useAlphaSliderBase_unstable = (\n  props: AlphaSliderBaseProps,\n  ref: React.Ref<HTMLInputElement>,\n): AlphaSliderBaseState => {\n  const nativeProps = getPartitionedNativeProps({\n    props,\n    primarySlotTagName: 'input',\n    excludedPropNames: ['onChange', 'color'],\n  });\n\n  const {\n    vertical,\n    // Slots\n    root,\n    input,\n    rail,\n    thumb,\n  } = props;\n\n  const state: AlphaSliderBaseState = {\n    vertical,\n    components: {\n      input: 'input',\n      rail: 'div',\n      root: 'div',\n      thumb: 'div',\n    },\n    root: slot.always(root, {\n      defaultProps: nativeProps.root,\n      elementType: 'div',\n    }),\n    input: slot.always(input, {\n      defaultProps: {\n        id: useId('slider-', props.id),\n        ref,\n        'aria-orientation': vertical ? 'vertical' : 'horizontal',\n        ...nativeProps.primary,\n        type: 'range',\n      },\n      elementType: 'input',\n    }),\n    rail: slot.always(rail, { elementType: 'div' }),\n    thumb: slot.always(thumb, { elementType: 'div' }),\n  };\n\n  useAlphaSliderState_unstable(state, props);\n\n  return state;\n};\n"],"names":["getPartitionedNativeProps","useId","slot","useAlphaSliderState_unstable","useColorPickerContextValue_unstable","useAlphaSlider_unstable","props","ref","shapeFromContext","ctx","shape","baseProps","useAlphaSliderBase_unstable","nativeProps","primarySlotTagName","excludedPropNames","vertical","root","input","rail","thumb","state","components","always","defaultProps","elementType","id","primary","type"],"mappings":"AAAA;;;;;;;;;;;;IAmCaY,2BAAAA;;;2BAbAP;;;;gCAnB0C,4BAA4B;qCAOtC,2BAAwB;6BACjB,gCAA6B;AAW1E,MAAMA,0BAA0B,CACrCC,OACAC;IAEA,MAAMC,uBAAmBJ,gDAAAA,EAAoCK,CAAAA,MAAOA,IAAIC,KAAK;IAC7E,MAAM,EAAEA,QAAQF,gBAAgB,EAAE,GAAGG,WAAW,GAAGL;IAEnD,OAAO;QACL,GAAGM,4BAA4BD,WAAWJ,IAAI;QAC9CG;IACF;AACF,EAAE;AAEK,oCAAoC,CACzCJ,OACAC;IAEA,MAAMM,cAAcb,6CAAAA,EAA0B;QAC5CM;QACAQ,oBAAoB;QACpBC,mBAAmB;YAAC;YAAY;SAAQ;IAC1C;IAEA,MAAM,EACJC,QAAQ,EACR,AACAC,IAAI,EACJC,EAFQ,GAEH,EACLC,IAAI,EACJC,KAAK,EACN,GAAGd;IAEJ,MAAMe,QAA8B;QAClCL;QACAM,YAAY;YACVJ,OAAO;YACPC,MAAM;YACNF,MAAM;YACNG,OAAO;QACT;QACAH,MAAMf,oBAAAA,CAAKqB,MAAM,CAACN,MAAM;YACtBO,cAAcX,YAAYI,IAAI;YAC9BQ,aAAa;QACf;QACAP,OAAOhB,oBAAAA,CAAKqB,MAAM,CAACL,OAAO;YACxBM,cAAc;gBACZE,QAAIzB,qBAAAA,EAAM,WAAWK,MAAMoB,EAAE;gBAC7BnB;gBACA,oBAAoBS,WAAW,aAAa;gBAC5C,GAAGH,YAAYc,OAAO;gBACtBC,MAAM;YACR;YACAH,aAAa;QACf;QACAN,MAAMjB,oBAAAA,CAAKqB,MAAM,CAACJ,MAAM;YAAEM,aAAa;QAAM;QAC7CL,OAAOlB,oBAAAA,CAAKqB,MAAM,CAACH,OAAO;YAAEK,aAAa;QAAM;IACjD;QAEAtB,iDAAAA,EAA6BkB,OAAOf;IAEpC,OAAOe;AACT,EAAE"}

package/lib-commonjs/components/AlphaSlider/useAlphaSliderState.cjs

@@ -19,28 +19,28 @@ const _alphaSliderUtils = require("./alphaSliderUtils.cjs");
 const _createHsvColor = require("../../utils/createHsvColor.cjs");
 const _createHslColor = require("../../utils/createHslColor.cjs");
 const useAlphaSliderState_unstable = (state, props)=>{
-    var _props_defaultColor;
     const { dir } = (0, _reactsharedcontexts.useFluent_unstable)();
     const onChangeFromContext = (0, _colorPicker.useColorPickerContextValue_unstable)((ctx)=>ctx.requestChange);
     const colorFromContext = (0, _colorPicker.useColorPickerContextValue_unstable)((ctx)=>ctx.color);
     const { color, onChange = onChangeFromContext, transparency = false, vertical = false } = props;
-    const hsvColor = color || colorFromContext;
-    const hslColor = (0, _createHslColor.createHslColor)(hsvColor);
-    const [currentValue, setCurrentValue] = (0, _reactutilities.useControllableState)({
-        defaultState: (0, _alphaSliderUtils.calculateTransparencyValue)(transparency, (_props_defaultColor = props.defaultColor) === null || _props_defaultColor === void 0 ? void 0 : _props_defaultColor.a),
-        state: (0, _alphaSliderUtils.calculateTransparencyValue)(transparency, hsvColor === null || hsvColor === void 0 ? void 0 : hsvColor.a),
-        initialState: (0, _alphaSliderUtils.adjustToTransparency)(100, transparency)
+    const [currentColor, setCurrentColor] = (0, _reactutilities.useControllableState)({
+        defaultState: props.defaultColor,
+        state: color || colorFromContext,
+        initialState: (0, _createHsvColor.createHsvColor)({})
     });
+    const hslColor = (0, _createHslColor.createHslColor)(currentColor);
+    var _currentColor_a;
+    const currentValue = (0, _alphaSliderUtils.adjustToTransparency)(((_currentColor_a = currentColor.a) !== null && _currentColor_a !== void 0 ? _currentColor_a : 1) * 100, transparency);
     const clampedValue = (0, _reactutilities.clamp)(currentValue, _constants.MIN, _constants.MAX);
     const valuePercent = (0, _getPercent.getPercent)(clampedValue, _constants.MIN, _constants.MAX);
     const inputOnChange = state.input.onChange;
     const _onChange = (0, _reactutilities.useEventCallback)((event)=>{
         const newValue = (0, _alphaSliderUtils.adjustToTransparency)(Number(event.target.value), transparency);
         const newColor = (0, _createHsvColor.createHsvColor)({
-            ...hsvColor,
+            ...currentColor,
             a: newValue / 100
         });
-        setCurrentValue(newValue);
+        setCurrentColor(newColor);
         inputOnChange === null || inputOnChange === void 0 ? void 0 : inputOnChange(event);
         onChange === null || onChange === void 0 ? void 0 : onChange(event, {
             type: 'change',

package/lib-commonjs/components/AlphaSlider/useAlphaSliderState.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/AlphaSlider/useAlphaSliderState.ts"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport { clamp, useControllableState, useEventCallback } from '@fluentui/react-utilities';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { alphaSliderCSSVars } from './AlphaSlider.constants';\nimport type { AlphaSliderState, AlphaSliderProps } from './AlphaSlider.types';\nimport { useColorPickerContextValue_unstable } from '../../contexts/colorPicker';\nimport { MIN, MAX } from '../../utils/constants';\nimport { getPercent } from '../../utils/getPercent';\nimport { adjustToTransparency, calculateTransparencyValue, getSliderDirection } from './alphaSliderUtils';\nimport { createHsvColor } from '../../utils/createHsvColor';\nimport { createHslColor } from '../../utils/createHslColor';\n\nexport const useAlphaSliderState_unstable = (state: AlphaSliderState, props: AlphaSliderProps): AlphaSliderState => {\n  const { dir } = useFluent();\n  const onChangeFromContext = useColorPickerContextValue_unstable(ctx => ctx.requestChange);\n  const colorFromContext = useColorPickerContextValue_unstable(ctx => ctx.color);\n  const { color, onChange = onChangeFromContext, transparency = false, vertical = false } = props;\n  const hsvColor = color || colorFromContext;\n  const hslColor = createHslColor(hsvColor);\n\n  const [currentValue, setCurrentValue] = useControllableState({\n    defaultState: calculateTransparencyValue(transparency, props.defaultColor?.a),\n    state: calculateTransparencyValue(transparency, hsvColor?.a),\n    initialState: adjustToTransparency(100, transparency),\n  });\n\n  const clampedValue = clamp(currentValue, MIN, MAX);\n  const valuePercent = getPercent(clampedValue, MIN, MAX);\n\n  const inputOnChange = state.input.onChange;\n\n  const _onChange: React.ChangeEventHandler<HTMLInputElement> = useEventCallback(event => {\n    const newValue = adjustToTransparency(Number(event.target.value), transparency);\n    const newColor = createHsvColor({ ...hsvColor, a: newValue / 100 });\n    setCurrentValue(newValue);\n    inputOnChange?.(event);\n    onChange?.(event, { type: 'change', event, color: newColor });\n  });\n\n  const sliderDirection = getSliderDirection(dir, vertical, transparency);\n\n  const rootVariables = {\n    [alphaSliderCSSVars.sliderDirectionVar]: sliderDirection,\n    [alphaSliderCSSVars.sliderProgressVar]: `${valuePercent}%`,\n    [alphaSliderCSSVars.thumbColorVar]: `hsla(${hslColor.h}, ${hslColor.s * 100}%, ${hslColor.l * 100}%, ${\n      hslColor.a\n    })`,\n    [alphaSliderCSSVars.railColorVar]: `hsl(${hslColor.h}, ${hslColor.s * 100}%, ${hslColor.l * 100}%)`,\n  };\n\n  // Root props\n  // eslint-disable-next-line react-hooks/immutability\n  state.root.style = {\n    ...rootVariables,\n    ...state.root.style,\n  };\n\n  // Input Props\n  // eslint-disable-next-line react-hooks/immutability\n  state.input.value = clampedValue;\n  // eslint-disable-next-line react-hooks/immutability\n  state.input.onChange = _onChange;\n\n  return state;\n};\n"],"names":["clamp","useControllableState","useEventCallback","useFluent_unstable","useFluent","alphaSliderCSSVars","useColorPickerContextValue_unstable","MIN","MAX","getPercent","adjustToTransparency","calculateTransparencyValue","getSliderDirection","createHsvColor","createHslColor","useAlphaSliderState_unstable","state","props","dir","onChangeFromContext","ctx","requestChange","colorFromContext","color","onChange","transparency","vertical","hsvColor","hslColor","currentValue","setCurrentValue","defaultState","defaultColor","a","initialState","clampedValue","valuePercent","inputOnChange","input","_onChange","event","newValue","Number","target","value","newColor","type","sliderDirection","rootVariables","sliderDirectionVar","sliderProgressVar","thumbColorVar","h","s","l","railColorVar","root","style"],"mappings":"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"}
+{"version":3,"sources":["../src/components/AlphaSlider/useAlphaSliderState.ts"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport { clamp, useControllableState, useEventCallback } from '@fluentui/react-utilities';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { alphaSliderCSSVars } from './AlphaSlider.constants';\nimport type { AlphaSliderState, AlphaSliderProps } from './AlphaSlider.types';\nimport { useColorPickerContextValue_unstable } from '../../contexts/colorPicker';\nimport { MIN, MAX } from '../../utils/constants';\nimport { getPercent } from '../../utils/getPercent';\nimport { adjustToTransparency, getSliderDirection } from './alphaSliderUtils';\nimport { createHsvColor } from '../../utils/createHsvColor';\nimport { createHslColor } from '../../utils/createHslColor';\nimport type { HsvColor } from '../../types/color';\n\nexport const useAlphaSliderState_unstable = (state: AlphaSliderState, props: AlphaSliderProps): AlphaSliderState => {\n  const { dir } = useFluent();\n  const onChangeFromContext = useColorPickerContextValue_unstable(ctx => ctx.requestChange);\n  const colorFromContext = useColorPickerContextValue_unstable(ctx => ctx.color);\n  const { color, onChange = onChangeFromContext, transparency = false, vertical = false } = props;\n  const [currentColor, setCurrentColor] = useControllableState<HsvColor>({\n    defaultState: props.defaultColor,\n    state: color || colorFromContext,\n    initialState: createHsvColor({}),\n  });\n  const hslColor = createHslColor(currentColor);\n  const currentValue = adjustToTransparency((currentColor.a ?? 1) * 100, transparency);\n\n  const clampedValue = clamp(currentValue, MIN, MAX);\n  const valuePercent = getPercent(clampedValue, MIN, MAX);\n\n  const inputOnChange = state.input.onChange;\n\n  const _onChange: React.ChangeEventHandler<HTMLInputElement> = useEventCallback(event => {\n    const newValue = adjustToTransparency(Number(event.target.value), transparency);\n    const newColor = createHsvColor({ ...currentColor, a: newValue / 100 });\n    setCurrentColor(newColor);\n    inputOnChange?.(event);\n    onChange?.(event, { type: 'change', event, color: newColor });\n  });\n\n  const sliderDirection = getSliderDirection(dir, vertical, transparency);\n\n  const rootVariables = {\n    [alphaSliderCSSVars.sliderDirectionVar]: sliderDirection,\n    [alphaSliderCSSVars.sliderProgressVar]: `${valuePercent}%`,\n    [alphaSliderCSSVars.thumbColorVar]: `hsla(${hslColor.h}, ${hslColor.s * 100}%, ${hslColor.l * 100}%, ${\n      hslColor.a\n    })`,\n    [alphaSliderCSSVars.railColorVar]: `hsl(${hslColor.h}, ${hslColor.s * 100}%, ${hslColor.l * 100}%)`,\n  };\n\n  // Root props\n  // eslint-disable-next-line react-hooks/immutability\n  state.root.style = {\n    ...rootVariables,\n    ...state.root.style,\n  };\n\n  // Input Props\n  // eslint-disable-next-line react-hooks/immutability\n  state.input.value = clampedValue;\n  // eslint-disable-next-line react-hooks/immutability\n  state.input.onChange = _onChange;\n\n  return state;\n};\n"],"names":["clamp","useControllableState","useEventCallback","useFluent_unstable","useFluent","alphaSliderCSSVars","useColorPickerContextValue_unstable","MIN","MAX","getPercent","adjustToTransparency","getSliderDirection","createHsvColor","createHslColor","useAlphaSliderState_unstable","state","props","dir","onChangeFromContext","ctx","requestChange","colorFromContext","color","onChange","transparency","vertical","currentColor","setCurrentColor","defaultState","defaultColor","initialState","hslColor","currentValue","a","clampedValue","valuePercent","inputOnChange","input","_onChange","event","newValue","Number","target","value","newColor","type","sliderDirection","rootVariables","sliderDirectionVar","sliderProgressVar","thumbColorVar","h","s","l","railColorVar","root","style"],"mappings":"AAAA;;;;;+BAeac;;;;;;gCAZiD,4BAA4B;qCAC1C,kCAAkC;sCAC/C,6BAA0B;6BAET,gCAA6B;2BACxD,2BAAwB;4BACtB,4BAAyB;kCACK,wBAAqB;gCAC/C,gCAA6B;gCAC7B,gCAA6B;AAGrD,qCAAqC,CAACC,OAAyBC;IACpE,MAAM,EAAEC,GAAG,EAAE,OAAGb,uCAAAA;IAChB,MAAMc,0BAAsBZ,gDAAAA,EAAoCa,CAAAA,MAAOA,IAAIC,aAAa;IACxF,MAAMC,uBAAmBf,gDAAAA,EAAoCa,CAAAA,MAAOA,IAAIG,KAAK;IAC7E,MAAM,EAAEA,KAAK,EAAEC,WAAWL,mBAAmB,EAAEM,eAAe,KAAK,EAAEC,WAAW,KAAK,EAAE,GAAGT;IAC1F,MAAM,CAACU,cAAcC,gBAAgB,OAAG1B,oCAAAA,EAA+B;QACrE2B,cAAcZ,MAAMa,YAAY;QAChCd,OAAOO,SAASD;QAChBS,kBAAclB,8BAAAA,EAAe,CAAC;IAChC;IACA,MAAMmB,eAAWlB,8BAAAA,EAAea;QACWA;IAA3C,MAAMM,mBAAetB,sCAAAA,EAAsBgB,CAAAA,CAAAA,kBAAAA,aAAaO,CAAC,MAAA,QAAdP,oBAAAA,KAAAA,IAAAA,mBAAkB,CAAA,GAAK,KAAKF;IAEvE,MAAMU,mBAAelC,qBAAAA,EAAMgC,cAAczB,cAAAA,EAAKC,cAAAA;IAC9C,MAAM2B,eAAe1B,0BAAAA,EAAWyB,cAAc3B,cAAAA,EAAKC,cAAAA;IAEnD,MAAM4B,gBAAgBrB,MAAMsB,KAAK,CAACd,QAAQ;IAE1C,MAAMe,gBAAwDpC,gCAAAA,EAAiBqC,CAAAA;QAC7E,MAAMC,eAAW9B,sCAAAA,EAAqB+B,OAAOF,MAAMG,MAAM,CAACC,KAAK,GAAGnB;QAClE,MAAMoB,eAAWhC,8BAAAA,EAAe;YAAE,GAAGc,YAAY;YAAEO,GAAGO,WAAW;QAAI;QACrEb,gBAAgBiB;QAChBR,kBAAAA,QAAAA,kBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,cAAgBG;QAChBhB,aAAAA,QAAAA,aAAAA,KAAAA,IAAAA,KAAAA,IAAAA,SAAWgB,OAAO;YAAEM,MAAM;YAAUN;YAAOjB,OAAOsB;QAAS;IAC7D;IAEA,MAAME,sBAAkBnC,oCAAAA,EAAmBM,KAAKQ,UAAUD;IAE1D,MAAMuB,gBAAgB;QACpB,CAAC1C,wCAAAA,CAAmB2C,kBAAkB,CAAC,EAAEF;QACzC,CAACzC,wCAAAA,CAAmB4C,iBAAiB,CAAC,EAAE,GAAGd,aAAa,CAAC,CAAC;QAC1D,CAAC9B,wCAAAA,CAAmB6C,aAAa,CAAC,EAAE,CAAC,KAAK,EAAEnB,SAASoB,CAAC,CAAC,EAAE,EAAEpB,SAASqB,CAAC,GAAG,IAAI,GAAG,EAAErB,SAASsB,CAAC,GAAG,IAAI,GAAG,EACnGtB,SAASE,CAAC,CACX,CAAC,CAAC;QACH,CAAC5B,wCAAAA,CAAmBiD,YAAY,CAAC,EAAE,CAAC,IAAI,EAAEvB,SAASoB,CAAC,CAAC,EAAE,EAAEpB,SAASqB,CAAC,GAAG,IAAI,GAAG,EAAErB,SAASsB,CAAC,GAAG,IAAI,EAAE,CAAC;IACrG;IAEA,aAAa;IACb,oDAAoD;IACpDtC,MAAMwC,IAAI,CAACC,KAAK,GAAG;QACjB,GAAGT,aAAa;QAChB,GAAGhC,MAAMwC,IAAI,CAACC,KAAK;IACrB;IAEA,cAAc;IACd,oDAAoD;IACpDzC,MAAMsB,KAAK,CAACM,KAAK,GAAGT;IACpB,oDAAoD;IACpDnB,MAAMsB,KAAK,CAACd,QAAQ,GAAGe;IAEvB,OAAOvB;AACT,EAAE"}

package/lib-commonjs/components/ColorArea/useColorArea.cjs

@@ -171,6 +171,7 @@ const useColorAreaBase_unstable = (props, ref)=>{
             defaultProps: {
                 id: (0, _reactutilities.useId)('sliderY-'),
                 type: 'range',
+                'aria-orientation': 'vertical',
                 tabIndex: activeAxis && activeAxis === 'y' ? 0 : -1
             },
             elementType: 'input'

package/lib-commonjs/components/ColorArea/useColorArea.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/ColorArea/useColorArea.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useId, slot, useMergedRefs, mergeCallbacks, getIntrinsicElementProps } from '@fluentui/react-utilities';\nimport type { ColorAreaBaseProps, ColorAreaBaseState, ColorAreaProps, ColorAreaState } from './ColorArea.types';\nimport type { HsvColor } from '../../types/color';\nimport { colorAreaCSSVars } from './ColorArea.constants';\nimport { useEventCallback, useControllableState } from '@fluentui/react-utilities';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { useFocusWithin } from '@fluentui/react-tabster';\nimport { INITIAL_COLOR_HSV } from '../../utils/constants';\nimport { getCoordinates } from '../../utils/getCoordinates';\nimport { useColorPickerContextValue_unstable } from '../../contexts/colorPicker';\nimport { createHslColorString } from '../../utils/createHslColor';\n\n/**\n * Create the state required to render unstyled ColorArea.\n *\n * The returned state can be modified with hooks before being passed to renderColorArea_unstable.\n *\n * @param props - props from this instance of ColorArea\n * @param ref - reference to root HTMLDivElement of ColorArea\n */\nexport const useColorAreaBase_unstable = (\n  props: ColorAreaBaseProps,\n  ref: React.Ref<HTMLDivElement>,\n): ColorAreaBaseState => {\n  const { targetDocument } = useFluent();\n  const rootRef = React.useRef<HTMLDivElement>(null);\n  const xRef = React.useRef<HTMLInputElement>(null);\n  const yRef = React.useRef<HTMLInputElement>(null);\n  const focusWithinRef = useFocusWithin();\n  const onChangeFromContext = useColorPickerContextValue_unstable(ctx => ctx.requestChange);\n  const colorFromContext = useColorPickerContextValue_unstable(ctx => ctx.color);\n\n  const {\n    onChange = onChangeFromContext as unknown as ColorAreaProps['onChange'],\n    // Slots\n    inputX,\n    inputY,\n    thumb,\n    color,\n    ...rest\n  } = props;\n\n  const [hsvColor, setColor] = useControllableState<HsvColor>({\n    defaultState: props.defaultColor,\n    state: color || colorFromContext,\n    initialState: INITIAL_COLOR_HSV,\n  });\n  const saturation = Math.round(hsvColor.s * 100);\n  const value = Math.round(hsvColor.v * 100);\n\n  const [activeAxis, setActiveAxis] = React.useState<'x' | 'y' | null>(null);\n\n  const requestColorChange = useEventCallback((event: PointerEvent) => {\n    if (!rootRef.current) {\n      return;\n    }\n\n    const coordinates = getCoordinates(rootRef.current, event);\n    const newColor: HsvColor = {\n      ...hsvColor,\n      s: coordinates.x,\n      v: coordinates.y,\n    };\n\n    setColor(newColor);\n    onChange?.(event, {\n      type: 'change',\n      event,\n      color: newColor,\n    });\n  });\n\n  const handleDocumentPointerMove = React.useCallback(\n    (event: PointerEvent) => {\n      requestColorChange(event);\n    },\n    [requestColorChange],\n  );\n\n  const handleDocumentPointerUp = useEventCallback(() => {\n    targetDocument?.removeEventListener('pointermove', handleDocumentPointerMove);\n  });\n\n  const handleRootOnPointerDown: React.PointerEventHandler<HTMLDivElement> = useEventCallback(event => {\n    event.stopPropagation();\n    event.preventDefault();\n\n    requestColorChange(event.nativeEvent);\n\n    targetDocument?.addEventListener('pointermove', handleDocumentPointerMove);\n    targetDocument?.addEventListener('pointerup', handleDocumentPointerUp, { once: true });\n  });\n\n  const handleInputOnChange: React.ChangeEventHandler<HTMLInputElement> = useEventCallback(event => {\n    const targetValue = Number(event.target.value) / 100;\n    const newColor: HsvColor = {\n      ...hsvColor,\n      ...(event.target === xRef.current && { s: targetValue }),\n      ...(event.target === yRef.current && { v: targetValue }),\n    };\n\n    setColor(newColor);\n    onChange?.(event, { type: 'change', event, color: newColor });\n  });\n\n  const handleRootOnKeyDown = useEventCallback((event: React.KeyboardEvent<HTMLDivElement>) => {\n    let deltaX = 0;\n    let deltaY = 0;\n    let axis: 'x' | 'y' = 'x';\n\n    switch (event.key) {\n      case 'ArrowUp':\n        event.preventDefault();\n\n        axis = 'y';\n        deltaY = 1;\n\n        break;\n      case 'ArrowDown':\n        event.preventDefault();\n\n        axis = 'y';\n        deltaY = -1;\n\n        break;\n      case 'ArrowLeft':\n        event.preventDefault();\n\n        axis = 'x';\n        deltaX = -1;\n\n        break;\n      case 'ArrowRight':\n        event.preventDefault();\n\n        axis = 'x';\n        deltaX = 1;\n\n        break;\n    }\n\n    if (deltaX === 0 && deltaY === 0) {\n      return;\n    }\n\n    const newColor: HsvColor = {\n      ...hsvColor,\n      s: Math.min(Math.max(hsvColor.s + deltaX / 100, 0), 1),\n      v: Math.min(Math.max(hsvColor.v + deltaY / 100, 0), 1),\n    };\n\n    setColor(newColor);\n    setActiveAxis(axis);\n\n    onChange?.(event, { type: 'change', event, color: newColor });\n  });\n\n  const rootVariables = {\n    [colorAreaCSSVars.areaXProgressVar]: `${saturation}%`,\n    [colorAreaCSSVars.areaYProgressVar]: `${value}%`,\n    [colorAreaCSSVars.thumbColorVar]: createHslColorString(hsvColor),\n    [colorAreaCSSVars.mainColorVar]: `hsl(${hsvColor.h}, 100%, 50%)`,\n  };\n  const state: ColorAreaBaseState = {\n    components: {\n      inputX: 'input',\n      inputY: 'input',\n      root: 'div',\n      thumb: 'div',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        ref,\n        ...rest,\n      }),\n      { elementType: 'div' },\n    ),\n    inputX: slot.always(inputX, {\n      defaultProps: {\n        id: useId('sliderX-'),\n        type: 'range',\n        ...(activeAxis && { tabIndex: activeAxis === 'x' ? 0 : -1 }),\n      },\n      elementType: 'input',\n    }),\n    inputY: slot.always(inputY, {\n      defaultProps: {\n        id: useId('sliderY-'),\n        type: 'range',\n        tabIndex: activeAxis && activeAxis === 'y' ? 0 : -1,\n      },\n      elementType: 'input',\n    }),\n    thumb: slot.always(thumb, { elementType: 'div' }),\n  };\n\n  state.root.ref = useMergedRefs(state.root.ref, rootRef);\n  state.thumb.ref = useMergedRefs(state.thumb.ref, focusWithinRef);\n  state.inputX.ref = useMergedRefs(state.inputX.ref, xRef);\n  state.inputY.ref = useMergedRefs(state.inputY.ref, yRef);\n\n  state.root.style = {\n    ...state.root.style,\n    ...rootVariables,\n  };\n\n  state.root.onPointerDown = useEventCallback(mergeCallbacks(state.root.onPointerDown, handleRootOnPointerDown));\n  state.root.onKeyDown = useEventCallback(mergeCallbacks(state.root.onKeyDown, handleRootOnKeyDown));\n  state.inputX.onChange = useEventCallback(mergeCallbacks(state.inputX.onChange, handleInputOnChange));\n  state.inputY.onChange = useEventCallback(mergeCallbacks(state.inputY.onChange, handleInputOnChange));\n\n  state.inputX.value = saturation;\n  state.inputY.value = value;\n\n  return state;\n};\n\n/**\n * Create the state required to render ColorArea.\n *\n * The returned state can be modified with hooks such as useColorAreaStyles_unstable,\n * before being passed to renderColorArea_unstable.\n *\n * @param props - props from this instance of ColorArea\n * @param ref - reference to root HTMLDivElement of ColorArea\n */\nexport const useColorArea_unstable = (props: ColorAreaProps, ref: React.Ref<HTMLDivElement>): ColorAreaState => {\n  const shapeFromContext = useColorPickerContextValue_unstable(ctx => ctx.shape);\n\n  const { shape = shapeFromContext, ...rest } = props;\n\n  const state: ColorAreaState = {\n    ...useColorAreaBase_unstable(rest, ref),\n    shape,\n  };\n\n  return state;\n};\n"],"names":["React","useId","slot","useMergedRefs","mergeCallbacks","getIntrinsicElementProps","colorAreaCSSVars","useEventCallback","useControllableState","useFluent_unstable","useFluent","useFocusWithin","INITIAL_COLOR_HSV","getCoordinates","useColorPickerContextValue_unstable","createHslColorString","useColorAreaBase_unstable","props","ref","targetDocument","rootRef","useRef","xRef","yRef","focusWithinRef","onChangeFromContext","ctx","requestChange","colorFromContext","color","onChange","inputX","inputY","thumb","rest","hsvColor","setColor","defaultState","defaultColor","state","initialState","saturation","Math","round","s","value","v","activeAxis","setActiveAxis","useState","requestColorChange","event","current","coordinates","newColor","x","y","type","handleDocumentPointerMove","useCallback","handleDocumentPointerUp","removeEventListener","handleRootOnPointerDown","stopPropagation","preventDefault","nativeEvent","addEventListener","once","handleInputOnChange","targetValue","Number","target","handleRootOnKeyDown","deltaX","deltaY","axis","key","min","max","rootVariables","areaXProgressVar","areaYProgressVar","thumbColorVar","mainColorVar","h","components","root","always","elementType","defaultProps","id","tabIndex","style","onPointerDown","onKeyDown","useColorArea_unstable","shapeFromContext","shape"],"mappings":"AAAA;;;;;;;;;;;;IAuBagB,yBAAAA;;;IA8MA+E,qBAAAA;;;;;iEAnOU,QAAQ;gCACsD,4BAA4B;oCAGhF,2BAAwB;qCAET,kCAAkC;8BACnD,0BAA0B;2BACvB,2BAAwB;gCAC3B,gCAA6B;6BACR,gCAA6B;gCAC5C,gCAA6B;AAU3D,kCAAkC,CACvC9E,OACAC;IAEA,MAAM,EAAEC,cAAc,EAAE,OAAGT,uCAAAA;IAC3B,MAAMU,UAAUpB,OAAMqB,MAAM,CAAiB;IAC7C,MAAMC,OAAOtB,OAAMqB,MAAM,CAAmB;IAC5C,MAAME,OAAOvB,OAAMqB,MAAM,CAAmB;IAC5C,MAAMG,qBAAiBb,4BAAAA;IACvB,MAAMc,0BAAsBX,gDAAAA,EAAoCY,CAAAA,MAAOA,IAAIC,aAAa;IACxF,MAAMC,uBAAmBd,gDAAAA,EAAoCY,CAAAA,MAAOA,IAAIG,KAAK;IAE7E,MAAM,EACJC,WAAWL,mBAA4D,EAEvEM,AADA,MACM,EADE,AAERC,MAAM,EACNC,KAAK,EACLJ,KAAK,EACL,GAAGK,MACJ,GAAGjB;IAEJ,MAAM,CAACkB,UAAUC,SAAS,OAAG5B,oCAAAA,EAA+B;QAC1D6B,cAAcpB,MAAMqB,YAAY;QAChCC,OAAOV,SAASD;QAChBY,cAAc5B,4BAAAA;IAChB;IACA,MAAM6B,aAAaC,KAAKC,KAAK,CAACR,SAASS,CAAC,GAAG;IAC3C,MAAMC,QAAQH,KAAKC,KAAK,CAACR,SAASW,CAAC,GAAG;IAEtC,MAAM,CAACC,YAAYC,cAAc,GAAGhD,OAAMiD,QAAQ,CAAmB;IAErE,MAAMC,yBAAqB3C,gCAAAA,EAAiB,CAAC4C;QAC3C,IAAI,CAAC/B,QAAQgC,OAAO,EAAE;YACpB;QACF;QAEA,MAAMC,kBAAcxC,8BAAAA,EAAeO,QAAQgC,OAAO,EAAED;QACpD,MAAMG,WAAqB;YACzB,GAAGnB,QAAQ;YACXS,GAAGS,YAAYE,CAAC;YAChBT,GAAGO,YAAYG,CAAC;QAClB;QAEApB,SAASkB;QACTxB,aAAAA,QAAAA,aAAAA,KAAAA,IAAAA,KAAAA,IAAAA,SAAWqB,OAAO;YAChBM,MAAM;YACNN;YACAtB,OAAOyB;QACT;IACF;IAEA,MAAMI,4BAA4B1D,OAAM2D,WAAW,CACjD,CAACR;QACCD,mBAAmBC;IACrB,GACA;QAACD;KAAmB;IAGtB,MAAMU,8BAA0BrD,gCAAAA,EAAiB;QAC/CY,mBAAAA,QAAAA,mBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,eAAgB0C,mBAAmB,CAAC,eAAeH;IACrD;IAEA,MAAMI,8BAAqEvD,gCAAAA,EAAiB4C,CAAAA;QAC1FA,MAAMY,eAAe;QACrBZ,MAAMa,cAAc;QAEpBd,mBAAmBC,MAAMc,WAAW;QAEpC9C,mBAAAA,QAAAA,mBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,eAAgB+C,gBAAgB,CAAC,eAAeR;QAChDvC,mBAAAA,QAAAA,mBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,eAAgB+C,gBAAgB,CAAC,aAAaN,yBAAyB;YAAEO,MAAM;QAAK;IACtF;IAEA,MAAMC,0BAAkE7D,gCAAAA,EAAiB4C,CAAAA;QACvF,MAAMkB,cAAcC,OAAOnB,MAAMoB,MAAM,CAAC1B,KAAK,IAAI;QACjD,MAAMS,WAAqB;YACzB,GAAGnB,QAAQ;YACX,GAAIgB,MAAMoB,MAAM,KAAKjD,KAAK8B,OAAO,IAAI;gBAAER,GAAGyB;YAAY,CAAC;YACvD,GAAIlB,MAAMoB,MAAM,KAAKhD,KAAK6B,OAAO,IAAI;gBAAEN,GAAGuB;YAAY,CAAC;QACzD;QAEAjC,SAASkB;QACTxB,aAAAA,QAAAA,aAAAA,KAAAA,IAAAA,KAAAA,IAAAA,SAAWqB,OAAO;YAAEM,MAAM;YAAUN;YAAOtB,OAAOyB;QAAS;IAC7D;IAEA,MAAMkB,0BAAsBjE,gCAAAA,EAAiB,CAAC4C;QAC5C,IAAIsB,SAAS;QACb,IAAIC,SAAS;QACb,IAAIC,OAAkB;QAEtB,OAAQxB,MAAMyB,GAAG;YACf,KAAK;gBACHzB,MAAMa,cAAc;gBAEpBW,OAAO;gBACPD,SAAS;gBAET;YACF,KAAK;gBACHvB,MAAMa,cAAc;gBAEpBW,OAAO;gBACPD,SAAS,CAAC;gBAEV;YACF,KAAK;gBACHvB,MAAMa,cAAc;gBAEpBW,OAAO;gBACPF,SAAS,CAAC;gBAEV;YACF,KAAK;gBACHtB,MAAMa,cAAc;gBAEpBW,OAAO;gBACPF,SAAS;gBAET;QACJ;QAEA,IAAIA,WAAW,KAAKC,WAAW,GAAG;YAChC;QACF;QAEA,MAAMpB,WAAqB;YACzB,GAAGnB,QAAQ;YACXS,GAAGF,KAAKmC,GAAG,CAACnC,KAAKoC,GAAG,CAAC3C,SAASS,CAAC,GAAG6B,SAAS,KAAK,IAAI;YACpD3B,GAAGJ,KAAKmC,GAAG,CAACnC,KAAKoC,GAAG,CAAC3C,SAASW,CAAC,GAAG4B,SAAS,KAAK,IAAI;QACtD;QAEAtC,SAASkB;QACTN,cAAc2B;QAEd7C,aAAAA,QAAAA,aAAAA,KAAAA,IAAAA,KAAAA,IAAAA,SAAWqB,OAAO;YAAEM,MAAM;YAAUN;YAAOtB,OAAOyB;QAAS;IAC7D;IAEA,MAAMyB,gBAAgB;QACpB,CAACzE,oCAAAA,CAAiB0E,gBAAgB,CAAC,EAAE,GAAGvC,WAAW,CAAC,CAAC;QACrD,CAACnC,oCAAAA,CAAiB2E,gBAAgB,CAAC,EAAE,GAAGpC,MAAM,CAAC,CAAC;QAChD,CAACvC,oCAAAA,CAAiB4E,aAAa,CAAC,MAAEnE,oCAAAA,EAAqBoB;QACvD,CAAC7B,oCAAAA,CAAiB6E,YAAY,CAAC,EAAE,CAAC,IAAI,EAAEhD,SAASiD,CAAC,CAAC,YAAY,CAAC;IAClE;IACA,MAAM7C,QAA4B;QAChC8C,YAAY;YACVtD,QAAQ;YACRC,QAAQ;YACRsD,MAAM;YACNrD,OAAO;QACT;QACAqD,MAAMpF,oBAAAA,CAAKqF,MAAM,KACflF,wCAAAA,EAAyB,OAAO;YAC9Ba;YACA,GAAGgB,IAAI;QACT,IACA;YAAEsD,aAAa;QAAM;QAEvBzD,QAAQ7B,oBAAAA,CAAKqF,MAAM,CAACxD,QAAQ;YAC1B0D,cAAc;gBACZC,QAAIzF,qBAAAA,EAAM;gBACVwD,MAAM;gBACN,GAAIV,cAAc;oBAAE4C,UAAU5C,eAAe,MAAM,IAAI,CAAC;gBAAE,CAAC;YAC7D;YACAyC,aAAa;QACf;QACAxD,QAAQ9B,oBAAAA,CAAKqF,MAAM,CAACvD,QAAQ;YAC1ByD,cAAc;gBACZC,QAAIzF,qBAAAA,EAAM;gBACVwD,MAAM;gBACNkC,UAAU5C,cAAcA,eAAe,MAAM,IAAI,CAAC;YACpD;YACAyC,aAAa;QACf;QACAvD,OAAO/B,oBAAAA,CAAKqF,MAAM,CAACtD,OAAO;YAAEuD,aAAa;QAAM;IACjD;IAEAjD,MAAM+C,IAAI,CAACpE,GAAG,OAAGf,6BAAAA,EAAcoC,MAAM+C,IAAI,CAACpE,GAAG,EAAEE;IAC/CmB,MAAMN,KAAK,CAACf,GAAG,OAAGf,6BAAAA,EAAcoC,MAAMN,KAAK,CAACf,GAAG,EAAEM;IACjDe,MAAMR,MAAM,CAACb,GAAG,GAAGf,iCAAAA,EAAcoC,MAAMR,MAAM,CAACb,GAAG,EAAEI;IACnDiB,MAAMP,MAAM,CAACd,GAAG,OAAGf,6BAAAA,EAAcoC,MAAMP,MAAM,CAACd,GAAG,EAAEK;IAEnDgB,MAAM+C,IAAI,CAACM,KAAK,GAAG;QACjB,GAAGrD,MAAM+C,IAAI,CAACM,KAAK;QACnB,GAAGb,aAAa;IAClB;IAEAxC,MAAM+C,IAAI,CAACO,aAAa,GAAGtF,oCAAAA,MAAiBH,8BAAAA,EAAemC,MAAM+C,IAAI,CAACO,aAAa,EAAE/B;IACrFvB,MAAM+C,IAAI,CAACQ,SAAS,OAAGvF,gCAAAA,MAAiBH,8BAAAA,EAAemC,MAAM+C,IAAI,CAACQ,SAAS,EAAEtB;IAC7EjC,MAAMR,MAAM,CAACD,QAAQ,OAAGvB,gCAAAA,MAAiBH,8BAAAA,EAAemC,MAAMR,MAAM,CAACD,QAAQ,EAAEsC;IAC/E7B,MAAMP,MAAM,CAACF,QAAQ,OAAGvB,gCAAAA,MAAiBH,8BAAAA,EAAemC,MAAMP,MAAM,CAACF,QAAQ,EAAEsC;IAE/E7B,MAAMR,MAAM,CAACc,KAAK,GAAGJ;IACrBF,MAAMP,MAAM,CAACa,KAAK,GAAGA;IAErB,OAAON;AACT,EAAE;AAWK,8BAA8B,CAACtB,OAAuBC;IAC3D,MAAM8E,uBAAmBlF,gDAAAA,EAAoCY,CAAAA,MAAOA,IAAIuE,KAAK;IAE7E,MAAM,EAAEA,QAAQD,gBAAgB,EAAE,GAAG9D,MAAM,GAAGjB;IAE9C,MAAMsB,QAAwB;QAC5B,GAAGvB,0BAA0BkB,MAAMhB,IAAI;QACvC+E;IACF;IAEA,OAAO1D;AACT,EAAE"}
+{"version":3,"sources":["../src/components/ColorArea/useColorArea.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useId, slot, useMergedRefs, mergeCallbacks, getIntrinsicElementProps } from '@fluentui/react-utilities';\nimport type { ColorAreaBaseProps, ColorAreaBaseState, ColorAreaProps, ColorAreaState } from './ColorArea.types';\nimport type { HsvColor } from '../../types/color';\nimport { colorAreaCSSVars } from './ColorArea.constants';\nimport { useEventCallback, useControllableState } from '@fluentui/react-utilities';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { useFocusWithin } from '@fluentui/react-tabster';\nimport { INITIAL_COLOR_HSV } from '../../utils/constants';\nimport { getCoordinates } from '../../utils/getCoordinates';\nimport { useColorPickerContextValue_unstable } from '../../contexts/colorPicker';\nimport { createHslColorString } from '../../utils/createHslColor';\n\n/**\n * Create the state required to render unstyled ColorArea.\n *\n * The returned state can be modified with hooks before being passed to renderColorArea_unstable.\n *\n * @param props - props from this instance of ColorArea\n * @param ref - reference to root HTMLDivElement of ColorArea\n */\nexport const useColorAreaBase_unstable = (\n  props: ColorAreaBaseProps,\n  ref: React.Ref<HTMLDivElement>,\n): ColorAreaBaseState => {\n  const { targetDocument } = useFluent();\n  const rootRef = React.useRef<HTMLDivElement>(null);\n  const xRef = React.useRef<HTMLInputElement>(null);\n  const yRef = React.useRef<HTMLInputElement>(null);\n  const focusWithinRef = useFocusWithin();\n  const onChangeFromContext = useColorPickerContextValue_unstable(ctx => ctx.requestChange);\n  const colorFromContext = useColorPickerContextValue_unstable(ctx => ctx.color);\n\n  const {\n    onChange = onChangeFromContext as unknown as ColorAreaProps['onChange'],\n    // Slots\n    inputX,\n    inputY,\n    thumb,\n    color,\n    ...rest\n  } = props;\n\n  const [hsvColor, setColor] = useControllableState<HsvColor>({\n    defaultState: props.defaultColor,\n    state: color || colorFromContext,\n    initialState: INITIAL_COLOR_HSV,\n  });\n  const saturation = Math.round(hsvColor.s * 100);\n  const value = Math.round(hsvColor.v * 100);\n\n  const [activeAxis, setActiveAxis] = React.useState<'x' | 'y' | null>(null);\n\n  const requestColorChange = useEventCallback((event: PointerEvent) => {\n    if (!rootRef.current) {\n      return;\n    }\n\n    const coordinates = getCoordinates(rootRef.current, event);\n    const newColor: HsvColor = {\n      ...hsvColor,\n      s: coordinates.x,\n      v: coordinates.y,\n    };\n\n    setColor(newColor);\n    onChange?.(event, {\n      type: 'change',\n      event,\n      color: newColor,\n    });\n  });\n\n  const handleDocumentPointerMove = React.useCallback(\n    (event: PointerEvent) => {\n      requestColorChange(event);\n    },\n    [requestColorChange],\n  );\n\n  const handleDocumentPointerUp = useEventCallback(() => {\n    targetDocument?.removeEventListener('pointermove', handleDocumentPointerMove);\n  });\n\n  const handleRootOnPointerDown: React.PointerEventHandler<HTMLDivElement> = useEventCallback(event => {\n    event.stopPropagation();\n    event.preventDefault();\n\n    requestColorChange(event.nativeEvent);\n\n    targetDocument?.addEventListener('pointermove', handleDocumentPointerMove);\n    targetDocument?.addEventListener('pointerup', handleDocumentPointerUp, { once: true });\n  });\n\n  const handleInputOnChange: React.ChangeEventHandler<HTMLInputElement> = useEventCallback(event => {\n    const targetValue = Number(event.target.value) / 100;\n    const newColor: HsvColor = {\n      ...hsvColor,\n      ...(event.target === xRef.current && { s: targetValue }),\n      ...(event.target === yRef.current && { v: targetValue }),\n    };\n\n    setColor(newColor);\n    onChange?.(event, { type: 'change', event, color: newColor });\n  });\n\n  const handleRootOnKeyDown = useEventCallback((event: React.KeyboardEvent<HTMLDivElement>) => {\n    let deltaX = 0;\n    let deltaY = 0;\n    let axis: 'x' | 'y' = 'x';\n\n    switch (event.key) {\n      case 'ArrowUp':\n        event.preventDefault();\n\n        axis = 'y';\n        deltaY = 1;\n\n        break;\n      case 'ArrowDown':\n        event.preventDefault();\n\n        axis = 'y';\n        deltaY = -1;\n\n        break;\n      case 'ArrowLeft':\n        event.preventDefault();\n\n        axis = 'x';\n        deltaX = -1;\n\n        break;\n      case 'ArrowRight':\n        event.preventDefault();\n\n        axis = 'x';\n        deltaX = 1;\n\n        break;\n    }\n\n    if (deltaX === 0 && deltaY === 0) {\n      return;\n    }\n\n    const newColor: HsvColor = {\n      ...hsvColor,\n      s: Math.min(Math.max(hsvColor.s + deltaX / 100, 0), 1),\n      v: Math.min(Math.max(hsvColor.v + deltaY / 100, 0), 1),\n    };\n\n    setColor(newColor);\n    setActiveAxis(axis);\n\n    onChange?.(event, { type: 'change', event, color: newColor });\n  });\n\n  const rootVariables = {\n    [colorAreaCSSVars.areaXProgressVar]: `${saturation}%`,\n    [colorAreaCSSVars.areaYProgressVar]: `${value}%`,\n    [colorAreaCSSVars.thumbColorVar]: createHslColorString(hsvColor),\n    [colorAreaCSSVars.mainColorVar]: `hsl(${hsvColor.h}, 100%, 50%)`,\n  };\n  const state: ColorAreaBaseState = {\n    components: {\n      inputX: 'input',\n      inputY: 'input',\n      root: 'div',\n      thumb: 'div',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        ref,\n        ...rest,\n      }),\n      { elementType: 'div' },\n    ),\n    inputX: slot.always(inputX, {\n      defaultProps: {\n        id: useId('sliderX-'),\n        type: 'range',\n        ...(activeAxis && { tabIndex: activeAxis === 'x' ? 0 : -1 }),\n      },\n      elementType: 'input',\n    }),\n    inputY: slot.always(inputY, {\n      defaultProps: {\n        id: useId('sliderY-'),\n        type: 'range',\n        'aria-orientation': 'vertical',\n        tabIndex: activeAxis && activeAxis === 'y' ? 0 : -1,\n      },\n      elementType: 'input',\n    }),\n    thumb: slot.always(thumb, { elementType: 'div' }),\n  };\n\n  state.root.ref = useMergedRefs(state.root.ref, rootRef);\n  state.thumb.ref = useMergedRefs(state.thumb.ref, focusWithinRef);\n  state.inputX.ref = useMergedRefs(state.inputX.ref, xRef);\n  state.inputY.ref = useMergedRefs(state.inputY.ref, yRef);\n\n  state.root.style = {\n    ...state.root.style,\n    ...rootVariables,\n  };\n\n  state.root.onPointerDown = useEventCallback(mergeCallbacks(state.root.onPointerDown, handleRootOnPointerDown));\n  state.root.onKeyDown = useEventCallback(mergeCallbacks(state.root.onKeyDown, handleRootOnKeyDown));\n  state.inputX.onChange = useEventCallback(mergeCallbacks(state.inputX.onChange, handleInputOnChange));\n  state.inputY.onChange = useEventCallback(mergeCallbacks(state.inputY.onChange, handleInputOnChange));\n\n  state.inputX.value = saturation;\n  state.inputY.value = value;\n\n  return state;\n};\n\n/**\n * Create the state required to render ColorArea.\n *\n * The returned state can be modified with hooks such as useColorAreaStyles_unstable,\n * before being passed to renderColorArea_unstable.\n *\n * @param props - props from this instance of ColorArea\n * @param ref - reference to root HTMLDivElement of ColorArea\n */\nexport const useColorArea_unstable = (props: ColorAreaProps, ref: React.Ref<HTMLDivElement>): ColorAreaState => {\n  const shapeFromContext = useColorPickerContextValue_unstable(ctx => ctx.shape);\n\n  const { shape = shapeFromContext, ...rest } = props;\n\n  const state: ColorAreaState = {\n    ...useColorAreaBase_unstable(rest, ref),\n    shape,\n  };\n\n  return state;\n};\n"],"names":["React","useId","slot","useMergedRefs","mergeCallbacks","getIntrinsicElementProps","colorAreaCSSVars","useEventCallback","useControllableState","useFluent_unstable","useFluent","useFocusWithin","INITIAL_COLOR_HSV","getCoordinates","useColorPickerContextValue_unstable","createHslColorString","useColorAreaBase_unstable","props","ref","targetDocument","rootRef","useRef","xRef","yRef","focusWithinRef","onChangeFromContext","ctx","requestChange","colorFromContext","color","onChange","inputX","inputY","thumb","rest","hsvColor","setColor","defaultState","defaultColor","state","initialState","saturation","Math","round","s","value","v","activeAxis","setActiveAxis","useState","requestColorChange","event","current","coordinates","newColor","x","y","type","handleDocumentPointerMove","useCallback","handleDocumentPointerUp","removeEventListener","handleRootOnPointerDown","stopPropagation","preventDefault","nativeEvent","addEventListener","once","handleInputOnChange","targetValue","Number","target","handleRootOnKeyDown","deltaX","deltaY","axis","key","min","max","rootVariables","areaXProgressVar","areaYProgressVar","thumbColorVar","mainColorVar","h","components","root","always","elementType","defaultProps","id","tabIndex","style","onPointerDown","onKeyDown","useColorArea_unstable","shapeFromContext","shape"],"mappings":"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"}

package/lib-commonjs/components/ColorSlider/ColorSlider.constants.cjs

@@ -13,6 +13,7 @@ const colorSliderCSSVars = {
     sliderProgressVar: `--fui-Slider--progress`,
     thumbColorVar: `--fui-Slider__thumb--color`,
     railColorVar: `--fui-Slider__rail--color`,
+    railColorLowVar: `--fui-Slider__rail--color-low`,
     thumbSizeVar: `--fui-Slider__thumb--size`,
     railSizeVar: `--fui-Slider__rail--size`
 };

package/lib-commonjs/components/ColorSlider/ColorSlider.constants.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/ColorSlider/ColorSlider.constants.ts"],"sourcesContent":["export const colorSliderCSSVars = {\n  sliderDirectionVar: `--fui-Slider--direction`,\n  sliderProgressVar: `--fui-Slider--progress`,\n  thumbColorVar: `--fui-Slider__thumb--color`,\n  railColorVar: `--fui-Slider__rail--color`,\n  thumbSizeVar: `--fui-Slider__thumb--size`,\n  railSizeVar: `--fui-Slider__rail--size`,\n};\n"],"names":["colorSliderCSSVars","sliderDirectionVar","sliderProgressVar","thumbColorVar","railColorVar","thumbSizeVar","railSizeVar"],"mappings":";;;;+BAAaA;;;;;;AAAN,2BAA2B;IAChCC,oBAAoB,CAAC,uBAAuB,CAAC;IAC7CC,mBAAmB,CAAC,sBAAsB,CAAC;IAC3CC,eAAe,CAAC,0BAA0B,CAAC;IAC3CC,cAAc,CAAC,yBAAyB,CAAC;IACzCC,cAAc,CAAC,yBAAyB,CAAC;IACzCC,aAAa,CAAC,wBAAwB,CAAC;AACzC,EAAE"}
+{"version":3,"sources":["../src/components/ColorSlider/ColorSlider.constants.ts"],"sourcesContent":["export const colorSliderCSSVars = {\n  sliderDirectionVar: `--fui-Slider--direction`,\n  sliderProgressVar: `--fui-Slider--progress`,\n  thumbColorVar: `--fui-Slider__thumb--color`,\n  railColorVar: `--fui-Slider__rail--color`,\n  railColorLowVar: `--fui-Slider__rail--color-low`,\n  thumbSizeVar: `--fui-Slider__thumb--size`,\n  railSizeVar: `--fui-Slider__rail--size`,\n};\n"],"names":["colorSliderCSSVars","sliderDirectionVar","sliderProgressVar","thumbColorVar","railColorVar","railColorLowVar","thumbSizeVar","railSizeVar"],"mappings":";;;;+BAAaA;;;;;;AAAN,2BAA2B;IAChCC,oBAAoB,CAAC,uBAAuB,CAAC;IAC7CC,mBAAmB,CAAC,sBAAsB,CAAC;IAC3CC,eAAe,CAAC,0BAA0B,CAAC;IAC3CC,cAAc,CAAC,yBAAyB,CAAC;IACzCC,iBAAiB,CAAC,6BAA6B,CAAC;IAChDC,cAAc,CAAC,yBAAyB,CAAC;IACzCC,aAAa,CAAC,wBAAwB,CAAC;AACzC,EAAE"}

package/lib-commonjs/components/ColorSlider/useColorSlider.cjs

@@ -40,11 +40,10 @@ const useColorSliderBase_unstable = (props, ref)=>{
         ]
     });
     const { color, channel = 'hue', onChange = onChangeFromContext, vertical, root, input, rail, thumb } = props;
-    const hsvColor = color || colorFromContext;
-    const hslColor = (0, _createHslColor.createHslColor)(hsvColor);
+    const hslColor = (0, _createHslColor.createHslColor)(color || colorFromContext);
     const [currentColor, setCurrentColor] = (0, _reactutilities.useControllableState)({
         defaultState: props.defaultColor,
-        state: hsvColor,
+        state: color || colorFromContext,
         initialState: _constants.INITIAL_COLOR_HSV
     });
     const MAX = channel === 'hue' ? _constants.HUE_MAX : _constants.MAX;
@@ -60,15 +59,15 @@ const useColorSliderBase_unstable = (props, ref)=>{
         const newValue = Number(event.target.value);
         const colorActions = {
             hue: ()=>(0, _createHsvColor.createHsvColor)({
-                    ...hsvColor,
+                    ...currentColor,
                     h: newValue
                 }),
             saturation: ()=>(0, _createHsvColor.createHsvColor)({
-                    ...hsvColor,
+                    ...currentColor,
                     s: newValue / 100
                 }),
             value: ()=>(0, _createHsvColor.createHsvColor)({
-                    ...hsvColor,
+                    ...currentColor,
                     v: newValue / 100
                 })
         };
@@ -84,8 +83,27 @@ const useColorSliderBase_unstable = (props, ref)=>{
     const rootVariables = {
         [_ColorSliderconstants.colorSliderCSSVars.sliderDirectionVar]: vertical ? '180deg' : dir === 'ltr' ? '-90deg' : '90deg',
         [_ColorSliderconstants.colorSliderCSSVars.sliderProgressVar]: `${valuePercent}%`,
-        [_ColorSliderconstants.colorSliderCSSVars.thumbColorVar]: channel === 'hue' ? `hsl(${clampedValue}, 100%, 50%)` : (0, _createHslColor.createHslColorString)(hsvColor),
-        [_ColorSliderconstants.colorSliderCSSVars.railColorVar]: channel === 'hue' ? `hsl(${hslColor.h}, ${hslColor.s * 100}%, ${hslColor.l * 100}%)` : `hsl(${hslColor.h}, 100%, 50%)`
+        [_ColorSliderconstants.colorSliderCSSVars.thumbColorVar]: channel === 'hue' ? `hsl(${clampedValue}, 100%, 50%)` : (0, _createHslColor.createHslColorString)(currentColor),
+        [_ColorSliderconstants.colorSliderCSSVars.railColorVar]: channel === 'hue' ? `hsl(${hslColor.h}, ${hslColor.s * 100}%, ${hslColor.l * 100}%)` : (0, _createHslColor.createHslColorString)({
+            ...currentColor,
+            ...channel === 'saturation' ? {
+                s: 1
+            } : {
+                v: 1
+            },
+            a: 1
+        }),
+        ...channel !== 'hue' && {
+            [_ColorSliderconstants.colorSliderCSSVars.railColorLowVar]: (0, _createHslColor.createHslColorString)({
+                ...currentColor,
+                ...channel === 'saturation' ? {
+                    s: 0
+                } : {
+                    v: 0
+                },
+                a: 1
+            })
+        }
     };
     const state = {
         vertical,

package/lib-commonjs/components/ColorSlider/useColorSlider.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/ColorSlider/useColorSlider.ts"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport {\n  getPartitionedNativeProps,\n  useId,\n  slot,\n  useControllableState,\n  useEventCallback,\n} from '@fluentui/react-utilities';\nimport { colorSliderCSSVars } from './ColorSlider.constants';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport type {\n  ColorSliderBaseProps,\n  ColorSliderBaseState,\n  ColorSliderProps,\n  ColorSliderState,\n} from './ColorSlider.types';\nimport { useColorPickerContextValue_unstable } from '../../contexts/colorPicker';\nimport { MIN, HUE_MAX, MAX as COLOR_MAX } from '../../utils/constants';\nimport { getPercent } from '../../utils/getPercent';\nimport { createHsvColor } from '../../utils/createHsvColor';\nimport { clampValue, type ChannelActions, adjustChannel } from '../../utils/adjustChannel';\nimport type { HsvColor } from '../../types/color';\nimport { INITIAL_COLOR_HSV } from '../../utils/constants';\nimport { createHslColor, createHslColorString } from '../../utils/createHslColor';\n\n/**\n * Create the base state required to render unstyled ColorSlider.\n *\n * The returned state can be modified with hooks before being passed to renderColorSlider_unstable.\n *\n * @param props - props from this instance of ColorSlider\n * @param ref - reference to root HTMLInputElement of ColorSlider\n */\nexport const useColorSliderBase_unstable = (\n  props: ColorSliderBaseProps,\n  ref: React.Ref<HTMLInputElement>,\n): ColorSliderBaseState => {\n  'use no memo'; // justified: compiler would optimize useColorSlider_unstable — manual opt-out to preserve runtime behavior\n\n  const { dir } = useFluent();\n  const onChangeFromContext = useColorPickerContextValue_unstable(ctx => ctx.requestChange);\n  const colorFromContext = useColorPickerContextValue_unstable(ctx => ctx.color);\n  const nativeProps = getPartitionedNativeProps({\n    props,\n    primarySlotTagName: 'input',\n    excludedPropNames: ['onChange', 'color'],\n  });\n\n  const {\n    color,\n    channel = 'hue',\n    onChange = onChangeFromContext,\n    vertical,\n    // Slots\n    root,\n    input,\n    rail,\n    thumb,\n  } = props;\n\n  const hsvColor = color || colorFromContext;\n  const hslColor = createHslColor(hsvColor);\n\n  const [currentColor, setCurrentColor] = useControllableState<HsvColor>({\n    defaultState: props.defaultColor,\n    state: hsvColor,\n    initialState: INITIAL_COLOR_HSV,\n  });\n\n  const MAX = channel === 'hue' ? HUE_MAX : COLOR_MAX;\n\n  const valueChannelActions: ChannelActions<number> = {\n    hue: clampValue(currentColor.h),\n    saturation: clampValue(currentColor.s * 100),\n    value: clampValue(currentColor.v * 100),\n  };\n\n  const clampedValue = adjustChannel(channel, valueChannelActions);\n  const valuePercent = getPercent(clampedValue, MIN, MAX);\n\n  const inputOnChange = input?.onChange;\n\n  const _onChange: React.ChangeEventHandler<HTMLInputElement> = useEventCallback(event => {\n    const newValue = Number(event.target.value);\n    const colorActions: ChannelActions<() => HsvColor> = {\n      hue: () => createHsvColor({ ...hsvColor, h: newValue }),\n      saturation: () => createHsvColor({ ...hsvColor, s: newValue / 100 }),\n      value: () => createHsvColor({ ...hsvColor, v: newValue / 100 }),\n    };\n    const newColor = adjustChannel(channel, colorActions)();\n\n    setCurrentColor(newColor);\n\n    inputOnChange?.(event);\n    onChange?.(event, {\n      type: 'change',\n      event,\n      color: newColor,\n    });\n  });\n\n  const rootVariables = {\n    [colorSliderCSSVars.sliderDirectionVar]: vertical ? '180deg' : dir === 'ltr' ? '-90deg' : '90deg',\n    [colorSliderCSSVars.sliderProgressVar]: `${valuePercent}%`,\n    [colorSliderCSSVars.thumbColorVar]:\n      channel === 'hue' ? `hsl(${clampedValue}, 100%, 50%)` : createHslColorString(hsvColor),\n    [colorSliderCSSVars.railColorVar]:\n      channel === 'hue'\n        ? `hsl(${hslColor.h}, ${hslColor.s * 100}%, ${hslColor.l * 100}%)`\n        : `hsl(${hslColor.h}, 100%, 50%)`,\n  };\n\n  const state: ColorSliderBaseState = {\n    vertical,\n    channel,\n    components: {\n      input: 'input',\n      rail: 'div',\n      root: 'div',\n      thumb: 'div',\n    },\n    root: slot.always(root, {\n      defaultProps: {\n        role: 'group',\n        ...nativeProps.root,\n      },\n      elementType: 'div',\n    }),\n    input: slot.always(input, {\n      defaultProps: {\n        id: useId('slider-', props.id),\n        ref,\n        min: MIN,\n        max: MAX,\n        tabIndex: 0,\n        ['aria-orientation']: vertical ? 'vertical' : 'horizontal',\n        ...nativeProps.primary,\n        type: 'range',\n      },\n      elementType: 'input',\n    }),\n    rail: slot.always(rail, { elementType: 'div' }),\n    thumb: slot.always(thumb, { elementType: 'div' }),\n  };\n\n  // Root props\n  state.root.style = {\n    ...rootVariables,\n    ...state.root.style,\n  };\n\n  // Input Props\n  state.input.value = clampedValue;\n  state.input.onChange = _onChange;\n  return state;\n};\n\n/**\n * Create the state required to render ColorSlider.\n *\n * The returned state can be modified with hooks such as useColorSliderStyles_unstable,\n * before being passed to renderColorSlider_unstable.\n *\n * @param props - props from this instance of ColorSlider\n * @param ref - reference to root HTMLInputElement of ColorSlider\n */\nexport const useColorSlider_unstable = (\n  props: ColorSliderProps,\n  ref: React.Ref<HTMLInputElement>,\n): ColorSliderState => {\n  const shapeFromContext = useColorPickerContextValue_unstable(ctx => ctx.shape);\n\n  const { shape = shapeFromContext, ...baseProps } = props;\n\n  const state: ColorSliderState = {\n    ...useColorSliderBase_unstable(baseProps, ref),\n    shape,\n  };\n\n  return state;\n};\n"],"names":["getPartitionedNativeProps","useId","slot","useControllableState","useEventCallback","colorSliderCSSVars","useFluent_unstable","useFluent","useColorPickerContextValue_unstable","MIN","HUE_MAX","MAX","COLOR_MAX","getPercent","createHsvColor","clampValue","adjustChannel","INITIAL_COLOR_HSV","createHslColor","createHslColorString","useColorSliderBase_unstable","props","ref","dir","onChangeFromContext","ctx","requestChange","colorFromContext","color","nativeProps","primarySlotTagName","excludedPropNames","channel","onChange","vertical","root","input","rail","thumb","hsvColor","hslColor","currentColor","setCurrentColor","defaultState","defaultColor","state","initialState","valueChannelActions","hue","h","saturation","s","value","v","clampedValue","valuePercent","inputOnChange","_onChange","event","newValue","Number","target","colorActions","newColor","type","rootVariables","sliderDirectionVar","sliderProgressVar","thumbColorVar","railColorVar","l","components","always","defaultProps","role","elementType","id","min","max","tabIndex","primary","style","useColorSlider_unstable","shapeFromContext","shape","baseProps"],"mappings":"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"}
+{"version":3,"sources":["../src/components/ColorSlider/useColorSlider.ts"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport {\n  getPartitionedNativeProps,\n  useId,\n  slot,\n  useControllableState,\n  useEventCallback,\n} from '@fluentui/react-utilities';\nimport { colorSliderCSSVars } from './ColorSlider.constants';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport type {\n  ColorSliderBaseProps,\n  ColorSliderBaseState,\n  ColorSliderProps,\n  ColorSliderState,\n} from './ColorSlider.types';\nimport { useColorPickerContextValue_unstable } from '../../contexts/colorPicker';\nimport { MIN, HUE_MAX, MAX as COLOR_MAX } from '../../utils/constants';\nimport { getPercent } from '../../utils/getPercent';\nimport { createHsvColor } from '../../utils/createHsvColor';\nimport { clampValue, type ChannelActions, adjustChannel } from '../../utils/adjustChannel';\nimport type { HsvColor } from '../../types/color';\nimport { INITIAL_COLOR_HSV } from '../../utils/constants';\nimport { createHslColor, createHslColorString } from '../../utils/createHslColor';\n\n/**\n * Create the base state required to render unstyled ColorSlider.\n *\n * The returned state can be modified with hooks before being passed to renderColorSlider_unstable.\n *\n * @param props - props from this instance of ColorSlider\n * @param ref - reference to root HTMLInputElement of ColorSlider\n */\nexport const useColorSliderBase_unstable = (\n  props: ColorSliderBaseProps,\n  ref: React.Ref<HTMLInputElement>,\n): ColorSliderBaseState => {\n  'use no memo'; // justified: compiler would optimize useColorSlider_unstable — manual opt-out to preserve runtime behavior\n\n  const { dir } = useFluent();\n  const onChangeFromContext = useColorPickerContextValue_unstable(ctx => ctx.requestChange);\n  const colorFromContext = useColorPickerContextValue_unstable(ctx => ctx.color);\n  const nativeProps = getPartitionedNativeProps({\n    props,\n    primarySlotTagName: 'input',\n    excludedPropNames: ['onChange', 'color'],\n  });\n\n  const {\n    color,\n    channel = 'hue',\n    onChange = onChangeFromContext,\n    vertical,\n    // Slots\n    root,\n    input,\n    rail,\n    thumb,\n  } = props;\n\n  const hslColor = createHslColor(color || colorFromContext);\n  const [currentColor, setCurrentColor] = useControllableState<HsvColor>({\n    defaultState: props.defaultColor,\n    state: color || colorFromContext,\n    initialState: INITIAL_COLOR_HSV,\n  });\n\n  const MAX = channel === 'hue' ? HUE_MAX : COLOR_MAX;\n\n  const valueChannelActions: ChannelActions<number> = {\n    hue: clampValue(currentColor.h),\n    saturation: clampValue(currentColor.s * 100),\n    value: clampValue(currentColor.v * 100),\n  };\n\n  const clampedValue = adjustChannel(channel, valueChannelActions);\n  const valuePercent = getPercent(clampedValue, MIN, MAX);\n\n  const inputOnChange = input?.onChange;\n\n  const _onChange: React.ChangeEventHandler<HTMLInputElement> = useEventCallback(event => {\n    const newValue = Number(event.target.value);\n    const colorActions: ChannelActions<() => HsvColor> = {\n      hue: () => createHsvColor({ ...currentColor, h: newValue }),\n      saturation: () => createHsvColor({ ...currentColor, s: newValue / 100 }),\n      value: () => createHsvColor({ ...currentColor, v: newValue / 100 }),\n    };\n    const newColor = adjustChannel(channel, colorActions)();\n\n    setCurrentColor(newColor);\n\n    inputOnChange?.(event);\n    onChange?.(event, {\n      type: 'change',\n      event,\n      color: newColor,\n    });\n  });\n\n  const rootVariables = {\n    [colorSliderCSSVars.sliderDirectionVar]: vertical ? '180deg' : dir === 'ltr' ? '-90deg' : '90deg',\n    [colorSliderCSSVars.sliderProgressVar]: `${valuePercent}%`,\n    [colorSliderCSSVars.thumbColorVar]:\n      channel === 'hue' ? `hsl(${clampedValue}, 100%, 50%)` : createHslColorString(currentColor),\n    [colorSliderCSSVars.railColorVar]:\n      channel === 'hue'\n        ? `hsl(${hslColor.h}, ${hslColor.s * 100}%, ${hslColor.l * 100}%)`\n        : createHslColorString({\n            ...currentColor,\n            ...(channel === 'saturation' ? { s: 1 } : { v: 1 }),\n            a: 1,\n          }),\n    ...(channel !== 'hue' && {\n      [colorSliderCSSVars.railColorLowVar]: createHslColorString({\n        ...currentColor,\n        ...(channel === 'saturation' ? { s: 0 } : { v: 0 }),\n        a: 1,\n      }),\n    }),\n  };\n\n  const state: ColorSliderBaseState = {\n    vertical,\n    channel,\n    components: {\n      input: 'input',\n      rail: 'div',\n      root: 'div',\n      thumb: 'div',\n    },\n    root: slot.always(root, {\n      defaultProps: {\n        role: 'group',\n        ...nativeProps.root,\n      },\n      elementType: 'div',\n    }),\n    input: slot.always(input, {\n      defaultProps: {\n        id: useId('slider-', props.id),\n        ref,\n        min: MIN,\n        max: MAX,\n        tabIndex: 0,\n        ['aria-orientation']: vertical ? 'vertical' : 'horizontal',\n        ...nativeProps.primary,\n        type: 'range',\n      },\n      elementType: 'input',\n    }),\n    rail: slot.always(rail, { elementType: 'div' }),\n    thumb: slot.always(thumb, { elementType: 'div' }),\n  };\n\n  // Root props\n  state.root.style = {\n    ...rootVariables,\n    ...state.root.style,\n  };\n\n  // Input Props\n  state.input.value = clampedValue;\n  state.input.onChange = _onChange;\n  return state;\n};\n\n/**\n * Create the state required to render ColorSlider.\n *\n * The returned state can be modified with hooks such as useColorSliderStyles_unstable,\n * before being passed to renderColorSlider_unstable.\n *\n * @param props - props from this instance of ColorSlider\n * @param ref - reference to root HTMLInputElement of ColorSlider\n */\nexport const useColorSlider_unstable = (\n  props: ColorSliderProps,\n  ref: React.Ref<HTMLInputElement>,\n): ColorSliderState => {\n  const shapeFromContext = useColorPickerContextValue_unstable(ctx => ctx.shape);\n\n  const { shape = shapeFromContext, ...baseProps } = props;\n\n  const state: ColorSliderState = {\n    ...useColorSliderBase_unstable(baseProps, ref),\n    shape,\n  };\n\n  return state;\n};\n"],"names":["getPartitionedNativeProps","useId","slot","useControllableState","useEventCallback","colorSliderCSSVars","useFluent_unstable","useFluent","useColorPickerContextValue_unstable","MIN","HUE_MAX","MAX","COLOR_MAX","getPercent","createHsvColor","clampValue","adjustChannel","INITIAL_COLOR_HSV","createHslColor","createHslColorString","useColorSliderBase_unstable","props","ref","dir","onChangeFromContext","ctx","requestChange","colorFromContext","color","nativeProps","primarySlotTagName","excludedPropNames","channel","onChange","vertical","root","input","rail","thumb","hslColor","currentColor","setCurrentColor","defaultState","defaultColor","state","initialState","valueChannelActions","hue","h","saturation","s","value","v","clampedValue","valuePercent","inputOnChange","_onChange","event","newValue","Number","target","colorActions","newColor","type","rootVariables","sliderDirectionVar","sliderProgressVar","thumbColorVar","railColorVar","l","a","railColorLowVar","components","always","defaultProps","role","elementType","id","min","max","tabIndex","primary","style","useColorSlider_unstable","shapeFromContext","shape","baseProps"],"mappings":"AAAA;;;;;;;;;;;;IAmCaoB,2BAAAA;;;2BA8IA+D;;;;gCAxKN,4BAA4B;sCACA,6BAA0B;qCACb,kCAAkC;6BAO9B,gCAA6B;2BAClC,2BAAwB;4BAC5C,4BAAyB;gCACrB,gCAA6B;+BACG,+BAA4B;gCAGtC,gCAA6B;AAU3E,oCAAoC,CACzC9D,OACAC;IAEA,eAAe,2GAA2G;IAE1H,MAAM,EAAEC,GAAG,EAAE,OAAGhB,uCAAAA;IAChB,MAAMiB,0BAAsBhB,gDAAAA,EAAoCiB,CAAAA,MAAOA,IAAIC,aAAa;IACxF,MAAMC,uBAAmBnB,gDAAAA,EAAoCiB,CAAAA,MAAOA,IAAIG,KAAK;IAC7E,MAAMC,kBAAc7B,yCAAAA,EAA0B;QAC5CqB;QACAS,oBAAoB;QACpBC,mBAAmB;YAAC;YAAY;SAAQ;IAC1C;IAEA,MAAM,EACJH,KAAK,EACLI,UAAU,KAAK,EACfC,WAAWT,mBAAmB,EAC9BU,QAAQ,EAERC,AADA,IACI,EACJC,EAFQ,GAEH,EACLC,IAAI,EACJC,KAAK,EACN,GAAGjB;IAEJ,MAAMkB,eAAWrB,8BAAAA,EAAeU,SAASD;IACzC,MAAM,CAACa,cAAcC,gBAAgB,GAAGtC,wCAAAA,EAA+B;QACrEuC,cAAcrB,MAAMsB,YAAY;QAChCC,OAAOhB,SAASD;QAChBkB,cAAc5B,4BAAAA;IAChB;IAEA,MAAMN,MAAMqB,YAAY,QAAQtB,kBAAAA,GAAUE,cAAAA;IAE1C,MAAMkC,sBAA8C;QAClDC,SAAKhC,yBAAAA,EAAWyB,aAAaQ,CAAC;QAC9BC,gBAAYlC,yBAAAA,EAAWyB,aAAaU,CAAC,GAAG;QACxCC,OAAOpC,6BAAAA,EAAWyB,aAAaY,CAAC,GAAG;IACrC;IAEA,MAAMC,mBAAerC,4BAAAA,EAAcgB,SAASc;IAC5C,MAAMQ,mBAAezC,sBAAAA,EAAWwC,cAAc5C,cAAAA,EAAKE;IAEnD,MAAM4C,gBAAgBnB,UAAAA,QAAAA,UAAAA,KAAAA,IAAAA,KAAAA,IAAAA,MAAOH,QAAQ;IAErC,MAAMuB,gBAAwDpD,gCAAAA,EAAiBqD,CAAAA;QAC7E,MAAMC,WAAWC,OAAOF,MAAMG,MAAM,CAACT,KAAK;QAC1C,MAAMU,eAA+C;YACnDd,KAAK,IAAMjC,kCAAAA,EAAe;oBAAE,GAAG0B,YAAY;oBAAEQ,GAAGU;gBAAS;YACzDT,YAAY,QAAMnC,8BAAAA,EAAe;oBAAE,GAAG0B,YAAY;oBAAEU,GAAGQ,WAAW;gBAAI;YACtEP,OAAO,QAAMrC,8BAAAA,EAAe;oBAAE,GAAG0B,YAAY;oBAAEY,GAAGM,WAAW;gBAAI;QACnE;QACA,MAAMI,eAAW9C,4BAAAA,EAAcgB,SAAS6B;QAExCpB,gBAAgBqB;QAEhBP,kBAAAA,QAAAA,kBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,cAAgBE;QAChBxB,aAAAA,QAAAA,aAAAA,KAAAA,IAAAA,KAAAA,IAAAA,SAAWwB,OAAO;YAChBM,MAAM;YACNN;YACA7B,OAAOkC;QACT;IACF;IAEA,MAAME,gBAAgB;QACpB,CAAC3D,wCAAAA,CAAmB4D,kBAAkB,CAAC,EAAE/B,WAAW,WAAWX,QAAQ,QAAQ,WAAW;QAC1F,CAAClB,wCAAAA,CAAmB6D,iBAAiB,CAAC,EAAE,GAAGZ,aAAa,CAAC,CAAC;QAC1D,CAACjD,wCAAAA,CAAmB8D,aAAa,CAAC,EAChCnC,YAAY,QAAQ,CAAC,IAAI,EAAEqB,aAAa,YAAY,CAAC,OAAGlC,oCAAAA,EAAqBqB;QAC/E,CAACnC,wCAAAA,CAAmB+D,YAAY,CAAC,EAC/BpC,YAAY,QACR,CAAC,IAAI,EAAEO,SAASS,CAAC,CAAC,EAAE,EAAET,SAASW,CAAC,GAAG,IAAI,GAAG,EAAEX,SAAS8B,CAAC,GAAG,IAAI,EAAE,CAAC,OAChElD,oCAAAA,EAAqB;YACnB,GAAGqB,YAAY;YACf,GAAIR,YAAY,eAAe;gBAAEkB,GAAG;YAAE,IAAI;gBAAEE,GAAG;YAAE,CAAC;YAClDkB,GAAG;QACL;QACN,GAAItC,YAAY,SAAS;YACvB,CAAC3B,wCAAAA,CAAmBkE,eAAe,CAAC,MAAEpD,oCAAAA,EAAqB;gBACzD,GAAGqB,YAAY;gBACf,GAAIR,YAAY,eAAe;oBAAEkB,GAAG;gBAAE,IAAI;oBAAEE,GAAG;gBAAE,CAAC;gBAClDkB,GAAG;YACL;QACF,CAAC;IACH;IAEA,MAAM1B,QAA8B;QAClCV;QACAF;QACAwC,YAAY;YACVpC,OAAO;YACPC,MAAM;YACNF,MAAM;YACNG,OAAO;QACT;QACAH,MAAMjC,oBAAAA,CAAKuE,MAAM,CAACtC,MAAM;YACtBuC,cAAc;gBACZC,MAAM;gBACN,GAAG9C,YAAYM,IAAI;YACrB;YACAyC,aAAa;QACf;QACAxC,OAAOlC,oBAAAA,CAAKuE,MAAM,CAACrC,OAAO;YACxBsC,cAAc;gBACZG,QAAI5E,qBAAAA,EAAM,WAAWoB,MAAMwD,EAAE;gBAC7BvD;gBACAwD,KAAKrE,cAAAA;gBACLsE,KAAKpE;gBACLqE,UAAU;gBACV,CAAC,mBAAmB,EAAE9C,WAAW,aAAa;gBAC9C,GAAGL,YAAYoD,OAAO;gBACtBlB,MAAM;YACR;YACAa,aAAa;QACf;QACAvC,MAAMnC,oBAAAA,CAAKuE,MAAM,CAACpC,MAAM;YAAEuC,aAAa;QAAM;QAC7CtC,OAAOpC,oBAAAA,CAAKuE,MAAM,CAACnC,OAAO;YAAEsC,aAAa;QAAM;IACjD;IAEA,aAAa;IACbhC,MAAMT,IAAI,CAAC+C,KAAK,GAAG;QACjB,GAAGlB,aAAa;QAChB,GAAGpB,MAAMT,IAAI,CAAC+C,KAAK;IACrB;IAEA,cAAc;IACdtC,MAAMR,KAAK,CAACe,KAAK,GAAGE;IACpBT,MAAMR,KAAK,CAACH,QAAQ,GAAGuB;IACvB,OAAOZ;AACT,EAAE;AAWK,MAAMuC,0BAA0B,CACrC9D,OACAC;IAEA,MAAM8D,uBAAmB5E,gDAAAA,EAAoCiB,CAAAA,MAAOA,IAAI4D,KAAK;IAE7E,MAAM,EAAEA,QAAQD,gBAAgB,EAAE,GAAGE,WAAW,GAAGjE;IAEnD,MAAMuB,QAA0B;QAC9B,GAAGxB,4BAA4BkE,WAAWhE,IAAI;QAC9C+D;IACF;IAEA,OAAOzC;AACT,EAAE"}

package/lib-commonjs/components/ColorSlider/useColorSliderStyles.styles.cjs

@@ -35,6 +35,7 @@ const hueBackground = `linear-gradient(${[
     'yellow',
     'red'
 ].join(',')})`;
+const channelBackground = `linear-gradient(var(${_ColorSliderconstants.colorSliderCSSVars.sliderDirectionVar}), var(${_ColorSliderconstants.colorSliderCSSVars.railColorVar}), var(${_ColorSliderconstants.colorSliderCSSVars.railColorLowVar}))`;
 /**
  * Styles for the root slot
  */ const useRootStyles = /*#__PURE__*/ (0, _react.__resetStyles)("r1j9hj9j", null, [
@@ -66,24 +67,15 @@ const useChannelStyles = /*#__PURE__*/ (0, _react.__styles)({
         Bcmaq0h: "f1curpo1"
     },
     saturation: {
-        Bcmaq0h: [
-            "fdhcg5e",
-            "f1onqon0"
-        ]
+        Bcmaq0h: "f1vl4pgh"
     },
     value: {
-        Bcmaq0h: [
-            "f1r1ueul",
-            "fbtriqu"
-        ]
+        Bcmaq0h: "f1vl4pgh"
     }
 }, {
     d: [
         ".f1curpo1{background-image:linear-gradient(var(--fui-Slider--direction),red,fuchsia,blue,aqua,lime,yellow,red);}",
-        ".fdhcg5e{background-image:linear-gradient(to right, #808080, var(--fui-Slider__rail--color));}",
-        ".f1onqon0{background-image:linear-gradient(to left, #808080, var(--fui-Slider__rail--color));}",
-        ".f1r1ueul{background-image:linear-gradient(to right, #000, var(--fui-Slider__rail--color));}",
-        ".fbtriqu{background-image:linear-gradient(to left, #000, var(--fui-Slider__rail--color));}"
+        ".f1vl4pgh{background-image:linear-gradient(var(--fui-Slider--direction), var(--fui-Slider__rail--color), var(--fui-Slider__rail--color-low));}"
     ]
 });
 /**

package/lib-commonjs/components/ColorSlider/useColorSliderStyles.styles.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["useColorSliderStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, makeResetStyles, mergeClasses } from \"@griffel/react\";\nimport { tokens } from \"@fluentui/react-theme\";\nimport { colorSliderCSSVars } from \"./ColorSlider.constants.js\";\nexport const colorSliderClassNames = {\n    root: 'fui-ColorSlider',\n    rail: 'fui-ColorSlider__rail',\n    thumb: 'fui-ColorSlider__thumb',\n    input: 'fui-ColorSlider__input'\n};\nconst hueBackground = `linear-gradient(${[\n    `var(${colorSliderCSSVars.sliderDirectionVar})`,\n    'red',\n    'fuchsia',\n    'blue',\n    'aqua',\n    'lime',\n    'yellow',\n    'red'\n].join(',')})`;\n/**\n * Styles for the root slot\n */ const useRootStyles = makeResetStyles({\n    position: 'relative',\n    display: 'inline-grid',\n    touchAction: 'none',\n    alignItems: 'center',\n    justifyItems: 'center',\n    [colorSliderCSSVars.thumbSizeVar]: '20px',\n    [colorSliderCSSVars.railSizeVar]: '20px',\n    minHeight: '32px'\n});\nconst useStyles = makeStyles({\n    horizontal: {\n        minWidth: '200px',\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(${colorSliderCSSVars.thumbSizeVar}) 1fr`,\n        gridTemplateColumns: `1fr 100% 1fr`\n    },\n    vertical: {\n        minHeight: '280px',\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 100% 1fr`,\n        gridTemplateColumns: `1fr var(${colorSliderCSSVars.thumbSizeVar}) 1fr`\n    }\n});\nconst useChannelStyles = makeStyles({\n    hue: {\n        backgroundImage: hueBackground\n    },\n    saturation: {\n        backgroundImage: `linear-gradient(to right, #808080, var(${colorSliderCSSVars.railColorVar}))`\n    },\n    value: {\n        backgroundImage: `linear-gradient(to right, #000, var(${colorSliderCSSVars.railColorVar}))`\n    }\n});\n/**\n * Styles for the rail slot\n */ const useRailStyles = makeStyles({\n    rail: {\n        pointerEvents: 'none',\n        gridRowStart: '2',\n        gridRowEnd: '2',\n        gridColumnStart: '2',\n        gridColumnEnd: '2',\n        position: 'relative',\n        forcedColorAdjust: 'none',\n        outlineWidth: '1px',\n        outlineStyle: 'solid',\n        outlineColor: tokens.colorTransparentStroke,\n        '::before': {\n            content: \"''\",\n            position: 'absolute'\n        }\n    },\n    horizontal: {\n        width: '100%',\n        height: `var(${colorSliderCSSVars.railSizeVar})`,\n        '::before': {\n            left: '-1px',\n            right: '-1px',\n            height: `var(${colorSliderCSSVars.railSizeVar})`\n        }\n    },\n    vertical: {\n        width: `var(${colorSliderCSSVars.railSizeVar})`,\n        height: '100%',\n        '::before': {\n            width: `var(${colorSliderCSSVars.railSizeVar})`,\n            top: '-1px',\n            bottom: '1px'\n        }\n    }\n});\n/**\n * Styles for the thumb slot\n */ const useThumbStyles = makeStyles({\n    thumb: {\n        gridRowStart: '2',\n        gridRowEnd: '2',\n        gridColumnStart: '2',\n        gridColumnEnd: '2',\n        position: 'absolute',\n        width: `var(${colorSliderCSSVars.thumbSizeVar})`,\n        height: `var(${colorSliderCSSVars.thumbSizeVar})`,\n        pointerEvents: 'none',\n        outlineStyle: 'none',\n        forcedColorAdjust: 'none',\n        borderRadius: tokens.borderRadiusCircular,\n        border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralForeground4}`,\n        boxShadow: tokens.shadow4,\n        backgroundColor: `var(${colorSliderCSSVars.thumbColorVar})`,\n        '::before': {\n            position: 'absolute',\n            inset: '0px',\n            borderRadius: tokens.borderRadiusCircular,\n            boxSizing: 'border-box',\n            content: \"''\",\n            border: `${tokens.strokeWidthThick} solid ${tokens.colorNeutralBackground1}`\n        }\n    },\n    horizontal: {\n        transform: 'translateX(-50%)',\n        left: `var(${colorSliderCSSVars.sliderProgressVar})`\n    },\n    vertical: {\n        transform: 'translateY(50%)',\n        bottom: `var(${colorSliderCSSVars.sliderProgressVar})`\n    }\n});\nconst useShapeStyles = makeStyles({\n    rounded: {\n        borderRadius: tokens.borderRadiusMedium\n    },\n    square: {\n        borderRadius: tokens.borderRadiusNone\n    }\n});\n/**\n * Styles for the Input slot\n */ const 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        [`:focus-visible ~ .${colorSliderClassNames.thumb}`]: {\n            border: `2px solid ${tokens.colorStrokeFocus2}`,\n            outline: `${tokens.strokeWidthThick} solid ${tokens.colorTransparentStroke}`,\n            borderRadius: tokens.borderRadiusCircular\n        }\n    },\n    horizontal: {\n        height: `var(${colorSliderCSSVars.thumbSizeVar})`,\n        width: '100%'\n    },\n    vertical: {\n        height: '100%',\n        width: `var(${colorSliderCSSVars.thumbSizeVar})`,\n        'writing-mode': 'vertical-lr',\n        direction: 'rtl'\n    }\n});\n/**\n * Apply styling to the ColorSlider slots based on the state\n */ export const useColorSliderStyles_unstable = (state)=>{\n    const rootStyles = useRootStyles();\n    const styles = useStyles();\n    const railStyles = useRailStyles();\n    const thumbStyles = useThumbStyles();\n    const inputStyles = useInputStyles();\n    const shapeStyles = useShapeStyles();\n    const channelStyles = useChannelStyles();\n    const isVertical = state.vertical;\n    // eslint-disable-next-line react-hooks/immutability\n    state.root.className = mergeClasses(colorSliderClassNames.root, rootStyles, isVertical ? styles.vertical : styles.horizontal, state.root.className);\n    // eslint-disable-next-line react-hooks/immutability\n    state.rail.className = mergeClasses(colorSliderClassNames.rail, railStyles.rail, channelStyles[state.channel || 'hue'], shapeStyles[state.shape || 'rounded'], isVertical ? railStyles.vertical : railStyles.horizontal, state.rail.className);\n    // eslint-disable-next-line react-hooks/immutability\n    state.thumb.className = mergeClasses(colorSliderClassNames.thumb, thumbStyles.thumb, isVertical ? thumbStyles.vertical : thumbStyles.horizontal, state.thumb.className);\n    // eslint-disable-next-line react-hooks/immutability\n    state.input.className = mergeClasses(colorSliderClassNames.input, inputStyles.input, isVertical ? inputStyles.vertical : inputStyles.horizontal, state.input.className);\n    return state;\n};\n"],"names":["__styles","__resetStyles","mergeClasses","tokens","colorSliderCSSVars","colorSliderClassNames","root","rail","thumb","input","hueBackground","sliderDirectionVar","join","useRootStyles","useStyles","horizontal","Bf4jedk","wkccdc","Budl1dq","vertical","sshi5w","d","useChannelStyles","hue","Bcmaq0h","saturation","value","useRailStyles","Bkecrkj","Ijaq50","nk6f5a","Br312pm","Bw0ie65","qhf8xq","Bvjb7m6","Bpd4iqm","oeaueh","Bw0xxkn","Ftih45","Brfgrao","a9b677","Bqenvij","Fbdkly","mdwyqc","Baz25je","Ccq8qp","Bciustq","lawp4y","useThumbStyles","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","Bgfg5da","B9xav0g","oivjwe","Bn0qgzm","B4g9neb","zhjwy3","wvpqe5","ibv6hh","u1mtju","h3c5rm","vrafjx","Bekrc4i","i8vvqc","g2u3we","icvyot","B4j52fo","irswps","E5pizo","De3pzq","gc50h5","r59vdv","Budzafs","ck0cow","n07z76","Gng75u","Bcvre1j","Bcgcnre","Bqjgrrk","qa3bma","y0oebl","Biqmznv","Bm6vgfq","Bbv0w2i","uvfttm","eqrjj","Bk5zm6e","m598lv","B4f6apu","ydt019","Bq4z7u6","Bdkvgpv","B0qfbqy","kj8mxx","Bz10aip","oyh7mz","B5kzvoi","p","useShapeStyles","rounded","square","useInputStyles","Bceei9c","abs64n","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","jrapky","Frg6f3","t21cq0","B6of3ja","B74szlk","jo39rj","C5zqim","Bdlbwnu","B8rk77i","Bbzx7hc","Hwkvcz","B0nnt1c","Brwsv5j","B2b7vog","B4hmq5e","B8jxwem","B18nadz","Ddg5ig","Byj09el","Dac2s3","Dd2y6r","Bk0t58e","Ewenww","Brqi8qb","zz3kca","low6xx","d0s10n","wea7l5","olu5tv","g5nsvh","Bqvnfwh","Biqzhck","kgocjf","i","useColorSliderStyles_unstable","state","rootStyles","styles","railStyles","thumbStyles","inputStyles","shapeStyles","channelStyles","isVertical","className","channel","shape"],"mappings":"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"}
+{"version":3,"sources":["useColorSliderStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, makeResetStyles, mergeClasses } from \"@griffel/react\";\nimport { tokens } from \"@fluentui/react-theme\";\nimport { colorSliderCSSVars } from \"./ColorSlider.constants.js\";\nexport const colorSliderClassNames = {\n    root: 'fui-ColorSlider',\n    rail: 'fui-ColorSlider__rail',\n    thumb: 'fui-ColorSlider__thumb',\n    input: 'fui-ColorSlider__input'\n};\nconst hueBackground = `linear-gradient(${[\n    `var(${colorSliderCSSVars.sliderDirectionVar})`,\n    'red',\n    'fuchsia',\n    'blue',\n    'aqua',\n    'lime',\n    'yellow',\n    'red'\n].join(',')})`;\nconst channelBackground = `linear-gradient(var(${colorSliderCSSVars.sliderDirectionVar}), var(${colorSliderCSSVars.railColorVar}), var(${colorSliderCSSVars.railColorLowVar}))`;\n/**\n * Styles for the root slot\n */ const useRootStyles = makeResetStyles({\n    position: 'relative',\n    display: 'inline-grid',\n    touchAction: 'none',\n    alignItems: 'center',\n    justifyItems: 'center',\n    [colorSliderCSSVars.thumbSizeVar]: '20px',\n    [colorSliderCSSVars.railSizeVar]: '20px',\n    minHeight: '32px'\n});\nconst useStyles = makeStyles({\n    horizontal: {\n        minWidth: '200px',\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(${colorSliderCSSVars.thumbSizeVar}) 1fr`,\n        gridTemplateColumns: `1fr 100% 1fr`\n    },\n    vertical: {\n        minHeight: '280px',\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 100% 1fr`,\n        gridTemplateColumns: `1fr var(${colorSliderCSSVars.thumbSizeVar}) 1fr`\n    }\n});\nconst useChannelStyles = makeStyles({\n    hue: {\n        backgroundImage: hueBackground\n    },\n    saturation: {\n        backgroundImage: channelBackground\n    },\n    value: {\n        backgroundImage: channelBackground\n    }\n});\n/**\n * Styles for the rail slot\n */ const useRailStyles = makeStyles({\n    rail: {\n        pointerEvents: 'none',\n        gridRowStart: '2',\n        gridRowEnd: '2',\n        gridColumnStart: '2',\n        gridColumnEnd: '2',\n        position: 'relative',\n        forcedColorAdjust: 'none',\n        outlineWidth: '1px',\n        outlineStyle: 'solid',\n        outlineColor: tokens.colorTransparentStroke,\n        '::before': {\n            content: \"''\",\n            position: 'absolute'\n        }\n    },\n    horizontal: {\n        width: '100%',\n        height: `var(${colorSliderCSSVars.railSizeVar})`,\n        '::before': {\n            left: '-1px',\n            right: '-1px',\n            height: `var(${colorSliderCSSVars.railSizeVar})`\n        }\n    },\n    vertical: {\n        width: `var(${colorSliderCSSVars.railSizeVar})`,\n        height: '100%',\n        '::before': {\n            width: `var(${colorSliderCSSVars.railSizeVar})`,\n            top: '-1px',\n            bottom: '1px'\n        }\n    }\n});\n/**\n * Styles for the thumb slot\n */ const useThumbStyles = makeStyles({\n    thumb: {\n        gridRowStart: '2',\n        gridRowEnd: '2',\n        gridColumnStart: '2',\n        gridColumnEnd: '2',\n        position: 'absolute',\n        width: `var(${colorSliderCSSVars.thumbSizeVar})`,\n        height: `var(${colorSliderCSSVars.thumbSizeVar})`,\n        pointerEvents: 'none',\n        outlineStyle: 'none',\n        forcedColorAdjust: 'none',\n        borderRadius: tokens.borderRadiusCircular,\n        border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralForeground4}`,\n        boxShadow: tokens.shadow4,\n        backgroundColor: `var(${colorSliderCSSVars.thumbColorVar})`,\n        '::before': {\n            position: 'absolute',\n            inset: '0px',\n            borderRadius: tokens.borderRadiusCircular,\n            boxSizing: 'border-box',\n            content: \"''\",\n            border: `${tokens.strokeWidthThick} solid ${tokens.colorNeutralBackground1}`\n        }\n    },\n    horizontal: {\n        transform: 'translateX(-50%)',\n        left: `var(${colorSliderCSSVars.sliderProgressVar})`\n    },\n    vertical: {\n        transform: 'translateY(50%)',\n        bottom: `var(${colorSliderCSSVars.sliderProgressVar})`\n    }\n});\nconst useShapeStyles = makeStyles({\n    rounded: {\n        borderRadius: tokens.borderRadiusMedium\n    },\n    square: {\n        borderRadius: tokens.borderRadiusNone\n    }\n});\n/**\n * Styles for the Input slot\n */ const 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        [`:focus-visible ~ .${colorSliderClassNames.thumb}`]: {\n            border: `2px solid ${tokens.colorStrokeFocus2}`,\n            outline: `${tokens.strokeWidthThick} solid ${tokens.colorTransparentStroke}`,\n            borderRadius: tokens.borderRadiusCircular\n        }\n    },\n    horizontal: {\n        height: `var(${colorSliderCSSVars.thumbSizeVar})`,\n        width: '100%'\n    },\n    vertical: {\n        height: '100%',\n        width: `var(${colorSliderCSSVars.thumbSizeVar})`,\n        'writing-mode': 'vertical-lr',\n        direction: 'rtl'\n    }\n});\n/**\n * Apply styling to the ColorSlider slots based on the state\n */ export const useColorSliderStyles_unstable = (state)=>{\n    const rootStyles = useRootStyles();\n    const styles = useStyles();\n    const railStyles = useRailStyles();\n    const thumbStyles = useThumbStyles();\n    const inputStyles = useInputStyles();\n    const shapeStyles = useShapeStyles();\n    const channelStyles = useChannelStyles();\n    const isVertical = state.vertical;\n    // eslint-disable-next-line react-hooks/immutability\n    state.root.className = mergeClasses(colorSliderClassNames.root, rootStyles, isVertical ? styles.vertical : styles.horizontal, state.root.className);\n    // eslint-disable-next-line react-hooks/immutability\n    state.rail.className = mergeClasses(colorSliderClassNames.rail, railStyles.rail, channelStyles[state.channel || 'hue'], shapeStyles[state.shape || 'rounded'], isVertical ? railStyles.vertical : railStyles.horizontal, state.rail.className);\n    // eslint-disable-next-line react-hooks/immutability\n    state.thumb.className = mergeClasses(colorSliderClassNames.thumb, thumbStyles.thumb, isVertical ? thumbStyles.vertical : thumbStyles.horizontal, state.thumb.className);\n    // eslint-disable-next-line react-hooks/immutability\n    state.input.className = mergeClasses(colorSliderClassNames.input, inputStyles.input, isVertical ? inputStyles.vertical : inputStyles.horizontal, state.input.className);\n    return state;\n};\n"],"names":["__styles","__resetStyles","mergeClasses","tokens","colorSliderCSSVars","colorSliderClassNames","root","rail","thumb","input","hueBackground","sliderDirectionVar","join","channelBackground","railColorVar","railColorLowVar","useRootStyles","useStyles","horizontal","Bf4jedk","wkccdc","Budl1dq","vertical","sshi5w","d","useChannelStyles","hue","Bcmaq0h","saturation","value","useRailStyles","Bkecrkj","Ijaq50","nk6f5a","Br312pm","Bw0ie65","qhf8xq","Bvjb7m6","Bpd4iqm","oeaueh","Bw0xxkn","Ftih45","Brfgrao","a9b677","Bqenvij","Fbdkly","mdwyqc","Baz25je","Ccq8qp","Bciustq","lawp4y","useThumbStyles","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","Bgfg5da","B9xav0g","oivjwe","Bn0qgzm","B4g9neb","zhjwy3","wvpqe5","ibv6hh","u1mtju","h3c5rm","vrafjx","Bekrc4i","i8vvqc","g2u3we","icvyot","B4j52fo","irswps","E5pizo","De3pzq","gc50h5","r59vdv","Budzafs","ck0cow","n07z76","Gng75u","Bcvre1j","Bcgcnre","Bqjgrrk","qa3bma","y0oebl","Biqmznv","Bm6vgfq","Bbv0w2i","uvfttm","eqrjj","Bk5zm6e","m598lv","B4f6apu","ydt019","Bq4z7u6","Bdkvgpv","B0qfbqy","kj8mxx","Bz10aip","oyh7mz","B5kzvoi","p","useShapeStyles","rounded","square","useInputStyles","Bceei9c","abs64n","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","jrapky","Frg6f3","t21cq0","B6of3ja","B74szlk","jo39rj","C5zqim","Bdlbwnu","B8rk77i","Bbzx7hc","Hwkvcz","B0nnt1c","Brwsv5j","B2b7vog","B4hmq5e","B8jxwem","B18nadz","Ddg5ig","Byj09el","Dac2s3","Dd2y6r","Bk0t58e","Ewenww","Brqi8qb","zz3kca","low6xx","d0s10n","wea7l5","olu5tv","g5nsvh","Bqvnfwh","Biqzhck","kgocjf","i","useColorSliderStyles_unstable","state","rootStyles","styles","railStyles","thumbStyles","inputStyles","shapeStyles","channelStyles","isVertical","className","channel","shape"],"mappings":"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"}

package/lib-commonjs/components/ColorSlider/useColorSliderStyles.styles.raw.cjs

@@ -36,6 +36,7 @@ const hueBackground = `linear-gradient(${[
     'yellow',
     'red'
 ].join(',')})`;
+const channelBackground = `linear-gradient(var(${_ColorSliderconstants.colorSliderCSSVars.sliderDirectionVar}), var(${_ColorSliderconstants.colorSliderCSSVars.railColorVar}), var(${_ColorSliderconstants.colorSliderCSSVars.railColorLowVar}))`;
 /**
  * Styles for the root slot
  */ const useRootStyles = (0, _react.makeResetStyles)({
@@ -67,10 +68,10 @@ const useChannelStyles = (0, _react.makeStyles)({
         backgroundImage: hueBackground
     },
     saturation: {
-        backgroundImage: `linear-gradient(to right, #808080, var(${_ColorSliderconstants.colorSliderCSSVars.railColorVar}))`
+        backgroundImage: channelBackground
     },
     value: {
-        backgroundImage: `linear-gradient(to right, #000, var(${_ColorSliderconstants.colorSliderCSSVars.railColorVar}))`
+        backgroundImage: channelBackground
     }
 });
 /**

package/lib-commonjs/components/ColorSlider/useColorSliderStyles.styles.raw.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/ColorSlider/useColorSliderStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, makeResetStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { tokens } from '@fluentui/react-theme';\nimport type { ColorSliderSlots, ColorSliderState } from './ColorSlider.types';\nimport { colorSliderCSSVars } from './ColorSlider.constants';\n\nexport const colorSliderClassNames: SlotClassNames<ColorSliderSlots> = {\n  root: 'fui-ColorSlider',\n  rail: 'fui-ColorSlider__rail',\n  thumb: 'fui-ColorSlider__thumb',\n  input: 'fui-ColorSlider__input',\n};\n\nconst hueBackground = `linear-gradient(${[\n  `var(${colorSliderCSSVars.sliderDirectionVar})`,\n  'red',\n  'fuchsia',\n  'blue',\n  'aqua',\n  'lime',\n  'yellow',\n  'red',\n].join(',')})`;\n\n/**\n * Styles for the root slot\n */\nconst useRootStyles = makeResetStyles({\n  position: 'relative',\n  display: 'inline-grid',\n  touchAction: 'none',\n  alignItems: 'center',\n  justifyItems: 'center',\n  [colorSliderCSSVars.thumbSizeVar]: '20px',\n  [colorSliderCSSVars.railSizeVar]: '20px',\n  minHeight: '32px',\n});\n\nconst useStyles = makeStyles({\n  horizontal: {\n    minWidth: '200px',\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(${colorSliderCSSVars.thumbSizeVar}) 1fr`,\n    gridTemplateColumns: `1fr 100% 1fr`,\n  },\n\n  vertical: {\n    minHeight: '280px',\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 100% 1fr`,\n    gridTemplateColumns: `1fr var(${colorSliderCSSVars.thumbSizeVar}) 1fr`,\n  },\n});\n\nconst useChannelStyles = makeStyles({\n  hue: {\n    backgroundImage: hueBackground,\n  },\n  saturation: {\n    backgroundImage: `linear-gradient(to right, #808080, var(${colorSliderCSSVars.railColorVar}))`,\n  },\n  value: {\n    backgroundImage: `linear-gradient(to right, #000, var(${colorSliderCSSVars.railColorVar}))`,\n  },\n});\n\n/**\n * Styles for the rail slot\n */\nconst useRailStyles = makeStyles({\n  rail: {\n    pointerEvents: 'none',\n    gridRowStart: '2',\n    gridRowEnd: '2',\n    gridColumnStart: '2',\n    gridColumnEnd: '2',\n    position: 'relative',\n    forcedColorAdjust: 'none',\n    outlineWidth: '1px',\n    outlineStyle: 'solid',\n    outlineColor: tokens.colorTransparentStroke,\n    '::before': {\n      content: \"''\",\n      position: 'absolute',\n    },\n  },\n\n  horizontal: {\n    width: '100%',\n    height: `var(${colorSliderCSSVars.railSizeVar})`,\n    '::before': {\n      left: '-1px',\n      right: '-1px',\n      height: `var(${colorSliderCSSVars.railSizeVar})`,\n    },\n  },\n\n  vertical: {\n    width: `var(${colorSliderCSSVars.railSizeVar})`,\n    height: '100%',\n    '::before': {\n      width: `var(${colorSliderCSSVars.railSizeVar})`,\n      top: '-1px',\n      bottom: '1px',\n    },\n  },\n});\n\n/**\n * Styles for the thumb slot\n */\nconst useThumbStyles = makeStyles({\n  thumb: {\n    gridRowStart: '2',\n    gridRowEnd: '2',\n    gridColumnStart: '2',\n    gridColumnEnd: '2',\n    position: 'absolute',\n    width: `var(${colorSliderCSSVars.thumbSizeVar})`,\n    height: `var(${colorSliderCSSVars.thumbSizeVar})`,\n    pointerEvents: 'none',\n    outlineStyle: 'none',\n    forcedColorAdjust: 'none',\n    borderRadius: tokens.borderRadiusCircular,\n    border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralForeground4}`,\n    boxShadow: tokens.shadow4,\n    backgroundColor: `var(${colorSliderCSSVars.thumbColorVar})`,\n    '::before': {\n      position: 'absolute',\n      inset: '0px',\n      borderRadius: tokens.borderRadiusCircular,\n      boxSizing: 'border-box',\n      content: \"''\",\n      border: `${tokens.strokeWidthThick} solid ${tokens.colorNeutralBackground1}`,\n    },\n  },\n  horizontal: {\n    transform: 'translateX(-50%)',\n    left: `var(${colorSliderCSSVars.sliderProgressVar})`,\n  },\n  vertical: {\n    transform: 'translateY(50%)',\n    bottom: `var(${colorSliderCSSVars.sliderProgressVar})`,\n  },\n});\n\nconst useShapeStyles = makeStyles({\n  rounded: {\n    borderRadius: tokens.borderRadiusMedium,\n  },\n  square: {\n    borderRadius: tokens.borderRadiusNone,\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    [`:focus-visible ~ .${colorSliderClassNames.thumb}`]: {\n      border: `2px solid ${tokens.colorStrokeFocus2}`,\n      outline: `${tokens.strokeWidthThick} solid ${tokens.colorTransparentStroke}`,\n      borderRadius: tokens.borderRadiusCircular,\n    },\n  },\n  horizontal: {\n    height: `var(${colorSliderCSSVars.thumbSizeVar})`,\n    width: '100%',\n  },\n  vertical: {\n    height: '100%',\n    width: `var(${colorSliderCSSVars.thumbSizeVar})`,\n    'writing-mode': 'vertical-lr',\n    direction: 'rtl',\n  },\n});\n\n/**\n * Apply styling to the ColorSlider slots based on the state\n */\nexport const useColorSliderStyles_unstable = (state: ColorSliderState): ColorSliderState => {\n  const rootStyles = useRootStyles();\n  const styles = useStyles();\n  const railStyles = useRailStyles();\n  const thumbStyles = useThumbStyles();\n  const inputStyles = useInputStyles();\n  const shapeStyles = useShapeStyles();\n  const channelStyles = useChannelStyles();\n  const isVertical = state.vertical;\n\n  // eslint-disable-next-line react-hooks/immutability\n  state.root.className = mergeClasses(\n    colorSliderClassNames.root,\n    rootStyles,\n    isVertical ? styles.vertical : styles.horizontal,\n    state.root.className,\n  );\n\n  // eslint-disable-next-line react-hooks/immutability\n  state.rail.className = mergeClasses(\n    colorSliderClassNames.rail,\n    railStyles.rail,\n    channelStyles[state.channel || 'hue'],\n    shapeStyles[state.shape || 'rounded'],\n    isVertical ? railStyles.vertical : railStyles.horizontal,\n    state.rail.className,\n  );\n\n  // eslint-disable-next-line react-hooks/immutability\n  state.thumb.className = mergeClasses(\n    colorSliderClassNames.thumb,\n    thumbStyles.thumb,\n    isVertical ? thumbStyles.vertical : thumbStyles.horizontal,\n    state.thumb.className,\n  );\n\n  // eslint-disable-next-line react-hooks/immutability\n  state.input.className = mergeClasses(\n    colorSliderClassNames.input,\n    inputStyles.input,\n    isVertical ? inputStyles.vertical : inputStyles.horizontal,\n    state.input.className,\n  );\n  return state;\n};\n"],"names":["makeStyles","makeResetStyles","mergeClasses","tokens","colorSliderCSSVars","colorSliderClassNames","root","rail","thumb","input","hueBackground","sliderDirectionVar","join","useRootStyles","position","display","touchAction","alignItems","justifyItems","thumbSizeVar","railSizeVar","minHeight","useStyles","horizontal","minWidth","gridTemplateRows","gridTemplateColumns","vertical","useChannelStyles","hue","backgroundImage","saturation","railColorVar","value","useRailStyles","pointerEvents","gridRowStart","gridRowEnd","gridColumnStart","gridColumnEnd","forcedColorAdjust","outlineWidth","outlineStyle","outlineColor","colorTransparentStroke","content","width","height","left","right","top","bottom","useThumbStyles","borderRadius","borderRadiusCircular","border","strokeWidthThin","colorNeutralForeground4","boxShadow","shadow4","backgroundColor","thumbColorVar","inset","boxSizing","strokeWidthThick","colorNeutralBackground1","transform","sliderProgressVar","useShapeStyles","rounded","borderRadiusMedium","square","borderRadiusNone","useInputStyles","cursor","opacity","padding","margin","colorStrokeFocus2","outline","direction","useColorSliderStyles_unstable","state","rootStyles","styles","railStyles","thumbStyles","inputStyles","shapeStyles","channelStyles","isVertical","className","channel","shape"],"mappings":"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"}
+{"version":3,"sources":["../src/components/ColorSlider/useColorSliderStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, makeResetStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { tokens } from '@fluentui/react-theme';\nimport type { ColorSliderSlots, ColorSliderState } from './ColorSlider.types';\nimport { colorSliderCSSVars } from './ColorSlider.constants';\n\nexport const colorSliderClassNames: SlotClassNames<ColorSliderSlots> = {\n  root: 'fui-ColorSlider',\n  rail: 'fui-ColorSlider__rail',\n  thumb: 'fui-ColorSlider__thumb',\n  input: 'fui-ColorSlider__input',\n};\n\nconst hueBackground = `linear-gradient(${[\n  `var(${colorSliderCSSVars.sliderDirectionVar})`,\n  'red',\n  'fuchsia',\n  'blue',\n  'aqua',\n  'lime',\n  'yellow',\n  'red',\n].join(',')})`;\nconst channelBackground = `linear-gradient(var(${colorSliderCSSVars.sliderDirectionVar}), var(${colorSliderCSSVars.railColorVar}), var(${colorSliderCSSVars.railColorLowVar}))`;\n\n/**\n * Styles for the root slot\n */\nconst useRootStyles = makeResetStyles({\n  position: 'relative',\n  display: 'inline-grid',\n  touchAction: 'none',\n  alignItems: 'center',\n  justifyItems: 'center',\n  [colorSliderCSSVars.thumbSizeVar]: '20px',\n  [colorSliderCSSVars.railSizeVar]: '20px',\n  minHeight: '32px',\n});\n\nconst useStyles = makeStyles({\n  horizontal: {\n    minWidth: '200px',\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(${colorSliderCSSVars.thumbSizeVar}) 1fr`,\n    gridTemplateColumns: `1fr 100% 1fr`,\n  },\n\n  vertical: {\n    minHeight: '280px',\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 100% 1fr`,\n    gridTemplateColumns: `1fr var(${colorSliderCSSVars.thumbSizeVar}) 1fr`,\n  },\n});\n\nconst useChannelStyles = makeStyles({\n  hue: {\n    backgroundImage: hueBackground,\n  },\n  saturation: {\n    backgroundImage: channelBackground,\n  },\n  value: {\n    backgroundImage: channelBackground,\n  },\n});\n\n/**\n * Styles for the rail slot\n */\nconst useRailStyles = makeStyles({\n  rail: {\n    pointerEvents: 'none',\n    gridRowStart: '2',\n    gridRowEnd: '2',\n    gridColumnStart: '2',\n    gridColumnEnd: '2',\n    position: 'relative',\n    forcedColorAdjust: 'none',\n    outlineWidth: '1px',\n    outlineStyle: 'solid',\n    outlineColor: tokens.colorTransparentStroke,\n    '::before': {\n      content: \"''\",\n      position: 'absolute',\n    },\n  },\n\n  horizontal: {\n    width: '100%',\n    height: `var(${colorSliderCSSVars.railSizeVar})`,\n    '::before': {\n      left: '-1px',\n      right: '-1px',\n      height: `var(${colorSliderCSSVars.railSizeVar})`,\n    },\n  },\n\n  vertical: {\n    width: `var(${colorSliderCSSVars.railSizeVar})`,\n    height: '100%',\n    '::before': {\n      width: `var(${colorSliderCSSVars.railSizeVar})`,\n      top: '-1px',\n      bottom: '1px',\n    },\n  },\n});\n\n/**\n * Styles for the thumb slot\n */\nconst useThumbStyles = makeStyles({\n  thumb: {\n    gridRowStart: '2',\n    gridRowEnd: '2',\n    gridColumnStart: '2',\n    gridColumnEnd: '2',\n    position: 'absolute',\n    width: `var(${colorSliderCSSVars.thumbSizeVar})`,\n    height: `var(${colorSliderCSSVars.thumbSizeVar})`,\n    pointerEvents: 'none',\n    outlineStyle: 'none',\n    forcedColorAdjust: 'none',\n    borderRadius: tokens.borderRadiusCircular,\n    border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralForeground4}`,\n    boxShadow: tokens.shadow4,\n    backgroundColor: `var(${colorSliderCSSVars.thumbColorVar})`,\n    '::before': {\n      position: 'absolute',\n      inset: '0px',\n      borderRadius: tokens.borderRadiusCircular,\n      boxSizing: 'border-box',\n      content: \"''\",\n      border: `${tokens.strokeWidthThick} solid ${tokens.colorNeutralBackground1}`,\n    },\n  },\n  horizontal: {\n    transform: 'translateX(-50%)',\n    left: `var(${colorSliderCSSVars.sliderProgressVar})`,\n  },\n  vertical: {\n    transform: 'translateY(50%)',\n    bottom: `var(${colorSliderCSSVars.sliderProgressVar})`,\n  },\n});\n\nconst useShapeStyles = makeStyles({\n  rounded: {\n    borderRadius: tokens.borderRadiusMedium,\n  },\n  square: {\n    borderRadius: tokens.borderRadiusNone,\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    [`:focus-visible ~ .${colorSliderClassNames.thumb}`]: {\n      border: `2px solid ${tokens.colorStrokeFocus2}`,\n      outline: `${tokens.strokeWidthThick} solid ${tokens.colorTransparentStroke}`,\n      borderRadius: tokens.borderRadiusCircular,\n    },\n  },\n  horizontal: {\n    height: `var(${colorSliderCSSVars.thumbSizeVar})`,\n    width: '100%',\n  },\n  vertical: {\n    height: '100%',\n    width: `var(${colorSliderCSSVars.thumbSizeVar})`,\n    'writing-mode': 'vertical-lr',\n    direction: 'rtl',\n  },\n});\n\n/**\n * Apply styling to the ColorSlider slots based on the state\n */\nexport const useColorSliderStyles_unstable = (state: ColorSliderState): ColorSliderState => {\n  const rootStyles = useRootStyles();\n  const styles = useStyles();\n  const railStyles = useRailStyles();\n  const thumbStyles = useThumbStyles();\n  const inputStyles = useInputStyles();\n  const shapeStyles = useShapeStyles();\n  const channelStyles = useChannelStyles();\n  const isVertical = state.vertical;\n\n  // eslint-disable-next-line react-hooks/immutability\n  state.root.className = mergeClasses(\n    colorSliderClassNames.root,\n    rootStyles,\n    isVertical ? styles.vertical : styles.horizontal,\n    state.root.className,\n  );\n\n  // eslint-disable-next-line react-hooks/immutability\n  state.rail.className = mergeClasses(\n    colorSliderClassNames.rail,\n    railStyles.rail,\n    channelStyles[state.channel || 'hue'],\n    shapeStyles[state.shape || 'rounded'],\n    isVertical ? railStyles.vertical : railStyles.horizontal,\n    state.rail.className,\n  );\n\n  // eslint-disable-next-line react-hooks/immutability\n  state.thumb.className = mergeClasses(\n    colorSliderClassNames.thumb,\n    thumbStyles.thumb,\n    isVertical ? thumbStyles.vertical : thumbStyles.horizontal,\n    state.thumb.className,\n  );\n\n  // eslint-disable-next-line react-hooks/immutability\n  state.input.className = mergeClasses(\n    colorSliderClassNames.input,\n    inputStyles.input,\n    isVertical ? inputStyles.vertical : inputStyles.horizontal,\n    state.input.className,\n  );\n  return state;\n};\n"],"names":["makeStyles","makeResetStyles","mergeClasses","tokens","colorSliderCSSVars","colorSliderClassNames","root","rail","thumb","input","hueBackground","sliderDirectionVar","join","channelBackground","railColorVar","railColorLowVar","useRootStyles","position","display","touchAction","alignItems","justifyItems","thumbSizeVar","railSizeVar","minHeight","useStyles","horizontal","minWidth","gridTemplateRows","gridTemplateColumns","vertical","useChannelStyles","hue","backgroundImage","saturation","value","useRailStyles","pointerEvents","gridRowStart","gridRowEnd","gridColumnStart","gridColumnEnd","forcedColorAdjust","outlineWidth","outlineStyle","outlineColor","colorTransparentStroke","content","width","height","left","right","top","bottom","useThumbStyles","borderRadius","borderRadiusCircular","border","strokeWidthThin","colorNeutralForeground4","boxShadow","shadow4","backgroundColor","thumbColorVar","inset","boxSizing","strokeWidthThick","colorNeutralBackground1","transform","sliderProgressVar","useShapeStyles","rounded","borderRadiusMedium","square","borderRadiusNone","useInputStyles","cursor","opacity","padding","margin","colorStrokeFocus2","outline","direction","useColorSliderStyles_unstable","state","rootStyles","styles","railStyles","thumbStyles","inputStyles","shapeStyles","channelStyles","isVertical","className","channel","shape"],"mappings":"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"}