@react-aria/color 3.0.0-beta.13 → 3.0.0-beta.14

package/dist/types.d.ts.map

@@ -1 +1 @@
-{"mappings":";;;ACuBA;IACE,kDAAkD;IAClD,cAAc,EAAE,eAAe,WAAW,CAAC,CAAC;IAC5C,4DAA4D;IAC5D,aAAa,EAAE,eAAe,WAAW,CAAC,CAAC;IAC3C,mCAAmC;IACnC,UAAU,EAAE,eAAe,WAAW,CAAC,CAAC;IACxC,oEAAoE;IACpE,WAAW,EAAE,oBAAoB,gBAAgB,CAAC,CAAC;IACnD,kEAAkE;IAClE,WAAW,EAAE,oBAAoB,gBAAgB,CAAC,CAAA;CACnD;AAED,4BAA6B,SAAQ,kBAAkB;IACrD,uEAAuE;IACvE,SAAS,EAAE,UAAU,WAAW,CAAC,CAAC;IAClC,uEAAuE;IACvE,SAAS,EAAE,UAAU,WAAW,CAAC,CAAC;IAClC,kDAAkD;IAClD,YAAY,EAAE,UAAU,WAAW,CAAC,CAAA;CACrC;AAED;;;GAGG;AACH,6BAA6B,KAAK,EAAE,kBAAkB,EAAE,KAAK,EAAE,cAAc,GAAG,aAAa,CA6Y5F;AC3aD,gCAAiC,SAAQ,oBAAoB;IAC3D,mCAAmC;IACnC,QAAQ,EAAE,UAAU,WAAW,CAAC,CAAC;IACjC,mCAAmC;IACnC,QAAQ,EAAE,UAAU,gBAAgB,CAAC,CAAA;CACtC;AAED;IACE,mCAAmC;IACnC,UAAU,EAAE,eAAe,WAAW,CAAC,CAAC;IACxC,mCAAmC;IACnC,UAAU,EAAE,eAAe,WAAW,CAAC,CAAC;IACxC,mCAAmC;IACnC,UAAU,EAAE,eAAe,WAAW,CAAC,CAAC;IACxC,yDAAyD;IACzD,UAAU,EAAE,eAAe,WAAW,CAAC,CAAC;IACxC,8EAA8E;IAC9E,WAAW,EAAE,eAAe,WAAW,CAAC,CAAA;CACzC;AAED;;;GAGG;AACH,+BAA+B,KAAK,EAAE,sBAAsB,EAAE,KAAK,EAAE,gBAAgB,GAAG,eAAe,CAqFtG;AC7GD,6BAA8B,SAAQ,mBAAmB;IACvD,2CAA2C;IAC3C,WAAW,EAAE,MAAM,CAAC;IACpB,2CAA2C;IAC3C,WAAW,EAAE,MAAM,CAAA;CACpB;AAED;IACE,mCAAmC;IACnC,UAAU,EAAE,eAAe,WAAW,CAAC,CAAC;IACxC,mCAAmC;IACnC,UAAU,EAAE,eAAe,WAAW,CAAC,CAAC;IACxC,yDAAyD;IACzD,UAAU,EAAE,oBAAoB,gBAAgB,CAAC,CAAA;CAClD;AAED;;;GAGG;AACH,8BAA8B,KAAK,EAAE,mBAAmB,EAAE,KAAK,EAAE,eAAe,EAAE,QAAQ,EAAE,UAAU,WAAW,CAAC,GAAG,cAAc,CAmRlI;AChSD;IACE,mCAAmC;IACnC,UAAU,EAAE,oBAAoB,gBAAgB,CAAC,CAAC;IAClD,mCAAmC;IACnC,UAAU,EAAE,eAAe,gBAAgB,CAAC,CAAA;CAC7C;AAED;;;GAGG;AACH,8BACE,KAAK,EAAE,mBAAmB,EAC1B,KAAK,EAAE,eAAe,EACtB,GAAG,EAAE,UAAU,gBAAgB,CAAC,GAC/B,cAAc,CA8EhB","sources":["packages/@react-aria/color/src/packages/@react-aria/color/src/useColorAreaGradient.ts","packages/@react-aria/color/src/packages/@react-aria/color/src/useColorArea.ts","packages/@react-aria/color/src/packages/@react-aria/color/src/useColorSlider.ts","packages/@react-aria/color/src/packages/@react-aria/color/src/useColorWheel.ts","packages/@react-aria/color/src/packages/@react-aria/color/src/useColorField.ts","packages/@react-aria/color/src/packages/@react-aria/color/src/index.ts","packages/@react-aria/color/src/index.ts"],"sourcesContent":[null,null,null,null,null,null,"/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nexport * from './useColorArea';\nexport * from './useColorSlider';\nexport * from './useColorWheel';\nexport * from './useColorField';\n"],"names":[],"version":3,"file":"types.d.ts.map"}
+{"mappings":";;;;ACwBA;IACE,kDAAkD;IAClD,cAAc,EAAE,aAAa,CAAC;IAC9B,4DAA4D;IAC5D,aAAa,EAAE,aAAa,CAAC;IAC7B,mCAAmC;IACnC,UAAU,EAAE,aAAa,CAAC;IAC1B,oEAAoE;IACpE,WAAW,EAAE,oBAAoB,gBAAgB,CAAC,CAAC;IACnD,kEAAkE;IAClE,WAAW,EAAE,oBAAoB,gBAAgB,CAAC,CAAA;CACnD;AAED,qCAAsC,SAAQ,kBAAkB;IAC9D,uEAAuE;IACvE,SAAS,EAAE,UAAU,gBAAgB,CAAC,CAAC;IACvC,uEAAuE;IACvE,SAAS,EAAE,UAAU,gBAAgB,CAAC,CAAC;IACvC,kDAAkD;IAClD,YAAY,EAAE,UAAU,OAAO,CAAC,CAAA;CACjC;AAED;;;GAGG;AACH,6BAA6B,KAAK,EAAE,oBAAoB,EAAE,KAAK,EAAE,cAAc,GAAG,aAAa,CA6Y9F;AC3aD,uCAAwC,SAAQ,oBAAoB;IAClE,mCAAmC;IACnC,QAAQ,EAAE,UAAU,OAAO,CAAC,CAAC;IAC7B,mCAAmC;IACnC,QAAQ,EAAE,UAAU,gBAAgB,CAAC,CAAA;CACtC;AAED;IACE,mCAAmC;IACnC,UAAU,EAAE,aAAa,CAAC;IAC1B,mCAAmC;IACnC,UAAU,EAAE,aAAa,CAAC;IAC1B,mCAAmC;IACnC,UAAU,EAAE,aAAa,CAAC;IAC1B,yDAAyD;IACzD,UAAU,EAAE,oBAAoB,gBAAgB,CAAC,CAAC;IAClD,8EAA8E;IAC9E,WAAW,EAAE,aAAa,CAAA;CAC3B;AAED;;;GAGG;AACH,+BAA+B,KAAK,EAAE,sBAAsB,EAAE,KAAK,EAAE,gBAAgB,GAAG,eAAe,CAgFtG;ACxGD,sCAAuC,SAAQ,mBAAmB;IAChE,2CAA2C;IAC3C,WAAW,EAAE,MAAM,CAAC;IACpB,2CAA2C;IAC3C,WAAW,EAAE,MAAM,CAAA;CACpB;AAED;IACE,mCAAmC;IACnC,UAAU,EAAE,aAAa,CAAC;IAC1B,mCAAmC;IACnC,UAAU,EAAE,aAAa,CAAC;IAC1B,yDAAyD;IACzD,UAAU,EAAE,oBAAoB,gBAAgB,CAAC,CAAA;CAClD;AAED;;;GAGG;AACH,8BAA8B,KAAK,EAAE,qBAAqB,EAAE,KAAK,EAAE,eAAe,EAAE,QAAQ,EAAE,UAAU,gBAAgB,CAAC,GAAG,cAAc,CA0RzI;ACxSD;IACE,mCAAmC;IACnC,UAAU,EAAE,oBAAoB,gBAAgB,CAAC,CAAC;IAClD,mCAAmC;IACnC,UAAU,EAAE,eAAe,gBAAgB,CAAC,CAAA;CAC7C;AAED;;;GAGG;AACH,8BACE,KAAK,EAAE,mBAAmB,EAC1B,KAAK,EAAE,eAAe,EACtB,GAAG,EAAE,UAAU,gBAAgB,CAAC,GAC/B,cAAc,CA8EhB;ACrGD,YAAY,EAAC,mBAAmB,EAAC,MAAM,oBAAoB,CAAC","sources":["packages/@react-aria/color/src/packages/@react-aria/color/src/useColorAreaGradient.ts","packages/@react-aria/color/src/packages/@react-aria/color/src/useColorArea.ts","packages/@react-aria/color/src/packages/@react-aria/color/src/useColorSlider.ts","packages/@react-aria/color/src/packages/@react-aria/color/src/useColorWheel.ts","packages/@react-aria/color/src/packages/@react-aria/color/src/useColorField.ts","packages/@react-aria/color/src/packages/@react-aria/color/src/index.ts","packages/@react-aria/color/src/index.ts"],"sourcesContent":[null,null,null,null,null,null,"/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\nexport {useColorArea} from './useColorArea';\nexport {useColorSlider} from './useColorSlider';\nexport {useColorWheel} from './useColorWheel';\nexport {useColorField} from './useColorField';\nexport type {AriaColorAreaOptions, ColorAreaAria} from './useColorArea';\nexport type {AriaColorSliderOptions, ColorSliderAria} from './useColorSlider';\nexport type {AriaColorWheelOptions, ColorWheelAria} from './useColorWheel';\nexport type {AriaColorFieldProps} from '@react-types/color';\nexport type {ColorFieldAria} from './useColorField';\n"],"names":[],"version":3,"file":"types.d.ts.map"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-aria/color",
-  "version": "3.0.0-beta.13",
+  "version": "3.0.0-beta.14",
   "description": "Spectrum UI components in React",
   "license": "Apache-2.0",
   "main": "dist/main.js",
@@ -18,18 +18,17 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.6.2",
-    "@internationalized/message": "^3.0.8",
-    "@react-aria/i18n": "^3.4.1",
-    "@react-aria/interactions": "^3.9.1",
-    "@react-aria/slider": "^3.1.1",
-    "@react-aria/spinbutton": "^3.1.1",
-    "@react-aria/textfield": "^3.6.1",
-    "@react-aria/utils": "^3.13.1",
-    "@react-aria/visually-hidden": "^3.3.1",
-    "@react-stately/color": "^3.0.0",
-    "@react-types/color": "3.0.0-beta.10",
-    "@react-types/shared": "^3.13.1",
-    "@react-types/slider": "^3.1.1"
+    "@react-aria/i18n": "^3.5.0",
+    "@react-aria/interactions": "^3.10.0",
+    "@react-aria/slider": "^3.2.0",
+    "@react-aria/spinbutton": "^3.1.2",
+    "@react-aria/textfield": "^3.7.0",
+    "@react-aria/utils": "^3.13.2",
+    "@react-aria/visually-hidden": "^3.4.0",
+    "@react-stately/color": "^3.1.0",
+    "@react-types/color": "3.0.0-beta.11",
+    "@react-types/shared": "^3.14.0",
+    "@react-types/slider": "^3.2.0"
   },
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0",
@@ -38,5 +37,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "715c3f563ccf8c2e0102d3e18403d9db21a05a71"
+  "gitHead": "cd7c0ec917122c7612f653c22f8ed558f8b66ecd"
 }

