@fluentui/react-color-picker 9.74.7-experimental.cli-api.20261006-ccaa611d58.0 → 9.75.0-experimental.css-modules.20261031-810ab07afb.0

package/CHANGELOG.md

@@ -1,23 +1,59 @@
 # Change Log - @fluentui/react-color-picker
 
-<!-- This log was last generated on Tue, 06 Oct 2026 11:40:19 GMT and should not be manually modified. -->
+<!-- This log was last generated on Sat, 31 Oct 2026 11:09:03 GMT and should not be manually modified. -->
 
 <!-- Start content -->
 
-## [9.74.7-experimental.cli-api.20261006-ccaa611d58.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-color-picker_v9.74.7-experimental.cli-api.20261006-ccaa611d58.0)
+## [9.75.0-experimental.css-modules.20261031-810ab07afb.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-color-picker_v9.75.0-experimental.css-modules.20261031-810ab07afb.0)
 
-Tue, 06 Oct 2026 11:40:19 GMT 
-[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-color-picker_v9.3.0..@fluentui/react-color-picker_v9.74.7-experimental.cli-api.20261006-ccaa611d58.0)
+Sat, 31 Oct 2026 11:09:03 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-color-picker_v9.3.3..@fluentui/react-color-picker_v9.75.0-experimental.css-modules.20261031-810ab07afb.0)
 
 ### Changes
 