package/src/index.ts

@@ -9,8 +9,12 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
-export * from './useColorArea';
-export * from './useColorSlider';
-export * from './useColorWheel';
-export * from './useColorField';
+export {useColorArea} from './useColorArea';
+export {useColorSlider} from './useColorSlider';
+export {useColorWheel} from './useColorWheel';
+export {useColorField} from './useColorField';
+export type {AriaColorAreaOptions, ColorAreaAria} from './useColorArea';
+export type {AriaColorSliderOptions, ColorSliderAria} from './useColorSlider';
+export type {AriaColorWheelOptions, ColorWheelAria} from './useColorWheel';
+export type {AriaColorFieldProps} from '@react-types/color';
+export type {ColorFieldAria} from './useColorField';

package/src/useColorArea.ts

@@ -12,42 +12,43 @@
 
 import {AriaColorAreaProps, ColorChannel} from '@react-types/color';
 import {ColorAreaState} from '@react-stately/color';
+import {DOMAttributes} from '@react-types/shared';
 import {focusWithoutScrolling, isAndroid, isIOS, mergeProps, useGlobalListeners, useLabels} from '@react-aria/utils';
 // @ts-ignore
 import intlMessages from '../intl/*.json';
-import React, {ChangeEvent, HTMLAttributes, InputHTMLAttributes, RefObject, useCallback, useRef} from 'react';
+import React, {ChangeEvent, InputHTMLAttributes, RefObject, useCallback, useRef} from 'react';
 import {useColorAreaGradient} from './useColorAreaGradient';
 import {useFocus, useFocusWithin, useKeyboard, useMove} from '@react-aria/interactions';
-import {useLocale, useMessageFormatter} from '@react-aria/i18n';
+import {useLocale, useLocalizedStringFormatter} from '@react-aria/i18n';
 import {useVisuallyHidden} from '@react-aria/visually-hidden';
 
-interface ColorAreaAria {
+export interface ColorAreaAria {
   /** Props for the color area container element. */
-  colorAreaProps: HTMLAttributes<HTMLElement>,
+  colorAreaProps: DOMAttributes,
   /** Props for the color area gradient foreground element. */
-  gradientProps: HTMLAttributes<HTMLElement>,
+  gradientProps: DOMAttributes,
   /** Props for the thumb element. */
-  thumbProps: HTMLAttributes<HTMLElement>,
+  thumbProps: DOMAttributes,
   /** Props for the visually hidden horizontal range input element. */
   xInputProps: InputHTMLAttributes<HTMLInputElement>,
   /** Props for the visually hidden vertical range input element. */
   yInputProps: InputHTMLAttributes<HTMLInputElement>
 }
 
-interface ColorAreaAriaProps extends AriaColorAreaProps {
+export interface AriaColorAreaOptions extends AriaColorAreaProps {
   /** A ref to the input that represents the x axis of the color area. */
-  inputXRef: RefObject<HTMLElement>,
+  inputXRef: RefObject<HTMLInputElement>,
   /** A ref to the input that represents the y axis of the color area. */
-  inputYRef: RefObject<HTMLElement>,
+  inputYRef: RefObject<HTMLInputElement>,
   /** A ref to the color area containing element. */
-  containerRef: RefObject<HTMLElement>
+  containerRef: RefObject<Element>
 }
 
 /**
- * Provides the behavior and accessibility implementation for a color wheel component.
- * Color wheels allow users to adjust the hue of an HSL or HSB color value on a circular track.
+ * Provides the behavior and accessibility implementation for a color area component.
+ * Color area allows users to adjust two channels of an RGB, HSL or HSB color value against a two-dimensional gradient background.
  */
-export function useColorArea(props: ColorAreaAriaProps, state: ColorAreaState): ColorAreaAria {
+export function useColorArea(props: AriaColorAreaOptions, state: ColorAreaState): ColorAreaAria {
   let {
     isDisabled,
     inputXRef,
@@ -55,15 +56,15 @@ export function useColorArea(props: ColorAreaAriaProps, state: ColorAreaState):
     containerRef,
     'aria-label': ariaLabel
   } = props;
-  let formatMessage = useMessageFormatter(intlMessages);
+  let stringFormatter = useLocalizedStringFormatter(intlMessages);
 
   let {addGlobalListener, removeGlobalListener} = useGlobalListeners();
 
   let {direction, locale} = useLocale();
 
-  let focusedInputRef = useRef<HTMLElement>(null);
+  let focusedInputRef = useRef<HTMLInputElement>(null);
 
-  let focusInput = useCallback((inputRef:RefObject<HTMLElement> = inputXRef) => {
+  let focusInput = useCallback((inputRef:RefObject<HTMLInputElement> = inputXRef) => {
     if (inputRef.current) {
       focusWithoutScrolling(inputRef.current);
     }
@@ -330,36 +331,36 @@ export function useColorArea(props: ColorAreaAriaProps, state: ColorAreaState):
   function getAriaValueTextForChannel(channel:ColorChannel) {
     return (
       valueChangedViaKeyboard.current ?
-      formatMessage('colorNameAndValue', {name: state.value.getChannelName(channel, locale), value: state.value.formatChannelValue(channel, locale)})
+      stringFormatter.format('colorNameAndValue', {name: state.value.getChannelName(channel, locale), value: state.value.formatChannelValue(channel, locale)})
       :
       [
-        formatMessage('colorNameAndValue', {name: state.value.getChannelName(channel, locale), value: state.value.formatChannelValue(channel, locale)}),
-        formatMessage('colorNameAndValue', {name: state.value.getChannelName(channel === yChannel ? xChannel : yChannel, locale), value: state.value.formatChannelValue(channel === yChannel ? xChannel : yChannel, locale)})
+        stringFormatter.format('colorNameAndValue', {name: state.value.getChannelName(channel, locale), value: state.value.formatChannelValue(channel, locale)}),
+        stringFormatter.format('colorNameAndValue', {name: state.value.getChannelName(channel === yChannel ? xChannel : yChannel, locale), value: state.value.formatChannelValue(channel === yChannel ? xChannel : yChannel, locale)})
       ].join(', ')
     );
   }
 
-  let colorPickerLabel = formatMessage('colorPicker');
+  let colorPickerLabel = stringFormatter.format('colorPicker');
 
   let xInputLabellingProps = useLabels({
     ...props,
-    'aria-label': ariaLabel ? formatMessage('colorInputLabel', {label: ariaLabel, channelLabel: colorPickerLabel}) : colorPickerLabel
+    'aria-label': ariaLabel ? stringFormatter.format('colorInputLabel', {label: ariaLabel, channelLabel: colorPickerLabel}) : colorPickerLabel
   });
 
   let yInputLabellingProps = useLabels({
     ...props,
-    'aria-label': ariaLabel ? formatMessage('colorInputLabel', {label: ariaLabel, channelLabel: colorPickerLabel}) : colorPickerLabel
+    'aria-label': ariaLabel ? stringFormatter.format('colorInputLabel', {label: ariaLabel, channelLabel: colorPickerLabel}) : colorPickerLabel
   });
 
-  let colorAriaLabellingProps = useLabels(
+  let colorAreaLabellingProps = useLabels(
     {
       ...props,
-      'aria-label': ariaLabel ? `${ariaLabel} ${colorPickerLabel}` : undefined
+      'aria-label': ariaLabel ? `${ariaLabel}, ${colorPickerLabel}` : undefined
     },
     isMobile ? colorPickerLabel : undefined
   );
 
-  let ariaRoleDescription = formatMessage('twoDimensionalSlider');
+  let ariaRoleDescription = stringFormatter.format('twoDimensionalSlider');
 
   let {visuallyHiddenProps} = useVisuallyHidden({style: {
     opacity: '0.0001',
@@ -382,7 +383,7 @@ export function useColorArea(props: ColorAreaAriaProps, state: ColorAreaState):
 
   return {
     colorAreaProps: {
-      ...colorAriaLabellingProps,
+      ...colorAreaLabellingProps,
       ...colorAreaInteractions,
       ...colorAreaStyleProps,
       role: 'group'
@@ -414,7 +415,7 @@ export function useColorArea(props: ColorAreaAriaProps, state: ColorAreaState):
         add aria-hidden="true" to the unfocused control when the value has not changed via the keyboard,
         but remove aria-hidden to reveal the input for each channel when the value has changed with the keyboard.
       */
-      'aria-hidden': (!isMobile && focusedInputRef.current === inputYRef.current && !valueChangedViaKeyboard.current ? 'true' : undefined),
+      'aria-hidden': (isMobile || !focusedInputRef.current || focusedInputRef.current === inputXRef.current || valueChangedViaKeyboard.current ? undefined : 'true'),
       onChange: (e: ChangeEvent<HTMLInputElement>) => {
         state.setXValue(parseFloat(e.target.value));
       }
@@ -432,13 +433,13 @@ export function useColorArea(props: ColorAreaAriaProps, state: ColorAreaState):
       'aria-orientation': 'vertical',
       disabled: isDisabled,
       value: state.value.getChannelValue(yChannel),
-      tabIndex: (isMobile || focusedInputRef.current === inputYRef.current ? undefined : -1),
+      tabIndex: (isMobile || (focusedInputRef.current && focusedInputRef.current === inputYRef.current) ? undefined : -1),
       /*
         So that only a single "2d slider" control shows up when listing form elements for screen readers,
         add aria-hidden="true" to the unfocused input when the value has not changed via the keyboard,
         but remove aria-hidden to reveal the input for each channel when the value has changed with the keyboard.
       */
-      'aria-hidden': (isMobile || focusedInputRef.current === inputYRef.current || valueChangedViaKeyboard.current ? undefined : 'true'),
+      'aria-hidden': (isMobile || (focusedInputRef.current && focusedInputRef.current === inputYRef.current) || valueChangedViaKeyboard.current ? undefined : 'true'),
       onChange: (e: ChangeEvent<HTMLInputElement>) => {
         state.setYValue(parseFloat(e.target.value));
       }

package/src/useColorAreaGradient.ts

@@ -218,17 +218,21 @@ export function useColorAreaGradient({direction, state, zChannel, xChannel, isDi
       x = 1 - x;
     }
 
+    let forcedColorAdjustNoneStyle = {forcedColorAdjust: 'none'};
+
     return {
       colorAreaStyleProps: {
         style: {
           position: 'relative',
           touchAction: 'none',
+          ...forcedColorAdjustNoneStyle,
           ...background.colorAreaStyles
         }
       },
       gradientStyleProps: {
         style: {
           touchAction: 'none',
+          ...forcedColorAdjustNoneStyle,
           ...background.gradientStyles
         }
       },
@@ -238,7 +242,8 @@ export function useColorAreaGradient({direction, state, zChannel, xChannel, isDi
           left: `${x * 100}%`,
           top: `${y * 100}%`,
           transform: 'translate(0%, 0%)',
-          touchAction: 'none'
+          touchAction: 'none',
+          ...forcedColorAdjustNoneStyle
         }
       }
     };

package/src/useColorField.ts

@@ -24,7 +24,7 @@ import {useFocusWithin, useScrollWheel} from '@react-aria/interactions';
 import {useFormattedTextField} from '@react-aria/textfield';
 import {useSpinButton} from '@react-aria/spinbutton';
 
-interface ColorFieldAria {
+export interface ColorFieldAria {
   /** Props for the label element. */
   labelProps: LabelHTMLAttributes<HTMLLabelElement>,
   /** Props for the input element. */

package/src/useColorSlider.ts

@@ -12,36 +12,37 @@
 
 import {AriaColorSliderProps} from '@react-types/color';
 import {ColorSliderState} from '@react-stately/color';
-import {HTMLAttributes, RefObject} from 'react';
+import {DOMAttributes} from '@react-types/shared';
+import {InputHTMLAttributes, RefObject} from 'react';
 import {mergeProps} from '@react-aria/utils';
 import {useLocale} from '@react-aria/i18n';
 import {useSlider, useSliderThumb} from '@react-aria/slider';
 
-interface ColorSliderAriaOptions extends AriaColorSliderProps {
+export interface AriaColorSliderOptions extends AriaColorSliderProps {
   /** A ref for the track element. */
-  trackRef: RefObject<HTMLElement>,
+  trackRef: RefObject<Element>,
   /** A ref for the input element. */
   inputRef: RefObject<HTMLInputElement>
 }
 
-interface ColorSliderAria {
+export interface ColorSliderAria {
   /** Props for the label element. */
-  labelProps: HTMLAttributes<HTMLElement>,
+  labelProps: DOMAttributes,
   /** Props for the track element. */
-  trackProps: HTMLAttributes<HTMLElement>,
+  trackProps: DOMAttributes,
   /** Props for the thumb element. */
-  thumbProps: HTMLAttributes<HTMLElement>,
+  thumbProps: DOMAttributes,
   /** Props for the visually hidden range input element. */
-  inputProps: HTMLAttributes<HTMLElement>,
+  inputProps: InputHTMLAttributes<HTMLInputElement>,
   /** Props for the output element, displaying the value of the color slider. */
-  outputProps: HTMLAttributes<HTMLElement>
+  outputProps: DOMAttributes
 }
 
 /**
  * Provides the behavior and accessibility implementation for a color slider component.
  * Color sliders allow users to adjust an individual channel of a color value.
  */
-export function useColorSlider(props: ColorSliderAriaOptions, state: ColorSliderState): ColorSliderAria {
+export function useColorSlider(props: AriaColorSliderOptions, state: ColorSliderState): ColorSliderAria {
   let {trackRef, inputRef, orientation, channel, 'aria-label': ariaLabel} = props;
 
   let {locale, direction} = useLocale();
@@ -99,17 +100,14 @@ export function useColorSlider(props: ColorSliderAriaOptions, state: ColorSlider
     }
   };
 
-  let thumbPosition = state.getThumbPercent(0);
-  if (orientation === 'vertical' || direction === 'rtl') {
-    thumbPosition = 1 - thumbPosition;
-  }
+  let forcedColorAdjustNoneStyle = {forcedColorAdjust: 'none'};
 
   return {
     trackProps: {
       ...mergeProps(groupProps, trackProps),
       style: {
-        position: 'relative',
-        touchAction: 'none',
+        ...trackProps.style,
+        ...forcedColorAdjustNoneStyle,
         background: generateBackground()
       }
     },
@@ -117,10 +115,8 @@ export function useColorSlider(props: ColorSliderAriaOptions, state: ColorSlider
     thumbProps: {
       ...thumbProps,
       style: {
-        touchAction: 'none',
-        position: 'absolute',
-        [orientation === 'vertical' ? 'top' : 'left']: `${thumbPosition * 100}%`,
-        transform: 'translate(-50%, -50%)'
+        ...thumbProps.style,
+        ...forcedColorAdjustNoneStyle
       }
     },
     labelProps,

package/src/useColorWheel.ts

@@ -12,23 +12,24 @@
 
 import {AriaColorWheelProps} from '@react-types/color';
 import {ColorWheelState} from '@react-stately/color';
+import {DOMAttributes} from '@react-types/shared';
 import {focusWithoutScrolling, mergeProps, useGlobalListeners, useLabels} from '@react-aria/utils';
-import React, {ChangeEvent, HTMLAttributes, InputHTMLAttributes, RefObject, useCallback, useRef} from 'react';
+import React, {ChangeEvent, InputHTMLAttributes, RefObject, useCallback, useRef} from 'react';
 import {useKeyboard, useMove} from '@react-aria/interactions';
 import {useLocale} from '@react-aria/i18n';
 
-interface ColorWheelAriaProps extends AriaColorWheelProps {
+export interface AriaColorWheelOptions extends AriaColorWheelProps {
   /** The outer radius of the color wheel. */
   outerRadius: number,
   /** The inner radius of the color wheel. */
   innerRadius: number
 }
 
-interface ColorWheelAria {
+export interface ColorWheelAria {
   /** Props for the track element. */
-  trackProps: HTMLAttributes<HTMLElement>,
+  trackProps: DOMAttributes,
   /** Props for the thumb element. */
-  thumbProps: HTMLAttributes<HTMLElement>,
+  thumbProps: DOMAttributes,
   /** Props for the visually hidden range input element. */
   inputProps: InputHTMLAttributes<HTMLInputElement>
 }
@@ -37,7 +38,7 @@ interface ColorWheelAria {
  * Provides the behavior and accessibility implementation for a color wheel component.
  * Color wheels allow users to adjust the hue of an HSL or HSB color value on a circular track.
  */
-export function useColorWheel(props: ColorWheelAriaProps, state: ColorWheelState, inputRef: RefObject<HTMLElement>): ColorWheelAria {
+export function useColorWheel(props: AriaColorWheelOptions, state: ColorWheelState, inputRef: RefObject<HTMLInputElement>): ColorWheelAria {
   let {
     isDisabled,
     innerRadius,
@@ -257,6 +258,11 @@ export function useColorWheel(props: ColorWheelAriaProps, state: ColorWheelState
   });
 
   let {minValue, maxValue, step} = state.value.getChannelRange('hue');
+
+  let forcedColorAdjustNoneStyle = {
+    forcedColorAdjust: 'none'
+  };
+
   return {
     trackProps: {
       ...trackInteractions,
@@ -283,7 +289,8 @@ export function useColorWheel(props: ColorWheelAriaProps, state: ColorWheelState
             hsl(360, 100%, 50%)
           )
         `,
-        clipPath: `path(evenodd, "${circlePath(outerRadius, outerRadius, outerRadius)} ${circlePath(outerRadius, outerRadius, innerRadius)}")`
+        clipPath: `path(evenodd, "${circlePath(outerRadius, outerRadius, outerRadius)} ${circlePath(outerRadius, outerRadius, innerRadius)}")`,
+        ...forcedColorAdjustNoneStyle
       }
     },
     thumbProps: {
@@ -293,7 +300,8 @@ export function useColorWheel(props: ColorWheelAriaProps, state: ColorWheelState
         left: '50%',
         top: '50%',
         transform: `translate(calc(${x}px - 50%), calc(${y}px - 50%))`,
-        touchAction: 'none'
+        touchAction: 'none',
+        ...forcedColorAdjustNoneStyle
       }
     },
     inputProps: mergeProps(