-- Release 9.74.7-experimental.cli-api.20261006-ccaa611d58 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by 257645319+office-ogx-auth-helper[bot]@users.noreply.github.com)
-- Bump @fluentui/react-context-selector to v9.74.7-experimental.cli-api.20261006-ccaa611d58.0 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
-- Bump @fluentui/react-jsx-runtime to v9.74.7-experimental.cli-api.20261006-ccaa611d58.0 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
-- Bump @fluentui/react-shared-contexts to v9.74.7-experimental.cli-api.20261006-ccaa611d58.0 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
-- Bump @fluentui/react-tabster to v9.74.7-experimental.cli-api.20261006-ccaa611d58.0 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
-- Bump @fluentui/react-theme to v9.74.7-experimental.cli-api.20261006-ccaa611d58.0 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
-- Bump @fluentui/react-utilities to v9.74.7-experimental.cli-api.20261006-ccaa611d58.0 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
+- Release 9.75.0-experimental.css-modules.20261031-810ab07afb ([commit](https://github.com/microsoft/fluentui/commit/undefined) by 257645319+office-ogx-auth-helper[bot]@users.noreply.github.com)
+- Bump @fluentui/react-context-selector to v9.75.0-experimental.css-modules.20261031-810ab07afb.0 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.75.0-experimental.css-modules.20261031-810ab07afb.0 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.75.0-experimental.css-modules.20261031-810ab07afb.0 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
+- Bump @fluentui/react-tabster to v9.75.0-experimental.css-modules.20261031-810ab07afb.0 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
+- Bump @fluentui/react-theme to v9.75.0-experimental.css-modules.20261031-810ab07afb.0 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
+- Bump @fluentui/react-utilities to v9.75.0-experimental.css-modules.20261031-810ab07afb.0 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
+
+## [9.3.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-color-picker_v9.3.3)
+
+Thu, 22 Oct 2026 11:25:58 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-color-picker_v9.3.2..@fluentui/react-color-picker_v9.3.3)
+
+### Patches
+
+- fix: use getPercentInRange from react-utilities ([PR #36890](https://github.com/microsoft/fluentui/pull/36890) by vgenaev@gmail.com)
+
+## [9.3.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-color-picker_v9.3.2)
+
+Mon, 19 Oct 2026 16:49:00 GMT
+
+### Patches
+
+- fix: preserve uncontrolled HSV and alpha across shared color controls, expose channel-preserving rail endpoints, correct RTL transparency direction, and default slider orientations ([PR #36873](https://github.com/microsoft/fluentui/pull/36873) by 43711362+paolo-aliprandi@users.noreply.github.com)
+- Bump @fluentui/react-context-selector to v9.2.21 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.4.7 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
+- Bump @fluentui/react-tabster to v9.26.19 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
+- Bump @fluentui/react-utilities to v9.27.0 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
+
+## [9.3.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-color-picker_v9.3.1)
+
+Tue, 22 Sep 2026 11:25:39 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-color-picker_v9.3.0..@fluentui/react-color-picker_v9.3.1)
+
+### Patches
+
+- fix: remove unused react-dom and @types/react-dom peer dependencies, mark @types/react as optional ([PR #36559](https://github.com/microsoft/fluentui/pull/36559) by martinhochel@microsoft.com)
+- fix: use nullish fallback in adjustChannel so a channel whose value is 0 resolves to its own action instead of hue's ([PR #36664](https://github.com/microsoft/fluentui/pull/36664) by array.knight@gmail.com)
+- Bump @fluentui/react-context-selector to v9.2.20 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.4.6 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.26.4 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
+- Bump @fluentui/react-tabster to v9.26.18 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
+- Bump @fluentui/react-utilities to v9.26.7 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
 
 ## [9.3.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-color-picker_v9.3.0)
 

package/lib/components/AlphaSlider/AlphaSlider.constants.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/AlphaSlider/AlphaSlider.constants.ts"],"sourcesContent":["export const alphaSliderCSSVars = {\n  sliderDirectionVar: `--fui-AlphaSlider--direction`,\n  sliderProgressVar: `--fui-AlphaSlider--progress`,\n  thumbColorVar: `--fui-AlphaSlider__thumb--color`,\n  railColorVar: `--fui-AlphaSlider__rail--color`,\n};\n"],"names":["alphaSliderCSSVars","sliderDirectionVar","sliderProgressVar","thumbColorVar","railColorVar"],"mappings":"AAAA,OAAO,MAAMA,qBAAqB;IAChCC,oBAAoB,CAAC,4BAA4B,CAAC;IAClDC,mBAAmB,CAAC,2BAA2B,CAAC;IAChDC,eAAe,CAAC,+BAA+B,CAAC;IAChDC,cAAc,CAAC,8BAA8B,CAAC;AAChD,EAAE"}
+{"version":3,"sources":["../../../src/components/AlphaSlider/AlphaSlider.constants.ts"],"sourcesContent":["export const alphaSliderCSSVars = {\n  sliderDirectionVar: `--fui-AlphaSlider--direction`,\n  sliderProgressVar: `--fui-AlphaSlider--progress`,\n  thumbColorVar: `--fui-AlphaSlider__thumb--color`,\n  railColorVar: `--fui-AlphaSlider__rail--color`,\n};\n"],"names":["alphaSliderCSSVars","sliderDirectionVar","sliderProgressVar","thumbColorVar","railColorVar"],"mappings":"AAAA,OAAO,MAAMA,qBAAqB;IAChCC,oBAAoB,CAAC,4BAA4B,CAAC;IAClDC,mBAAmB,CAAC,2BAA2B,CAAC;IAChDC,eAAe,CAAC,+BAA+B,CAAC;IAChDC,cAAc,CAAC,8BAA8B,CAAC;AAChD,EAAE"}

package/lib/components/AlphaSlider/AlphaSlider.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/AlphaSlider/AlphaSlider.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useAlphaSlider_unstable } from './useAlphaSlider';\nimport { renderAlphaSlider_unstable } from './renderAlphaSlider';\nimport { useAlphaSliderStyles_unstable } from './useAlphaSliderStyles.styles';\nimport type { AlphaSliderProps } from './AlphaSlider.types';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * AlphaSlider component\n */\nexport const AlphaSlider: ForwardRefComponent<AlphaSliderProps> = React.forwardRef((props, ref) => {\n  const state = useAlphaSlider_unstable(props, ref);\n\n  useAlphaSliderStyles_unstable(state);\n  useCustomStyleHook_unstable('useAlphaSliderStyles_unstable')(state);\n\n  return renderAlphaSlider_unstable(state);\n});\n\nAlphaSlider.displayName = 'AlphaSlider';\n"],"names":["React","useAlphaSlider_unstable","renderAlphaSlider_unstable","useAlphaSliderStyles_unstable","useCustomStyleHook_unstable","AlphaSlider","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,uBAAuB,QAAQ,sBAAmB;AAC3D,SAASC,0BAA0B,QAAQ,yBAAsB;AACjE,SAASC,6BAA6B,QAAQ,mCAAgC;AAE9E,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,4BAAqDL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IACzF,MAAMC,QAAQR,wBAAwBM,OAAOC;IAE7CL,8BAA8BM;IAC9BL,4BAA4B,iCAAiCK;IAE7D,OAAOP,2BAA2BO;AACpC,GAAG;AAEHJ,YAAYK,WAAW,GAAG"}
+{"version":3,"sources":["../../../src/components/AlphaSlider/AlphaSlider.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useAlphaSlider_unstable } from './useAlphaSlider';\nimport { renderAlphaSlider_unstable } from './renderAlphaSlider';\nimport { useAlphaSliderStyles_unstable } from './useAlphaSliderStyles.styles';\nimport type { AlphaSliderProps } from './AlphaSlider.types';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * AlphaSlider component\n */\nexport const AlphaSlider: ForwardRefComponent<AlphaSliderProps> = React.forwardRef((props, ref) => {\n  const state = useAlphaSlider_unstable(props, ref);\n\n  useAlphaSliderStyles_unstable(state);\n  useCustomStyleHook_unstable('useAlphaSliderStyles_unstable')(state);\n\n  return renderAlphaSlider_unstable(state);\n});\n\nAlphaSlider.displayName = 'AlphaSlider';\n"],"names":["React","useAlphaSlider_unstable","renderAlphaSlider_unstable","useAlphaSliderStyles_unstable","useCustomStyleHook_unstable","AlphaSlider","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,uBAAuB,QAAQ,sBAAmB;AAC3D,SAASC,0BAA0B,QAAQ,yBAAsB;AACjE,SAASC,6BAA6B,QAAQ,mCAAgC;AAE9E,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,4BAAqDL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IACzF,MAAMC,QAAQR,wBAAwBM,OAAOC;IAE7CL,8BAA8BM;IAC9BL,4BAA4B,iCAAiCK;IAE7D,OAAOP,2BAA2BO;AACpC,GAAG;AAEHJ,YAAYK,WAAW,GAAG"}

package/lib/components/AlphaSlider/AlphaSlider.module.css

@@ -0,0 +1,28 @@
+@layer fluentui {
+  .rail {
+    border: var(--strokeWidthThin) solid var(--colorNeutralStroke1);
+    background-image: linear-gradient(
+        var(--fui-AlphaSlider--direction),
+        transparent,
+        var(--fui-AlphaSlider__rail--color)
+      ),
+      url(https://fabricweb.azureedge.net/fabric-website/assets/images/transparent-pattern.png);
+  }
+  .thumb {
+    background-color: var(--colorNeutralBackground1);
+    &::before {
+      background-color: var(--fui-AlphaSlider__thumb--color);
+    }
+  }
+  :where(.horizontal) > .thumb {
+    transform: translateX(-50%);
+    &:dir(rtl) {
+      transform: translateX(50%);
+    }
+    inset-inline-start: var(--fui-AlphaSlider--progress);
+  }
+  :where(.vertical) > .thumb {
+    transform: translateY(50%);
+    bottom: var(--fui-AlphaSlider--progress);
+  }
+}

package/lib/components/AlphaSlider/AlphaSlider.types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/AlphaSlider/AlphaSlider.types.ts"],"sourcesContent":["import type { ComponentState } from '@fluentui/react-utilities';\nimport type { ColorSliderSlots, ColorSliderProps, ColorSliderState } from '../ColorSlider/ColorSlider.types';\n\nexport type AlphaSliderSlots = ColorSliderSlots;\n\n/**\n * AlphaSlider Props\n */\nexport type AlphaSliderProps = Omit<ColorSliderProps, 'channel'> & {\n  /**\n   * The `transparency` property determines how the alpha channel is interpreted.\n   * - When `false`, the alpha channel represents the opacity of the color.\n   * - When `true`, the alpha channel represents the transparency of the color.\n   * For example, a 30% transparent color has 70% opacity.\n   *\n   * @defaultvalue false\n   */\n  transparency?: boolean;\n};\n\n/**\n * AlphaSlider Base Props\n */\nexport type AlphaSliderBaseProps = Omit<AlphaSliderProps, 'shape'>;\n\n/**\n * State used in rendering AlphaSlider\n */\nexport type AlphaSliderState = ComponentState<AlphaSliderSlots> &\n  Pick<AlphaSliderProps, 'vertical'> &\n  Omit<ColorSliderState, keyof ColorSliderSlots | 'components'>;\n\n/**\n * State used in rendering unstyled AlphaSlider\n */\nexport type AlphaSliderBaseState = Omit<AlphaSliderState, 'shape'>;\n"],"names":[],"mappings":"AAgCA;;CAEC,GACD,WAAmE"}
+{"version":3,"sources":["../../../src/components/AlphaSlider/AlphaSlider.types.ts"],"sourcesContent":["import type { ComponentState } from '@fluentui/react-utilities';\nimport type { ColorSliderSlots, ColorSliderProps, ColorSliderState } from '../ColorSlider/ColorSlider.types';\n\nexport type AlphaSliderSlots = ColorSliderSlots;\n\n/**\n * AlphaSlider Props\n */\nexport type AlphaSliderProps = Omit<ColorSliderProps, 'channel'> & {\n  /**\n   * The `transparency` property determines how the alpha channel is interpreted.\n   * - When `false`, the alpha channel represents the opacity of the color.\n   * - When `true`, the alpha channel represents the transparency of the color.\n   * For example, a 30% transparent color has 70% opacity.\n   *\n   * @defaultvalue false\n   */\n  transparency?: boolean;\n};\n\n/**\n * AlphaSlider Base Props\n */\nexport type AlphaSliderBaseProps = Omit<AlphaSliderProps, 'shape'>;\n\n/**\n * State used in rendering AlphaSlider\n */\nexport type AlphaSliderState = ComponentState<AlphaSliderSlots> &\n  Pick<AlphaSliderProps, 'vertical'> &\n  Omit<ColorSliderState, keyof ColorSliderSlots | 'components'>;\n\n/**\n * State used in rendering unstyled AlphaSlider\n */\nexport type AlphaSliderBaseState = Omit<AlphaSliderState, 'shape'>;\n"],"names":[],"mappings":"AAgCA;;CAEC,GACD,WAAmE"}

package/lib/components/AlphaSlider/alphaSliderUtils.js

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

package/lib/components/AlphaSlider/alphaSliderUtils.js.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,OAAO,SAASA,qBAAqBC,KAAa,EAAEC,YAAqB;IACvE,OAAOA,eAAe,MAAMD,QAAQA;AACtC;AAEA;;;;;;CAMC,GACD,OAAO,SAASE,2BAA2BD,YAAqB,EAAED,KAAc;IAC9E,OAAOA,UAAUG,YAAYJ,qBAAqBC,QAAQ,KAAKC,gBAAgBE;AACjF;AAEA;;;;;;;CAOC,GACD,OAAO,SAASC,mBAAmBC,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,OAAO,SAASA,qBAAqBC,KAAa,EAAEC,YAAqB;IACvE,OAAOA,eAAe,MAAMD,QAAQA;AACtC;AAEA;;;;;;CAMC,GACD,OAAO,SAASE,2BAA2BD,YAAqB,EAAED,KAAc;IAC9E,OAAOA,UAAUG,YAAYJ,qBAAqBC,QAAQ,KAAKC,gBAAgBE;AACjF;AAEA;;;;;;;CAOC,GACD,OAAO,SAASC,mBAAmBC,GAAkB,EAAEC,QAAiB,EAAEL,YAAqB;IAC7F,IAAIK,UAAU;QACZ,OAAOL,eAAe,WAAW;IACnC;IACA,OAAO,AAACI,QAAQ,UAAWJ,eAAe,UAAU;AACtD"}

package/lib/components/AlphaSlider/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/AlphaSlider/index.ts"],"sourcesContent":["export { AlphaSlider } from './AlphaSlider';\nexport type {\n  AlphaSliderBaseProps,\n  AlphaSliderBaseState,\n  AlphaSliderProps,\n  AlphaSliderSlots,\n  AlphaSliderState,\n} from './AlphaSlider.types';\nexport { renderAlphaSlider_unstable } from './renderAlphaSlider';\nexport { useAlphaSliderBase_unstable, useAlphaSlider_unstable } from './useAlphaSlider';\nexport { alphaSliderClassNames, useAlphaSliderStyles_unstable } from './useAlphaSliderStyles.styles';\nexport { alphaSliderCSSVars } from './AlphaSlider.constants';\n"],"names":["AlphaSlider","renderAlphaSlider_unstable","useAlphaSliderBase_unstable","useAlphaSlider_unstable","alphaSliderClassNames","useAlphaSliderStyles_unstable","alphaSliderCSSVars"],"mappings":"AAAA,SAASA,WAAW,QAAQ,mBAAgB;AAQ5C,SAASC,0BAA0B,QAAQ,yBAAsB;AACjE,SAASC,2BAA2B,EAAEC,uBAAuB,QAAQ,sBAAmB;AACxF,SAASC,qBAAqB,EAAEC,6BAA6B,QAAQ,mCAAgC;AACrG,SAASC,kBAAkB,QAAQ,6BAA0B"}
+{"version":3,"sources":["../../../src/components/AlphaSlider/index.ts"],"sourcesContent":["export { AlphaSlider } from './AlphaSlider';\nexport type {\n  AlphaSliderBaseProps,\n  AlphaSliderBaseState,\n  AlphaSliderProps,\n  AlphaSliderSlots,\n  AlphaSliderState,\n} from './AlphaSlider.types';\nexport { renderAlphaSlider_unstable } from './renderAlphaSlider';\nexport { useAlphaSliderBase_unstable, useAlphaSlider_unstable } from './useAlphaSlider';\nexport { alphaSliderClassNames, useAlphaSliderStyles_unstable } from './useAlphaSliderStyles.styles';\nexport { alphaSliderCSSVars } from './AlphaSlider.constants';\n"],"names":["AlphaSlider","renderAlphaSlider_unstable","useAlphaSliderBase_unstable","useAlphaSlider_unstable","alphaSliderClassNames","useAlphaSliderStyles_unstable","alphaSliderCSSVars"],"mappings":"AAAA,SAASA,WAAW,QAAQ,mBAAgB;AAQ5C,SAASC,0BAA0B,QAAQ,yBAAsB;AACjE,SAASC,2BAA2B,EAAEC,uBAAuB,QAAQ,sBAAmB;AACxF,SAASC,qBAAqB,EAAEC,6BAA6B,QAAQ,mCAAgC;AACrG,SAASC,kBAAkB,QAAQ,6BAA0B"}

package/lib/components/AlphaSlider/renderAlphaSlider.js

@@ -1,5 +1,5 @@
-  import { jsx as _jsx, jsxs as _jsxs } from "@fluentui/react-jsx-runtime/jsx-runtime";
-import { assertSlots } from "@fluentui/react-utilities";
+import { jsx as _jsx, jsxs as _jsxs } from "@fluentui/react-jsx-runtime/jsx-runtime";
+  import { assertSlots } from "@fluentui/react-utilities";
 /**
  * Render the final JSX of AlphaSlider
  */ export const renderAlphaSlider_unstable = (state)=>{

package/lib/components/AlphaSlider/renderAlphaSlider.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/AlphaSlider/renderAlphaSlider.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type { AlphaSliderBaseState, AlphaSliderSlots } from './AlphaSlider.types';\n\n/**\n * Render the final JSX of AlphaSlider\n */\nexport const renderAlphaSlider_unstable = (state: AlphaSliderBaseState): JSXElement => {\n  assertSlots<AlphaSliderSlots>(state);\n\n  return (\n    <state.root>\n      <state.input />\n      <state.rail />\n      <state.thumb />\n    </state.root>\n  );\n};\n"],"names":["assertSlots","renderAlphaSlider_unstable","state","root","input","rail","thumb"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAIxD;;CAEC,GACD,OAAO,MAAMC,6BAA6B,CAACC;IACzCF,YAA8BE;IAE9B,qBACE,MAACA,MAAMC,IAAI;;0BACT,KAACD,MAAME,KAAK;0BACZ,KAACF,MAAMG,IAAI;0BACX,KAACH,MAAMI,KAAK;;;AAGlB,EAAE"}
+{"version":3,"sources":["../../../src/components/AlphaSlider/renderAlphaSlider.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type { AlphaSliderBaseState, AlphaSliderSlots } from './AlphaSlider.types';\n\n/**\n * Render the final JSX of AlphaSlider\n */\nexport const renderAlphaSlider_unstable = (state: AlphaSliderBaseState): JSXElement => {\n  assertSlots<AlphaSliderSlots>(state);\n\n  return (\n    <state.root>\n      <state.input />\n      <state.rail />\n      <state.thumb />\n    </state.root>\n  );\n};\n"],"names":["assertSlots","renderAlphaSlider_unstable","state","root","input","rail","thumb"],"mappings":";AAAA,0BAA0B,GAC1B,iDAAiD,GAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAIxD;;CAEC,GACD,OAAO,MAAMC,6BAA6B,CAACC;IACzCF,YAA8BE;IAE9B,qBACE,MAACA,MAAMC,IAAI;;0BACT,KAACD,MAAME,KAAK;0BACZ,KAACF,MAAMG,IAAI;0BACX,KAACH,MAAMI,KAAK;;;AAGlB,EAAE"}

package/lib/components/AlphaSlider/useAlphaSlider.js

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

package/lib/components/AlphaSlider/useAlphaSlider.js.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;AAGA,SAASA,yBAAyB,EAAEC,KAAK,EAAEC,IAAI,QAAQ,4BAA4B;AAOnF,SAASC,4BAA4B,QAAQ,2BAAwB;AACrE,SAASC,mCAAmC,QAAQ,gCAA6B;AAEjF;;;;;;;;CAQC,GACD,OAAO,MAAMC,0BAA0B,CACrCC,OACAC;IAEA,MAAMC,mBAAmBJ,oCAAoCK,CAAAA,MAAOA,IAAIC,KAAK;IAC7E,MAAM,EAAEA,QAAQF,gBAAgB,EAAE,GAAGG,WAAW,GAAGL;IAEnD,OAAO;QACL,GAAGM,4BAA4BD,WAAWJ,IAAI;QAC9CG;IACF;AACF,EAAE;AAEF,OAAO,MAAME,8BAA8B,CACzCN,OACAC;IAEA,MAAMM,cAAcb,0BAA0B;QAC5CM;QACAQ,oBAAoB;QACpBC,mBAAmB;YAAC;YAAY;SAAQ;IAC1C;IAEA,MAAM,EACJC,QAAQ,EACR,QAAQ;IACRC,IAAI,EACJC,KAAK,EACLC,IAAI,EACJC,KAAK,EACN,GAAGd;IAEJ,MAAMe,QAA8B;QAClCL;QACAM,YAAY;YACVJ,OAAO;YACPC,MAAM;YACNF,MAAM;YACNG,OAAO;QACT;QACAH,MAAMf,KAAKqB,MAAM,CAACN,MAAM;YACtBO,cAAcX,YAAYI,IAAI;YAC9BQ,aAAa;QACf;QACAP,OAAOhB,KAAKqB,MAAM,CAACL,OAAO;YACxBM,cAAc;gBACZE,IAAIzB,MAAM,WAAWK,MAAMoB,EAAE;gBAC7BnB;gBACA,GAAGM,YAAYc,OAAO;gBACtBC,MAAM;YACR;YACAH,aAAa;QACf;QACAN,MAAMjB,KAAKqB,MAAM,CAACJ,MAAM;YAAEM,aAAa;QAAM;QAC7CL,OAAOlB,KAAKqB,MAAM,CAACH,OAAO;YAAEK,aAAa;QAAM;IACjD;IAEAtB,6BAA6BkB,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;AAGA,SAASA,yBAAyB,EAAEC,KAAK,EAAEC,IAAI,QAAQ,4BAA4B;AAOnF,SAASC,4BAA4B,QAAQ,2BAAwB;AACrE,SAASC,mCAAmC,QAAQ,gCAA6B;AAEjF;;;;;;;;CAQC,GACD,OAAO,MAAMC,0BAA0B,CACrCC,OACAC;IAEA,MAAMC,mBAAmBJ,oCAAoCK,CAAAA,MAAOA,IAAIC,KAAK;IAC7E,MAAM,EAAEA,QAAQF,gBAAgB,EAAE,GAAGG,WAAW,GAAGL;IAEnD,OAAO;QACL,GAAGM,4BAA4BD,WAAWJ,IAAI;QAC9CG;IACF;AACF,EAAE;AAEF,OAAO,MAAME,8BAA8B,CACzCN,OACAC;IAEA,MAAMM,cAAcb,0BAA0B;QAC5CM;QACAQ,oBAAoB;QACpBC,mBAAmB;YAAC;YAAY;SAAQ;IAC1C;IAEA,MAAM,EACJC,QAAQ,EACR,QAAQ;IACRC,IAAI,EACJC,KAAK,EACLC,IAAI,EACJC,KAAK,EACN,GAAGd;IAEJ,MAAMe,QAA8B;QAClCL;QACAM,YAAY;YACVJ,OAAO;YACPC,MAAM;YACNF,MAAM;YACNG,OAAO;QACT;QACAH,MAAMf,KAAKqB,MAAM,CAACN,MAAM;YACtBO,cAAcX,YAAYI,IAAI;YAC9BQ,aAAa;QACf;QACAP,OAAOhB,KAAKqB,MAAM,CAACL,OAAO;YACxBM,cAAc;gBACZE,IAAIzB,MAAM,WAAWK,MAAMoB,EAAE;gBAC7BnB;gBACA,oBAAoBS,WAAW,aAAa;gBAC5C,GAAGH,YAAYc,OAAO;gBACtBC,MAAM;YACR;YACAH,aAAa;QACf;QACAN,MAAMjB,KAAKqB,MAAM,CAACJ,MAAM;YAAEM,aAAa;QAAM;QAC7CL,OAAOlB,KAAKqB,MAAM,CAACH,OAAO;YAAEK,aAAa;QAAM;IACjD;IAEAtB,6BAA6BkB,OAAOf;IAEpC,OAAOe;AACT,EAAE"}

package/lib/components/AlphaSlider/useAlphaSliderState.js

@@ -1,36 +1,35 @@
 'use client';
-import { clamp, useControllableState, useEventCallback } from "@fluentui/react-utilities";
+import { clamp, getPercentInRange, useControllableState, useEventCallback } from "@fluentui/react-utilities";
 import { useFluent_unstable as useFluent } from "@fluentui/react-shared-contexts";
 import { alphaSliderCSSVars } from "./AlphaSlider.constants.js";
 import { useColorPickerContextValue_unstable } from "../../contexts/colorPicker.js";
 import { MIN, MAX } from "../../utils/constants.js";
-import { getPercent } from "../../utils/getPercent.js";
-import { adjustToTransparency, calculateTransparencyValue, getSliderDirection } from "./alphaSliderUtils.js";
+import { adjustToTransparency, getSliderDirection } from "./alphaSliderUtils.js";
 import { createHsvColor } from "../../utils/createHsvColor.js";
 import { createHslColor } from "../../utils/createHslColor.js";
 export const useAlphaSliderState_unstable = (state, props)=>{
-    var _props_defaultColor;
+    var _currentColor_a;
     const { dir } = useFluent();
     const onChangeFromContext = useColorPickerContextValue_unstable((ctx)=>ctx.requestChange);
     const colorFromContext = useColorPickerContextValue_unstable((ctx)=>ctx.color);
     const { color, onChange = onChangeFromContext, transparency = false, vertical = false } = props;
-    const hsvColor = color || colorFromContext;
-    const hslColor = createHslColor(hsvColor);
-    const [currentValue, setCurrentValue] = useControllableState({
-        defaultState: calculateTransparencyValue(transparency, (_props_defaultColor = props.defaultColor) === null || _props_defaultColor === void 0 ? void 0 : _props_defaultColor.a),
-        state: calculateTransparencyValue(transparency, hsvColor === null || hsvColor === void 0 ? void 0 : hsvColor.a),
-        initialState: adjustToTransparency(100, transparency)
+    const [currentColor, setCurrentColor] = useControllableState({
+        defaultState: props.defaultColor,
+        state: color || colorFromContext,
+        initialState: createHsvColor({})
     });
+    const hslColor = createHslColor(currentColor);
+    const currentValue = adjustToTransparency(((_currentColor_a = currentColor.a) !== null && _currentColor_a !== void 0 ? _currentColor_a : 1) * 100, transparency);
     const clampedValue = clamp(currentValue, MIN, MAX);
-    const valuePercent = getPercent(clampedValue, MIN, MAX);
+    const valuePercent = getPercentInRange(clampedValue, MIN, MAX);
     const inputOnChange = state.input.onChange;
     const _onChange = useEventCallback((event)=>{
         const newValue = adjustToTransparency(Number(event.target.value), transparency);
         const newColor = 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/components/AlphaSlider/useAlphaSliderState.js.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":"AAAA;AAGA,SAASA,KAAK,EAAEC,oBAAoB,EAAEC,gBAAgB,QAAQ,4BAA4B;AAC1F,SAASC,sBAAsBC,SAAS,QAAQ,kCAAkC;AAClF,SAASC,kBAAkB,QAAQ,6BAA0B;AAE7D,SAASC,mCAAmC,QAAQ,gCAA6B;AACjF,SAASC,GAAG,EAAEC,GAAG,QAAQ,2BAAwB;AACjD,SAASC,UAAU,QAAQ,4BAAyB;AACpD,SAASC,oBAAoB,EAAEC,0BAA0B,EAAEC,kBAAkB,QAAQ,wBAAqB;AAC1G,SAASC,cAAc,QAAQ,gCAA6B;AAC5D,SAASC,cAAc,QAAQ,gCAA6B;AAE5D,OAAO,MAAMC,+BAA+B,CAACC,OAAyBC;QASXA;IARzD,MAAM,EAAEC,GAAG,EAAE,GAAGd;IAChB,MAAMe,sBAAsBb,oCAAoCc,CAAAA,MAAOA,IAAIC,aAAa;IACxF,MAAMC,mBAAmBhB,oCAAoCc,CAAAA,MAAOA,IAAIG,KAAK;IAC7E,MAAM,EAAEA,KAAK,EAAEC,WAAWL,mBAAmB,EAAEM,eAAe,KAAK,EAAEC,WAAW,KAAK,EAAE,GAAGT;IAC1F,MAAMU,WAAWJ,SAASD;IAC1B,MAAMM,WAAWd,eAAea;IAEhC,MAAM,CAACE,cAAcC,gBAAgB,GAAG7B,qBAAqB;QAC3D8B,cAAcpB,2BAA2Bc,eAAcR,sBAAAA,MAAMe,YAAY,cAAlBf,0CAAAA,oBAAoBgB,CAAC;QAC5EjB,OAAOL,2BAA2Bc,cAAcE,qBAAAA,+BAAAA,SAAUM,CAAC;QAC3DC,cAAcxB,qBAAqB,KAAKe;IAC1C;IAEA,MAAMU,eAAenC,MAAM6B,cAActB,KAAKC;IAC9C,MAAM4B,eAAe3B,WAAW0B,cAAc5B,KAAKC;IAEnD,MAAM6B,gBAAgBrB,MAAMsB,KAAK,CAACd,QAAQ;IAE1C,MAAMe,YAAwDrC,iBAAiBsC,CAAAA;QAC7E,MAAMC,WAAW/B,qBAAqBgC,OAAOF,MAAMG,MAAM,CAACC,KAAK,GAAGnB;QAClE,MAAMoB,WAAWhC,eAAe;YAAE,GAAGc,QAAQ;YAAEM,GAAGQ,WAAW;QAAI;QACjEX,gBAAgBW;QAChBJ,0BAAAA,oCAAAA,cAAgBG;QAChBhB,qBAAAA,+BAAAA,SAAWgB,OAAO;YAAEM,MAAM;YAAUN;YAAOjB,OAAOsB;QAAS;IAC7D;IAEA,MAAME,kBAAkBnC,mBAAmBM,KAAKQ,UAAUD;IAE1D,MAAMuB,gBAAgB;QACpB,CAAC3C,mBAAmB4C,kBAAkB,CAAC,EAAEF;QACzC,CAAC1C,mBAAmB6C,iBAAiB,CAAC,EAAE,GAAGd,aAAa,CAAC,CAAC;QAC1D,CAAC/B,mBAAmB8C,aAAa,CAAC,EAAE,CAAC,KAAK,EAAEvB,SAASwB,CAAC,CAAC,EAAE,EAAExB,SAASyB,CAAC,GAAG,IAAI,GAAG,EAAEzB,SAAS0B,CAAC,GAAG,IAAI,GAAG,EACnG1B,SAASK,CAAC,CACX,CAAC,CAAC;QACH,CAAC5B,mBAAmBkD,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE3B,SAASwB,CAAC,CAAC,EAAE,EAAExB,SAASyB,CAAC,GAAG,IAAI,GAAG,EAAEzB,SAAS0B,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"}
+{"version":3,"sources":["../../../src/components/AlphaSlider/useAlphaSliderState.ts"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport { clamp, getPercentInRange, 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 { 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 = getPercentInRange(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","getPercentInRange","useControllableState","useEventCallback","useFluent_unstable","useFluent","alphaSliderCSSVars","useColorPickerContextValue_unstable","MIN","MAX","adjustToTransparency","getSliderDirection","createHsvColor","createHslColor","useAlphaSliderState_unstable","state","props","currentColor","dir","onChangeFromContext","ctx","requestChange","colorFromContext","color","onChange","transparency","vertical","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;AAGA,SAASA,KAAK,EAAEC,iBAAiB,EAAEC,oBAAoB,EAAEC,gBAAgB,QAAQ,4BAA4B;AAC7G,SAASC,sBAAsBC,SAAS,QAAQ,kCAAkC;AAClF,SAASC,kBAAkB,QAAQ,6BAA0B;AAE7D,SAASC,mCAAmC,QAAQ,gCAA6B;AACjF,SAASC,GAAG,EAAEC,GAAG,QAAQ,2BAAwB;AACjD,SAASC,oBAAoB,EAAEC,kBAAkB,QAAQ,wBAAqB;AAC9E,SAASC,cAAc,QAAQ,gCAA6B;AAC5D,SAASC,cAAc,QAAQ,gCAA6B;AAG5D,OAAO,MAAMC,+BAA+B,CAACC,OAAyBC;QAWzBC;IAV3C,MAAM,EAAEC,GAAG,EAAE,GAAGb;IAChB,MAAMc,sBAAsBZ,oCAAoCa,CAAAA,MAAOA,IAAIC,aAAa;IACxF,MAAMC,mBAAmBf,oCAAoCa,CAAAA,MAAOA,IAAIG,KAAK;IAC7E,MAAM,EAAEA,KAAK,EAAEC,WAAWL,mBAAmB,EAAEM,eAAe,KAAK,EAAEC,WAAW,KAAK,EAAE,GAAGV;IAC1F,MAAM,CAACC,cAAcU,gBAAgB,GAAGzB,qBAA+B;QACrE0B,cAAcZ,MAAMa,YAAY;QAChCd,OAAOQ,SAASD;QAChBQ,cAAclB,eAAe,CAAC;IAChC;IACA,MAAMmB,WAAWlB,eAAeI;IAChC,MAAMe,eAAetB,qBAAqB,EAACO,kBAAAA,aAAagB,CAAC,cAAdhB,6BAAAA,kBAAkB,KAAK,KAAKQ;IAEvE,MAAMS,eAAelC,MAAMgC,cAAcxB,KAAKC;IAC9C,MAAM0B,eAAelC,kBAAkBiC,cAAc1B,KAAKC;IAE1D,MAAM2B,gBAAgBrB,MAAMsB,KAAK,CAACb,QAAQ;IAE1C,MAAMc,YAAwDnC,iBAAiBoC,CAAAA;QAC7E,MAAMC,WAAW9B,qBAAqB+B,OAAOF,MAAMG,MAAM,CAACC,KAAK,GAAGlB;QAClE,MAAMmB,WAAWhC,eAAe;YAAE,GAAGK,YAAY;YAAEgB,GAAGO,WAAW;QAAI;QACrEb,gBAAgBiB;QAChBR,0BAAAA,oCAAAA,cAAgBG;QAChBf,qBAAAA,+BAAAA,SAAWe,OAAO;YAAEM,MAAM;YAAUN;YAAOhB,OAAOqB;QAAS;IAC7D;IAEA,MAAME,kBAAkBnC,mBAAmBO,KAAKQ,UAAUD;IAE1D,MAAMsB,gBAAgB;QACpB,CAACzC,mBAAmB0C,kBAAkB,CAAC,EAAEF;QACzC,CAACxC,mBAAmB2C,iBAAiB,CAAC,EAAE,GAAGd,aAAa,CAAC,CAAC;QAC1D,CAAC7B,mBAAmB4C,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,CAAC3B,mBAAmBgD,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,CAACb,QAAQ,GAAGc;IAEvB,OAAOvB;AACT,EAAE"}

package/lib/components/AlphaSlider/useAlphaSliderStyles.styles.css.js

@@ -0,0 +1,22 @@
+'use client';
+import { clsx } from "clsx";
+import { useColorSliderStyles_unstable } from "../ColorSlider/useColorSliderStyles.styles.css.js";
+import styles from "./AlphaSlider.module.css";
+export const alphaSliderClassNames = {
+    root: 'fui-AlphaSlider',
+    rail: 'fui-AlphaSlider__rail',
+    thumb: 'fui-AlphaSlider__thumb',
+    input: 'fui-AlphaSlider__input'
+};
+export const useAlphaSliderStyles_unstable = (state)=>{
+    // eslint-disable-next-line react-hooks/immutability
+    state.root.className = clsx(alphaSliderClassNames.root, state.vertical ? styles.vertical : styles.horizontal, state.root.className);
+    // eslint-disable-next-line react-hooks/immutability
+    state.input.className = clsx(alphaSliderClassNames.input, state.input.className);
+    // eslint-disable-next-line react-hooks/immutability
+    state.rail.className = clsx(alphaSliderClassNames.rail, styles.rail, state.rail.className);
+    // eslint-disable-next-line react-hooks/immutability
+    state.thumb.className = clsx(alphaSliderClassNames.thumb, styles.thumb, state.thumb.className);
+    useColorSliderStyles_unstable(state);
+    return state;
+};

package/lib/components/AlphaSlider/useAlphaSliderStyles.styles.css.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/AlphaSlider/useAlphaSliderStyles.styles.css.ts"],"sourcesContent":["'use client';\n\nimport { clsx } from 'clsx';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { AlphaSliderSlots, AlphaSliderState } from './AlphaSlider.types';\nimport { useColorSliderStyles_unstable } from '../ColorSlider/useColorSliderStyles.styles.css';\nimport styles from './AlphaSlider.module.css';\n\nexport const alphaSliderClassNames: SlotClassNames<AlphaSliderSlots> = {\n  root: 'fui-AlphaSlider',\n  rail: 'fui-AlphaSlider__rail',\n  thumb: 'fui-AlphaSlider__thumb',\n  input: 'fui-AlphaSlider__input',\n};\n\nexport const useAlphaSliderStyles_unstable = (state: AlphaSliderState): AlphaSliderState => {\n  // eslint-disable-next-line react-hooks/immutability\n  state.root.className = clsx(\n    alphaSliderClassNames.root,\n    state.vertical ? styles.vertical : styles.horizontal,\n    state.root.className,\n  );\n  // eslint-disable-next-line react-hooks/immutability\n  state.input.className = clsx(alphaSliderClassNames.input, state.input.className);\n  // eslint-disable-next-line react-hooks/immutability\n  state.rail.className = clsx(alphaSliderClassNames.rail, styles.rail, state.rail.className);\n  // eslint-disable-next-line react-hooks/immutability\n  state.thumb.className = clsx(alphaSliderClassNames.thumb, styles.thumb, state.thumb.className);\n  useColorSliderStyles_unstable(state);\n  return state;\n};\n"],"names":["clsx","useColorSliderStyles_unstable","styles","alphaSliderClassNames","root","rail","thumb","input","useAlphaSliderStyles_unstable","state","className","vertical","horizontal"],"mappings":"AAAA;AAEA,SAASA,IAAI,QAAQ,OAAO;AAG5B,SAASC,6BAA6B,QAAQ,oDAAiD;AAC/F,OAAOC,YAAY,2BAA2B;AAE9C,OAAO,MAAMC,wBAA0D;IACrEC,MAAM;IACNC,MAAM;IACNC,OAAO;IACPC,OAAO;AACT,EAAE;AAEF,OAAO,MAAMC,gCAAgC,CAACC;IAC5C,oDAAoD;IACpDA,MAAML,IAAI,CAACM,SAAS,GAAGV,KACrBG,sBAAsBC,IAAI,EAC1BK,MAAME,QAAQ,GAAGT,OAAOS,QAAQ,GAAGT,OAAOU,UAAU,EACpDH,MAAML,IAAI,CAACM,SAAS;IAEtB,oDAAoD;IACpDD,MAAMF,KAAK,CAACG,SAAS,GAAGV,KAAKG,sBAAsBI,KAAK,EAAEE,MAAMF,KAAK,CAACG,SAAS;IAC/E,oDAAoD;IACpDD,MAAMJ,IAAI,CAACK,SAAS,GAAGV,KAAKG,sBAAsBE,IAAI,EAAEH,OAAOG,IAAI,EAAEI,MAAMJ,IAAI,CAACK,SAAS;IACzF,oDAAoD;IACpDD,MAAMH,KAAK,CAACI,SAAS,GAAGV,KAAKG,sBAAsBG,KAAK,EAAEJ,OAAOI,KAAK,EAAEG,MAAMH,KAAK,CAACI,SAAS;IAC7FT,8BAA8BQ;IAC9B,OAAOA;AACT,EAAE"}

package/lib/components/AlphaSlider/useAlphaSliderStyles.styles.raw.css.js

@@ -0,0 +1,22 @@
+'use client';
+import { clsx } from "clsx";
+import { useColorSliderStyles_unstable } from "../ColorSlider/useColorSliderStyles.styles.css.js";
+import styles from "./AlphaSlider.module.css";
+export const alphaSliderClassNames = {
+    root: 'fui-AlphaSlider',
+    rail: 'fui-AlphaSlider__rail',
+    thumb: 'fui-AlphaSlider__thumb',
+    input: 'fui-AlphaSlider__input'
+};
+export const useAlphaSliderStyles_unstable = (state)=>{
+    // eslint-disable-next-line react-hooks/immutability
+    state.root.className = clsx(alphaSliderClassNames.root, state.vertical ? styles.vertical : styles.horizontal, state.root.className);
+    // eslint-disable-next-line react-hooks/immutability
+    state.input.className = clsx(alphaSliderClassNames.input, state.input.className);
+    // eslint-disable-next-line react-hooks/immutability
+    state.rail.className = clsx(alphaSliderClassNames.rail, styles.rail, state.rail.className);
+    // eslint-disable-next-line react-hooks/immutability
+    state.thumb.className = clsx(alphaSliderClassNames.thumb, styles.thumb, state.thumb.className);
+    useColorSliderStyles_unstable(state);
+    return state;
+};

package/lib/components/AlphaSlider/useAlphaSliderStyles.styles.raw.css.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/AlphaSlider/useAlphaSliderStyles.styles.css.ts"],"sourcesContent":["'use client';\n\nimport { clsx } from 'clsx';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { AlphaSliderSlots, AlphaSliderState } from './AlphaSlider.types';\nimport { useColorSliderStyles_unstable } from '../ColorSlider/useColorSliderStyles.styles.css';\nimport styles from './AlphaSlider.module.css';\n\nexport const alphaSliderClassNames: SlotClassNames<AlphaSliderSlots> = {\n  root: 'fui-AlphaSlider',\n  rail: 'fui-AlphaSlider__rail',\n  thumb: 'fui-AlphaSlider__thumb',\n  input: 'fui-AlphaSlider__input',\n};\n\nexport const useAlphaSliderStyles_unstable = (state: AlphaSliderState): AlphaSliderState => {\n  // eslint-disable-next-line react-hooks/immutability\n  state.root.className = clsx(\n    alphaSliderClassNames.root,\n    state.vertical ? styles.vertical : styles.horizontal,\n    state.root.className,\n  );\n  // eslint-disable-next-line react-hooks/immutability\n  state.input.className = clsx(alphaSliderClassNames.input, state.input.className);\n  // eslint-disable-next-line react-hooks/immutability\n  state.rail.className = clsx(alphaSliderClassNames.rail, styles.rail, state.rail.className);\n  // eslint-disable-next-line react-hooks/immutability\n  state.thumb.className = clsx(alphaSliderClassNames.thumb, styles.thumb, state.thumb.className);\n  useColorSliderStyles_unstable(state);\n  return state;\n};\n"],"names":["clsx","useColorSliderStyles_unstable","styles","alphaSliderClassNames","root","rail","thumb","input","useAlphaSliderStyles_unstable","state","className","vertical","horizontal"],"mappings":"AAAA;AAEA,SAASA,IAAI,QAAQ,OAAO;AAG5B,SAASC,6BAA6B,QAAQ,oDAAiD;AAC/F,OAAOC,YAAY,2BAA2B;AAE9C,OAAO,MAAMC,wBAA0D;IACrEC,MAAM;IACNC,MAAM;IACNC,OAAO;IACPC,OAAO;AACT,EAAE;AAEF,OAAO,MAAMC,gCAAgC,CAACC;IAC5C,oDAAoD;IACpDA,MAAML,IAAI,CAACM,SAAS,GAAGV,KACrBG,sBAAsBC,IAAI,EAC1BK,MAAME,QAAQ,GAAGT,OAAOS,QAAQ,GAAGT,OAAOU,UAAU,EACpDH,MAAML,IAAI,CAACM,SAAS;IAEtB,oDAAoD;IACpDD,MAAMF,KAAK,CAACG,SAAS,GAAGV,KAAKG,sBAAsBI,KAAK,EAAEE,MAAMF,KAAK,CAACG,SAAS;IAC/E,oDAAoD;IACpDD,MAAMJ,IAAI,CAACK,SAAS,GAAGV,KAAKG,sBAAsBE,IAAI,EAAEH,OAAOG,IAAI,EAAEI,MAAMJ,IAAI,CAACK,SAAS;IACzF,oDAAoD;IACpDD,MAAMH,KAAK,CAACI,SAAS,GAAGV,KAAKG,sBAAsBG,KAAK,EAAEJ,OAAOI,KAAK,EAAEG,MAAMH,KAAK,CAACI,SAAS;IAC7FT,8BAA8BQ;IAC9B,OAAOA;AACT,EAAE"}

package/lib/components/AlphaSlider/useAlphaSliderStyles.styles.raw.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/AlphaSlider/useAlphaSliderStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { useColorSliderStyles_unstable } from '../ColorSlider/useColorSliderStyles.styles';\nimport type { AlphaSliderSlots, AlphaSliderState } from './AlphaSlider.types';\nimport { alphaSliderCSSVars } from './AlphaSlider.constants';\n\nconst TRANSPARENT_IMAGE_URL = 'https://fabricweb.azureedge.net/fabric-website/assets/images/transparent-pattern.png';\n\nexport const alphaSliderClassNames: SlotClassNames<AlphaSliderSlots> = {\n  root: 'fui-AlphaSlider',\n  rail: 'fui-AlphaSlider__rail',\n  thumb: 'fui-AlphaSlider__thumb',\n  input: 'fui-AlphaSlider__input',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  rail: {\n    border: `1px solid ${tokens.colorNeutralStroke1}`,\n    backgroundImage: `linear-gradient(var(${alphaSliderCSSVars.sliderDirectionVar}), transparent, var(${alphaSliderCSSVars.railColorVar})), url(${TRANSPARENT_IMAGE_URL})`,\n  },\n});\n\n/**\n * Styles for the thumb slot\n */\nconst useThumbStyles = makeStyles({\n  thumb: {\n    backgroundColor: tokens.colorNeutralBackground1,\n    '::before': {\n      backgroundColor: `var(${alphaSliderCSSVars.thumbColorVar})`,\n    },\n  },\n  horizontal: {\n    transform: 'translateX(-50%)',\n    left: `var(${alphaSliderCSSVars.sliderProgressVar})`,\n  },\n  vertical: {\n    transform: 'translateY(50%)',\n    bottom: `var(${alphaSliderCSSVars.sliderProgressVar})`,\n  },\n});\n\n/**\n * Apply styling to the AlphaSlider slots based on the state\n */\nexport const useAlphaSliderStyles_unstable = (state: AlphaSliderState): AlphaSliderState => {\n  const styles = useStyles();\n  const thumbStyles = useThumbStyles();\n  // eslint-disable-next-line react-hooks/immutability\n  state.root.className = mergeClasses(alphaSliderClassNames.root, state.root.className);\n  // eslint-disable-next-line react-hooks/immutability\n  state.input.className = mergeClasses(alphaSliderClassNames.input, state.input.className);\n  // eslint-disable-next-line react-hooks/immutability\n  state.rail.className = mergeClasses(alphaSliderClassNames.rail, styles.rail, state.rail.className);\n\n  // eslint-disable-next-line react-hooks/immutability\n  state.thumb.className = mergeClasses(\n    alphaSliderClassNames.thumb,\n    thumbStyles.thumb,\n    state.vertical ? thumbStyles.vertical : thumbStyles.horizontal,\n    state.thumb.className,\n  );\n\n  // eslint-disable-next-line react-hooks/immutability\n  state.thumb.className = mergeClasses(\n    alphaSliderClassNames.thumb,\n    thumbStyles.thumb,\n    state.vertical ? thumbStyles.vertical : thumbStyles.horizontal,\n    state.thumb.className,\n  );\n\n  useColorSliderStyles_unstable(state);\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","tokens","useColorSliderStyles_unstable","alphaSliderCSSVars","TRANSPARENT_IMAGE_URL","alphaSliderClassNames","root","rail","thumb","input","useStyles","border","colorNeutralStroke1","backgroundImage","sliderDirectionVar","railColorVar","useThumbStyles","backgroundColor","colorNeutralBackground1","thumbColorVar","horizontal","transform","left","sliderProgressVar","vertical","bottom","useAlphaSliderStyles_unstable","state","styles","thumbStyles","className"],"mappings":"AAAA;AAEA,SAASA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAC1D,SAASC,MAAM,QAAQ,wBAAwB;AAE/C,SAASC,6BAA6B,QAAQ,gDAA6C;AAE3F,SAASC,kBAAkB,QAAQ,6BAA0B;AAE7D,MAAMC,wBAAwB;AAE9B,OAAO,MAAMC,wBAA0D;IACrEC,MAAM;IACNC,MAAM;IACNC,OAAO;IACPC,OAAO;AACT,EAAE;AAEF;;CAEC,GACD,MAAMC,YAAYX,WAAW;IAC3BQ,MAAM;QACJI,QAAQ,CAAC,UAAU,EAAEV,OAAOW,mBAAmB,EAAE;QACjDC,iBAAiB,CAAC,oBAAoB,EAAEV,mBAAmBW,kBAAkB,CAAC,oBAAoB,EAAEX,mBAAmBY,YAAY,CAAC,QAAQ,EAAEX,sBAAsB,CAAC,CAAC;IACxK;AACF;AAEA;;CAEC,GACD,MAAMY,iBAAiBjB,WAAW;IAChCS,OAAO;QACLS,iBAAiBhB,OAAOiB,uBAAuB;QAC/C,YAAY;YACVD,iBAAiB,CAAC,IAAI,EAAEd,mBAAmBgB,aAAa,CAAC,CAAC,CAAC;QAC7D;IACF;IACAC,YAAY;QACVC,WAAW;QACXC,MAAM,CAAC,IAAI,EAAEnB,mBAAmBoB,iBAAiB,CAAC,CAAC,CAAC;IACtD;IACAC,UAAU;QACRH,WAAW;QACXI,QAAQ,CAAC,IAAI,EAAEtB,mBAAmBoB,iBAAiB,CAAC,CAAC,CAAC;IACxD;AACF;AAEA;;CAEC,GACD,OAAO,MAAMG,gCAAgC,CAACC;IAC5C,MAAMC,SAASlB;IACf,MAAMmB,cAAcb;IACpB,oDAAoD;IACpDW,MAAMrB,IAAI,CAACwB,SAAS,GAAG9B,aAAaK,sBAAsBC,IAAI,EAAEqB,MAAMrB,IAAI,CAACwB,SAAS;IACpF,oDAAoD;IACpDH,MAAMlB,KAAK,CAACqB,SAAS,GAAG9B,aAAaK,sBAAsBI,KAAK,EAAEkB,MAAMlB,KAAK,CAACqB,SAAS;IACvF,oDAAoD;IACpDH,MAAMpB,IAAI,CAACuB,SAAS,GAAG9B,aAAaK,sBAAsBE,IAAI,EAAEqB,OAAOrB,IAAI,EAAEoB,MAAMpB,IAAI,CAACuB,SAAS;IAEjG,oDAAoD;IACpDH,MAAMnB,KAAK,CAACsB,SAAS,GAAG9B,aACtBK,sBAAsBG,KAAK,EAC3BqB,YAAYrB,KAAK,EACjBmB,MAAMH,QAAQ,GAAGK,YAAYL,QAAQ,GAAGK,YAAYT,UAAU,EAC9DO,MAAMnB,KAAK,CAACsB,SAAS;IAGvB,oDAAoD;IACpDH,MAAMnB,KAAK,CAACsB,SAAS,GAAG9B,aACtBK,sBAAsBG,KAAK,EAC3BqB,YAAYrB,KAAK,EACjBmB,MAAMH,QAAQ,GAAGK,YAAYL,QAAQ,GAAGK,YAAYT,UAAU,EAC9DO,MAAMnB,KAAK,CAACsB,SAAS;IAGvB5B,8BAA8ByB;IAC9B,OAAOA;AACT,EAAE"}
+{"version":3,"sources":["../../../src/components/AlphaSlider/useAlphaSliderStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { useColorSliderStyles_unstable } from '../ColorSlider/useColorSliderStyles.styles';\nimport type { AlphaSliderSlots, AlphaSliderState } from './AlphaSlider.types';\nimport { alphaSliderCSSVars } from './AlphaSlider.constants';\n\nconst TRANSPARENT_IMAGE_URL = 'https://fabricweb.azureedge.net/fabric-website/assets/images/transparent-pattern.png';\n\nexport const alphaSliderClassNames: SlotClassNames<AlphaSliderSlots> = {\n  root: 'fui-AlphaSlider',\n  rail: 'fui-AlphaSlider__rail',\n  thumb: 'fui-AlphaSlider__thumb',\n  input: 'fui-AlphaSlider__input',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  rail: {\n    border: `1px solid ${tokens.colorNeutralStroke1}`,\n    backgroundImage: `linear-gradient(var(${alphaSliderCSSVars.sliderDirectionVar}), transparent, var(${alphaSliderCSSVars.railColorVar})), url(${TRANSPARENT_IMAGE_URL})`,\n  },\n});\n\n/**\n * Styles for the thumb slot\n */\nconst useThumbStyles = makeStyles({\n  thumb: {\n    backgroundColor: tokens.colorNeutralBackground1,\n    '::before': {\n      backgroundColor: `var(${alphaSliderCSSVars.thumbColorVar})`,\n    },\n  },\n  horizontal: {\n    transform: 'translateX(-50%)',\n    left: `var(${alphaSliderCSSVars.sliderProgressVar})`,\n  },\n  vertical: {\n    transform: 'translateY(50%)',\n    bottom: `var(${alphaSliderCSSVars.sliderProgressVar})`,\n  },\n});\n\n/**\n * Apply styling to the AlphaSlider slots based on the state\n */\nexport const useAlphaSliderStyles_unstable = (state: AlphaSliderState): AlphaSliderState => {\n  const styles = useStyles();\n  const thumbStyles = useThumbStyles();\n  // eslint-disable-next-line react-hooks/immutability\n  state.root.className = mergeClasses(alphaSliderClassNames.root, state.root.className);\n  // eslint-disable-next-line react-hooks/immutability\n  state.input.className = mergeClasses(alphaSliderClassNames.input, state.input.className);\n  // eslint-disable-next-line react-hooks/immutability\n  state.rail.className = mergeClasses(alphaSliderClassNames.rail, styles.rail, state.rail.className);\n\n  // eslint-disable-next-line react-hooks/immutability\n  state.thumb.className = mergeClasses(\n    alphaSliderClassNames.thumb,\n    thumbStyles.thumb,\n    state.vertical ? thumbStyles.vertical : thumbStyles.horizontal,\n    state.thumb.className,\n  );\n\n  // eslint-disable-next-line react-hooks/immutability\n  state.thumb.className = mergeClasses(\n    alphaSliderClassNames.thumb,\n    thumbStyles.thumb,\n    state.vertical ? thumbStyles.vertical : thumbStyles.horizontal,\n    state.thumb.className,\n  );\n\n  useColorSliderStyles_unstable(state);\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","tokens","useColorSliderStyles_unstable","alphaSliderCSSVars","TRANSPARENT_IMAGE_URL","alphaSliderClassNames","root","rail","thumb","input","useStyles","border","colorNeutralStroke1","backgroundImage","sliderDirectionVar","railColorVar","useThumbStyles","backgroundColor","colorNeutralBackground1","thumbColorVar","horizontal","transform","left","sliderProgressVar","vertical","bottom","useAlphaSliderStyles_unstable","state","styles","thumbStyles","className"],"mappings":"AAAA;AAEA,SAASA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAC1D,SAASC,MAAM,QAAQ,wBAAwB;AAE/C,SAASC,6BAA6B,QAAQ,gDAA6C;AAE3F,SAASC,kBAAkB,QAAQ,6BAA0B;AAE7D,MAAMC,wBAAwB;AAE9B,OAAO,MAAMC,wBAA0D;IACrEC,MAAM;IACNC,MAAM;IACNC,OAAO;IACPC,OAAO;AACT,EAAE;AAEF;;CAEC,GACD,MAAMC,YAAYX,WAAW;IAC3BQ,MAAM;QACJI,QAAQ,CAAC,UAAU,EAAEV,OAAOW,mBAAmB,EAAE;QACjDC,iBAAiB,CAAC,oBAAoB,EAAEV,mBAAmBW,kBAAkB,CAAC,oBAAoB,EAAEX,mBAAmBY,YAAY,CAAC,QAAQ,EAAEX,sBAAsB,CAAC,CAAC;IACxK;AACF;AAEA;;CAEC,GACD,MAAMY,iBAAiBjB,WAAW;IAChCS,OAAO;QACLS,iBAAiBhB,OAAOiB,uBAAuB;QAC/C,YAAY;YACVD,iBAAiB,CAAC,IAAI,EAAEd,mBAAmBgB,aAAa,CAAC,CAAC,CAAC;QAC7D;IACF;IACAC,YAAY;QACVC,WAAW;QACXC,MAAM,CAAC,IAAI,EAAEnB,mBAAmBoB,iBAAiB,CAAC,CAAC,CAAC;IACtD;IACAC,UAAU;QACRH,WAAW;QACXI,QAAQ,CAAC,IAAI,EAAEtB,mBAAmBoB,iBAAiB,CAAC,CAAC,CAAC;IACxD;AACF;AAEA;;CAEC,GACD,OAAO,MAAMG,gCAAgC,CAACC;IAC5C,MAAMC,SAASlB;IACf,MAAMmB,cAAcb;IACpB,oDAAoD;IACpDW,MAAMrB,IAAI,CAACwB,SAAS,GAAG9B,aAAaK,sBAAsBC,IAAI,EAAEqB,MAAMrB,IAAI,CAACwB,SAAS;IACpF,oDAAoD;IACpDH,MAAMlB,KAAK,CAACqB,SAAS,GAAG9B,aAAaK,sBAAsBI,KAAK,EAAEkB,MAAMlB,KAAK,CAACqB,SAAS;IACvF,oDAAoD;IACpDH,MAAMpB,IAAI,CAACuB,SAAS,GAAG9B,aAAaK,sBAAsBE,IAAI,EAAEqB,OAAOrB,IAAI,EAAEoB,MAAMpB,IAAI,CAACuB,SAAS;IAEjG,oDAAoD;IACpDH,MAAMnB,KAAK,CAACsB,SAAS,GAAG9B,aACtBK,sBAAsBG,KAAK,EAC3BqB,YAAYrB,KAAK,EACjBmB,MAAMH,QAAQ,GAAGK,YAAYL,QAAQ,GAAGK,YAAYT,UAAU,EAC9DO,MAAMnB,KAAK,CAACsB,SAAS;IAGvB,oDAAoD;IACpDH,MAAMnB,KAAK,CAACsB,SAAS,GAAG9B,aACtBK,sBAAsBG,KAAK,EAC3BqB,YAAYrB,KAAK,EACjBmB,MAAMH,QAAQ,GAAGK,YAAYL,QAAQ,GAAGK,YAAYT,UAAU,EAC9DO,MAAMnB,KAAK,CAACsB,SAAS;IAGvB5B,8BAA8ByB;IAC9B,OAAOA;AACT,EAAE"}

package/lib/components/ColorArea/ColorArea.constants.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/ColorArea/ColorArea.constants.ts"],"sourcesContent":["export const colorAreaCSSVars = {\n  areaXProgressVar: `--fui-AreaX--progress`,\n  areaYProgressVar: `--fui-AreaY--progress`,\n  thumbColorVar: `--fui-Area__thumb--color`,\n  mainColorVar: `--fui-Area--main-color`,\n};\n"],"names":["colorAreaCSSVars","areaXProgressVar","areaYProgressVar","thumbColorVar","mainColorVar"],"mappings":"AAAA,OAAO,MAAMA,mBAAmB;IAC9BC,kBAAkB,CAAC,qBAAqB,CAAC;IACzCC,kBAAkB,CAAC,qBAAqB,CAAC;IACzCC,eAAe,CAAC,wBAAwB,CAAC;IACzCC,cAAc,CAAC,sBAAsB,CAAC;AACxC,EAAE"}
+{"version":3,"sources":["../../../src/components/ColorArea/ColorArea.constants.ts"],"sourcesContent":["export const colorAreaCSSVars = {\n  areaXProgressVar: `--fui-AreaX--progress`,\n  areaYProgressVar: `--fui-AreaY--progress`,\n  thumbColorVar: `--fui-Area__thumb--color`,\n  mainColorVar: `--fui-Area--main-color`,\n};\n"],"names":["colorAreaCSSVars","areaXProgressVar","areaYProgressVar","thumbColorVar","mainColorVar"],"mappings":"AAAA,OAAO,MAAMA,mBAAmB;IAC9BC,kBAAkB,CAAC,qBAAqB,CAAC;IACzCC,kBAAkB,CAAC,qBAAqB,CAAC;IACzCC,eAAe,CAAC,wBAAwB,CAAC;IACzCC,cAAc,CAAC,sBAAsB,CAAC;AACxC,EAAE"}

package/lib/components/ColorArea/ColorArea.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/ColorArea/ColorArea.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useColorArea_unstable } from './useColorArea';\nimport { renderColorArea_unstable } from './renderColorArea';\nimport { useColorAreaStyles_unstable } from './useColorAreaStyles.styles';\nimport type { ColorAreaProps } from './ColorArea.types';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * ColorArea component\n */\nexport const ColorArea: ForwardRefComponent<ColorAreaProps> = React.forwardRef((props, ref) => {\n  const state = useColorArea_unstable(props, ref);\n\n  useColorAreaStyles_unstable(state);\n  useCustomStyleHook_unstable('useColorAreaStyles_unstable')(state);\n\n  return renderColorArea_unstable(state);\n});\n\nColorArea.displayName = 'ColorArea';\n"],"names":["React","useColorArea_unstable","renderColorArea_unstable","useColorAreaStyles_unstable","useCustomStyleHook_unstable","ColorArea","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,qBAAqB,QAAQ,oBAAiB;AACvD,SAASC,wBAAwB,QAAQ,uBAAoB;AAC7D,SAASC,2BAA2B,QAAQ,iCAA8B;AAE1E,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,0BAAiDL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IACrF,MAAMC,QAAQR,sBAAsBM,OAAOC;IAE3CL,4BAA4BM;IAC5BL,4BAA4B,+BAA+BK;IAE3D,OAAOP,yBAAyBO;AAClC,GAAG;AAEHJ,UAAUK,WAAW,GAAG"}
+{"version":3,"sources":["../../../src/components/ColorArea/ColorArea.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useColorArea_unstable } from './useColorArea';\nimport { renderColorArea_unstable } from './renderColorArea';\nimport { useColorAreaStyles_unstable } from './useColorAreaStyles.styles';\nimport type { ColorAreaProps } from './ColorArea.types';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * ColorArea component\n */\nexport const ColorArea: ForwardRefComponent<ColorAreaProps> = React.forwardRef((props, ref) => {\n  const state = useColorArea_unstable(props, ref);\n\n  useColorAreaStyles_unstable(state);\n  useCustomStyleHook_unstable('useColorAreaStyles_unstable')(state);\n\n  return renderColorArea_unstable(state);\n});\n\nColorArea.displayName = 'ColorArea';\n"],"names":["React","useColorArea_unstable","renderColorArea_unstable","useColorAreaStyles_unstable","useCustomStyleHook_unstable","ColorArea","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,qBAAqB,QAAQ,oBAAiB;AACvD,SAASC,wBAAwB,QAAQ,uBAAoB;AAC7D,SAASC,2BAA2B,QAAQ,iCAA8B;AAE1E,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,0BAAiDL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IACrF,MAAMC,QAAQR,sBAAsBM,OAAOC;IAE3CL,4BAA4BM;IAC5BL,4BAA4B,+BAA+BK;IAE3D,OAAOP,yBAAyBO;AAClC,GAAG;AAEHJ,UAAUK,WAAW,GAAG"}

package/lib/components/ColorArea/ColorArea.module.css

@@ -0,0 +1,101 @@
+/* Hue stops and HSV black/white endpoints describe the color space, not a theme palette. */
+@layer fluentui {
+  .root {
+    position: relative;
+    border: var(--strokeWidthThin) solid var(--colorNeutralStroke1);
+    background: linear-gradient(to bottom, transparent, #000), linear-gradient(to right, #fff, transparent),
+      var(--fui-Area--main-color);
+    forced-color-adjust: none;
+    display: inline-grid;
+    touch-action: none;
+    align-items: start;
+    justify-items: start;
+    --fui-Slider__thumb--size: var(--spacingHorizontalXL);
+    min-width: calc(var(--spacingHorizontalXXXL) * 9 + var(--spacingHorizontalM));
+    min-height: calc(var(--spacingHorizontalXXXL) * 9 + var(--spacingHorizontalM));
+    box-sizing: border-box;
+    margin-bottom: var(--spacingVerticalSNudge);
+  }
+  .thumb {
+    position: absolute;
+    width: var(--fui-Slider__thumb--size);
+    height: var(--fui-Slider__thumb--size);
+    pointer-events: none;
+    outline-style: none;
+    forced-color-adjust: none;
+    border-radius: var(--borderRadiusCircular);
+    border: var(--strokeWidthThin) solid var(--colorNeutralForeground4);
+    box-shadow: var(--shadow4);
+    background-color: var(--fui-Area__thumb--color);
+    transform: translate(-50%, 50%);
+    &:dir(rtl) {
+      transform: translate(50%, 50%);
+    }
+    inset-inline-start: var(--fui-AreaX--progress);
+    bottom: var(--fui-AreaY--progress);
+    &::before {
+      position: absolute;
+      inset: 0px;
+      border-radius: var(--borderRadiusCircular);
+      box-sizing: border-box;
+      content: '';
+      border: var(--strokeWidthThick) solid var(--colorNeutralBackground1);
+    }
+  }
+  .thumb {
+    &:focus {
+      outline-style: none;
+    }
+    &:focus-visible {
+      outline-style: none;
+    }
+    &[data-fui-focus-within]:focus-within {
+      border-top-color: transparent;
+      border-inline-end-color: transparent;
+      border-bottom-color: transparent;
+      border-inline-start-color: transparent;
+      &::after {
+        content: '';
+        position: absolute;
+        pointer-events: none;
+        z-index: 1;
+        border: var(--strokeWidthThick) solid var(--colorStrokeFocus2);
+        border-radius: var(--borderRadiusCircular);
+        top: calc(var(--strokeWidthThick) * -1);
+        inset-inline-end: calc(var(--strokeWidthThick) * -1);
+        bottom: calc(var(--strokeWidthThick) * -1);
+        inset-inline-start: calc(var(--strokeWidthThick) * -1);
+      }
+      @media (forced-colors: active) {
+        &::after {
+          border-top-color: Highlight;
+          border-inline-end-color: Highlight;
+          border-bottom-color: Highlight;
+          border-inline-start-color: Highlight;
+        }
+      }
+    }
+  }
+  .input {
+    overflow: hidden;
+    position: absolute;
+    pointer-events: none;
+    top: 0;
+    inset-inline-start: 0;
+    opacity: 0;
+    padding: 0;
+    margin: 0;
+    width: 100%;
+    height: 100%;
+  }
+  .rounded {
+    border-radius: var(--borderRadiusMedium);
+  }
+  .square {
+    border-radius: var(--borderRadiusNone);
+  }
+  .root:dir(rtl) {
+    background: linear-gradient(to bottom, transparent, #000), linear-gradient(to left, #fff, transparent),
+      var(--fui-Area--main-color);
+  }
+}

package/lib/components/ColorArea/ColorArea.types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/ColorArea/ColorArea.types.ts"],"sourcesContent":["import type * as React from 'react';\nimport type { ComponentState, Slot, EventHandler, EventData, ComponentProps } from '@fluentui/react-utilities';\nimport type { HsvColor } from '../../types/color';\nimport type { ColorPickerProps } from '../ColorPicker/ColorPicker.types';\n\nexport type ColorAreaOnColorChangeData = EventData<'change', React.SyntheticEvent | PointerEvent> & {\n  color: HsvColor;\n};\n\nexport type ColorAreaSlots = {\n  root: NonNullable<Slot<'div'>>;\n  thumb?: NonNullable<Slot<'div'>>;\n  inputX?: NonNullable<Slot<'input'>>;\n  inputY?: NonNullable<Slot<'input'>>;\n};\n\n/**\n * ColorArea Props\n */\nexport type ColorAreaProps = Omit<ComponentProps<Partial<ColorAreaSlots>>, 'color' | 'onChange'> &\n  Pick<ColorPickerProps, 'shape'> & {\n    /**\n     * The current color of the ColorArea.\n     */\n    color?: HsvColor;\n\n    /**\n     * The starting value for an uncontrolled ColorArea.\n     */\n    defaultColor?: HsvColor;\n\n    /**\n     * Triggers a callback when the value has been changed. This will be called on every individual step.\n     */\n    onChange?: EventHandler<ColorAreaOnColorChangeData>;\n  };\n\n/**\n * ColorArea Base Props\n */\nexport type ColorAreaBaseProps = Omit<ColorAreaProps, 'shape'>;\n\n/**\n * State used in rendering ColorArea\n */\nexport type ColorAreaState = ComponentState<Required<ColorAreaSlots>> & Pick<ColorAreaProps, 'color' | 'shape'>;\n\n/**\n * ColorArea Base State\n */\nexport type ColorAreaBaseState = ComponentState<Required<ColorAreaSlots>> & Pick<ColorAreaProps, 'color'>;\n"],"names":[],"mappings":"AA+CA;;CAEC,GACD,WAA0G"}
+{"version":3,"sources":["../../../src/components/ColorArea/ColorArea.types.ts"],"sourcesContent":["import type * as React from 'react';\nimport type { ComponentState, Slot, EventHandler, EventData, ComponentProps } from '@fluentui/react-utilities';\nimport type { HsvColor } from '../../types/color';\nimport type { ColorPickerProps } from '../ColorPicker/ColorPicker.types';\n\nexport type ColorAreaOnColorChangeData = EventData<'change', React.SyntheticEvent | PointerEvent> & {\n  color: HsvColor;\n};\n\nexport type ColorAreaSlots = {\n  root: NonNullable<Slot<'div'>>;\n  thumb?: NonNullable<Slot<'div'>>;\n  inputX?: NonNullable<Slot<'input'>>;\n  inputY?: NonNullable<Slot<'input'>>;\n};\n\n/**\n * ColorArea Props\n */\nexport type ColorAreaProps = Omit<ComponentProps<Partial<ColorAreaSlots>>, 'color' | 'onChange'> &\n  Pick<ColorPickerProps, 'shape'> & {\n    /**\n     * The current color of the ColorArea.\n     */\n    color?: HsvColor;\n\n    /**\n     * The starting value for an uncontrolled ColorArea.\n     */\n    defaultColor?: HsvColor;\n\n    /**\n     * Triggers a callback when the value has been changed. This will be called on every individual step.\n     */\n    onChange?: EventHandler<ColorAreaOnColorChangeData>;\n  };\n\n/**\n * ColorArea Base Props\n */\nexport type ColorAreaBaseProps = Omit<ColorAreaProps, 'shape'>;\n\n/**\n * State used in rendering ColorArea\n */\nexport type ColorAreaState = ComponentState<Required<ColorAreaSlots>> & Pick<ColorAreaProps, 'color' | 'shape'>;\n\n/**\n * ColorArea Base State\n */\nexport type ColorAreaBaseState = ComponentState<Required<ColorAreaSlots>> & Pick<ColorAreaProps, 'color'>;\n"],"names":[],"mappings":"AA+CA;;CAEC,GACD,WAA0G"}

package/lib/components/ColorArea/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/ColorArea/index.ts"],"sourcesContent":["export { ColorArea } from './ColorArea';\nexport type {\n  ColorAreaBaseProps,\n  ColorAreaBaseState,\n  ColorAreaOnColorChangeData,\n  ColorAreaProps,\n  ColorAreaSlots,\n  ColorAreaState,\n} from './ColorArea.types';\nexport { renderColorArea_unstable } from './renderColorArea';\nexport { useColorAreaBase_unstable, useColorArea_unstable } from './useColorArea';\nexport { colorAreaClassNames, useColorAreaStyles_unstable } from './useColorAreaStyles.styles';\nexport { colorAreaCSSVars } from './ColorArea.constants';\n"],"names":["ColorArea","renderColorArea_unstable","useColorAreaBase_unstable","useColorArea_unstable","colorAreaClassNames","useColorAreaStyles_unstable","colorAreaCSSVars"],"mappings":"AAAA,SAASA,SAAS,QAAQ,iBAAc;AASxC,SAASC,wBAAwB,QAAQ,uBAAoB;AAC7D,SAASC,yBAAyB,EAAEC,qBAAqB,QAAQ,oBAAiB;AAClF,SAASC,mBAAmB,EAAEC,2BAA2B,QAAQ,iCAA8B;AAC/F,SAASC,gBAAgB,QAAQ,2BAAwB"}
+{"version":3,"sources":["../../../src/components/ColorArea/index.ts"],"sourcesContent":["export { ColorArea } from './ColorArea';\nexport type {\n  ColorAreaBaseProps,\n  ColorAreaBaseState,\n  ColorAreaOnColorChangeData,\n  ColorAreaProps,\n  ColorAreaSlots,\n  ColorAreaState,\n} from './ColorArea.types';\nexport { renderColorArea_unstable } from './renderColorArea';\nexport { useColorAreaBase_unstable, useColorArea_unstable } from './useColorArea';\nexport { colorAreaClassNames, useColorAreaStyles_unstable } from './useColorAreaStyles.styles';\nexport { colorAreaCSSVars } from './ColorArea.constants';\n"],"names":["ColorArea","renderColorArea_unstable","useColorAreaBase_unstable","useColorArea_unstable","colorAreaClassNames","useColorAreaStyles_unstable","colorAreaCSSVars"],"mappings":"AAAA,SAASA,SAAS,QAAQ,iBAAc;AASxC,SAASC,wBAAwB,QAAQ,uBAAoB;AAC7D,SAASC,yBAAyB,EAAEC,qBAAqB,QAAQ,oBAAiB;AAClF,SAASC,mBAAmB,EAAEC,2BAA2B,QAAQ,iCAA8B;AAC/F,SAASC,gBAAgB,QAAQ,2BAAwB"}

package/lib/components/ColorArea/renderColorArea.js

@@ -1,5 +1,5 @@
-  import { jsx as _jsx, jsxs as _jsxs } from "@fluentui/react-jsx-runtime/jsx-runtime";
-import { assertSlots } from "@fluentui/react-utilities";
+import { jsx as _jsx, jsxs as _jsxs } from "@fluentui/react-jsx-runtime/jsx-runtime";
+  import { assertSlots } from "@fluentui/react-utilities";
 /**
  * Render the final JSX of ColorArea
  */ export const renderColorArea_unstable = (state)=>{

package/lib/components/ColorArea/renderColorArea.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/ColorArea/renderColorArea.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type { ColorAreaBaseState, ColorAreaSlots } from './ColorArea.types';\n\n/**\n * Render the final JSX of ColorArea\n */\nexport const renderColorArea_unstable = (state: ColorAreaBaseState): JSXElement => {\n  assertSlots<ColorAreaSlots>(state);\n\n  return (\n    <state.root>\n      <state.thumb>\n        <state.inputX />\n        <state.inputY />\n      </state.thumb>\n    </state.root>\n  );\n};\n"],"names":["assertSlots","renderColorArea_unstable","state","root","thumb","inputX","inputY"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAIxD;;CAEC,GACD,OAAO,MAAMC,2BAA2B,CAACC;IACvCF,YAA4BE;IAE5B,qBACE,KAACA,MAAMC,IAAI;kBACT,cAAA,MAACD,MAAME,KAAK;;8BACV,KAACF,MAAMG,MAAM;8BACb,KAACH,MAAMI,MAAM;;;;AAIrB,EAAE"}
+{"version":3,"sources":["../../../src/components/ColorArea/renderColorArea.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type { ColorAreaBaseState, ColorAreaSlots } from './ColorArea.types';\n\n/**\n * Render the final JSX of ColorArea\n */\nexport const renderColorArea_unstable = (state: ColorAreaBaseState): JSXElement => {\n  assertSlots<ColorAreaSlots>(state);\n\n  return (\n    <state.root>\n      <state.thumb>\n        <state.inputX />\n        <state.inputY />\n      </state.thumb>\n    </state.root>\n  );\n};\n"],"names":["assertSlots","renderColorArea_unstable","state","root","thumb","inputX","inputY"],"mappings":";AAAA,0BAA0B,GAC1B,iDAAiD,GAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAIxD;;CAEC,GACD,OAAO,MAAMC,2BAA2B,CAACC;IACvCF,YAA4BE;IAE5B,qBACE,KAACA,MAAMC,IAAI;kBACT,cAAA,MAACD,MAAME,KAAK;;8BACV,KAACF,MAAMG,MAAM;8BACb,KAACH,MAAMI,MAAM;;;;AAIrB,EAAE"}

package/lib/components/ColorArea/useColorArea.js

@@ -161,6 +161,7 @@ import { createHslColorString } from "../../utils/createHslColor.js";
             defaultProps: {
                 id: useId('sliderY-'),
                 type: 'range',
+                'aria-orientation': 'vertical',
                 tabIndex: activeAxis && activeAxis === 'y' ? 0 : -1
             },
             elementType: 'input'