@enact/limestone 1.9.3 → 1.10.1

package/Scroller/EditableWrapper.js

@@ -8,6 +8,7 @@ var _handle = require("@enact/core/handle");
 var _propTypes = _interopRequireDefault(require("@enact/core/internal/prop-types"));
 var _keymap = require("@enact/core/keymap");
 var _usePublicClassNames = require("@enact/core/usePublicClassNames");
+var _util = require("@enact/core/util");
 var _spotlight = _interopRequireWildcard(require("@enact/spotlight"));
 var _container = require("@enact/spotlight/src/container");
 var _target = require("@enact/spotlight/src/target");
@@ -89,21 +90,22 @@ var holdConfig = {
  * @ui
  * @public
  */
-var EditableWrapper = exports.EditableWrapper = function EditableWrapper(props) {
+var _EditableWrapper = exports.EditableWrapper = function EditableWrapper(props) {
   var _editable$hideIndex;
+  (0, _util.checkPropTypes)(_EditableWrapper, props);
   var children = props.children,
     editable = props.editable,
     scrollContainerHandle = props.scrollContainerHandle,
     scrollContainerRef = props.scrollContainerRef,
     scrollContentRef = props.scrollContentRef;
-  var centered = (editable === null || editable === void 0 ? void 0 : editable.centered) != null ? editable.centered : true;
-  var selectItemBy = (editable === null || editable === void 0 ? void 0 : editable.selectItemBy) || 'longPress';
-  var customCss = (editable === null || editable === void 0 ? void 0 : editable.css) || {};
   var removeItemFuncRef = editable === null || editable === void 0 ? void 0 : editable.removeItemFuncRef;
   var hideItemFuncRef = editable === null || editable === void 0 ? void 0 : editable.hideItemFuncRef;
   var showItemFuncRef = editable === null || editable === void 0 ? void 0 : editable.showItemFuncRef;
   var focusItemFuncRef = editable === null || editable === void 0 ? void 0 : editable.focusItemFuncRef;
   var blurItemFuncRef = editable === null || editable === void 0 ? void 0 : editable.blurItemFuncRef;
+  var centered = (editable === null || editable === void 0 ? void 0 : editable.centered) != null ? editable.centered : true;
+  var selectItemBy = (editable === null || editable === void 0 ? void 0 : editable.selectItemBy) || 'longPress';
+  var customCss = (editable === null || editable === void 0 ? void 0 : editable.css) || {};
   var mergedCss = (0, _usePublicClassNames.usePublicClassNames)({
     componentCss: _EditableWrapperModule["default"],
     customCss: customCss,
@@ -126,7 +128,7 @@ var EditableWrapper = exports.EditableWrapper = function EditableWrapper(props)
     // Indices
     fromIndex: null,
     prevToIndex: null,
-    hideIndex: null,
+    hideIndex: (_editable$hideIndex = editable === null || editable === void 0 ? void 0 : editable.hideIndex) !== null && _editable$hideIndex !== void 0 ? _editable$hideIndex : dataSize,
     // Position for restoring focus after removing item
     nextSpotlightRect: null,
     // Move direction from the starting position to the current position
@@ -146,7 +148,6 @@ var EditableWrapper = exports.EditableWrapper = function EditableWrapper(props)
     initialSelected: editable === null || editable === void 0 ? void 0 : editable.initialSelected
   });
   var announceRef = (0, _react.useRef)({});
-  mutableRef.current.hideIndex = (_editable$hideIndex = editable === null || editable === void 0 ? void 0 : editable.hideIndex) !== null && _editable$hideIndex !== void 0 ? _editable$hideIndex : dataSize;
 
   // Functions
 
@@ -612,8 +613,9 @@ var EditableWrapper = exports.EditableWrapper = function EditableWrapper(props)
     if (selectItemBy === 'press') {
       if ((0, _pointer.getPointerMode)()) {
         _spotlight["default"].setPointerMode(false);
+        _spotlight["default"].focus(focusTarget);
       }
-      _spotlight["default"].focus(focusTarget);
+      if (focusTarget !== _spotlight["default"].getCurrent()) _spotlight["default"].focus(focusTarget);
       focusItem(focusTarget);
     }
     setTimeout(function () {
@@ -886,27 +888,27 @@ var EditableWrapper = exports.EditableWrapper = function EditableWrapper(props)
   }, [handleMouseLeave, handleTouchMove, scrollContainerRef]);
   (0, _react.useLayoutEffect)(function () {
     if (removeItemFuncRef) {
-      removeItemFuncRef.current = removeItem;
+      removeItemFuncRef.current = removeItem; // eslint-disable-line react-hooks/immutability
     }
   }, [removeItem, removeItemFuncRef]);
   (0, _react.useLayoutEffect)(function () {
     if (hideItemFuncRef) {
-      hideItemFuncRef.current = hideItem;
+      hideItemFuncRef.current = hideItem; // eslint-disable-line react-hooks/immutability
     }
   }, [hideItem, hideItemFuncRef]);
   (0, _react.useLayoutEffect)(function () {
     if (showItemFuncRef) {
-      showItemFuncRef.current = showItem;
+      showItemFuncRef.current = showItem; // eslint-disable-line react-hooks/immutability
     }
   }, [showItem, showItemFuncRef]);
   (0, _react.useLayoutEffect)(function () {
     if (focusItemFuncRef) {
-      focusItemFuncRef.current = focusItem;
+      focusItemFuncRef.current = focusItem; // eslint-disable-line react-hooks/immutability
     }
   }, [focusItem, focusItemFuncRef]);
   (0, _react.useLayoutEffect)(function () {
     if (blurItemFuncRef) {
-      blurItemFuncRef.current = blurItem;
+      blurItemFuncRef.current = blurItem; // eslint-disable-line react-hooks/immutability
     }
   }, [blurItem, blurItemFuncRef]);
   (0, _react.useEffect)(function () {
@@ -981,6 +983,8 @@ var EditableWrapper = exports.EditableWrapper = function EditableWrapper(props)
 
   // We set 'data-is-hiding' for all hidden items at component mount
   (0, _react.useEffect)(function () {
+    var _editable$hideIndex2;
+    mutableRef.current.hideIndex = (_editable$hideIndex2 = editable === null || editable === void 0 ? void 0 : editable.hideIndex) !== null && _editable$hideIndex2 !== void 0 ? _editable$hideIndex2 : dataSize;
     children.map(function (child, index) {
       if (index >= mutableRef.current.hideIndex) {
         var hiddenElement = document.querySelector('[aria-label="' + child.props['aria-label'] + '"]');
@@ -1007,8 +1011,8 @@ var EditableWrapper = exports.EditableWrapper = function EditableWrapper(props)
     }, "editable-wrapper-announce")]
   });
 };
-EditableWrapper.displayName = 'EditableWrapper';
-EditableWrapper.propTypes = /** @lends limestone/Scroller.EditableWrapper.prototype */{
+_EditableWrapper.displayName = 'EditableWrapper';
+_EditableWrapper.propTypes = /** @lends limestone/Scroller.EditableWrapper.prototype */{
   /**
    * Enables editing items in the scroller.
    * You can specify props for editable scroller as an object.
@@ -1040,4 +1044,4 @@ EditableWrapper.propTypes = /** @lends limestone/Scroller.EditableWrapper.protot
    */
   scrollContentRef: _propTypes["default"].ref
 };
-var _default = exports["default"] = EditableWrapper;
+var _default = exports["default"] = _EditableWrapper;

package/Scroller/Scroller.js

@@ -15,7 +15,7 @@ var _I18nDecorator = require("@enact/i18n/I18nDecorator");
 var _SpotlightContainerDecorator = _interopRequireDefault(require("@enact/spotlight/SpotlightContainerDecorator"));
 var _Spottable = _interopRequireDefault(require("@enact/spotlight/Spottable"));
 var _Resizable = require("@enact/ui/Resizable");
-var _Scroller = require("@enact/ui/Scroller");
+var _Scroller2 = require("@enact/ui/Scroller");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _react = require("react");
@@ -97,8 +97,9 @@ var scrollerDefaultProps = {
  * @ui
  * @public
  */
-var Scroller = exports.Scroller = function Scroller(props) {
+var _Scroller = exports.Scroller = function Scroller(props) {
   var scrollerProps = (0, _util.setDefaultProps)(props, scrollerDefaultProps);
+  (0, _util.checkPropTypes)(_Scroller, scrollerProps);
   if (typeof ENACT_PACK_NO_ANIMATION !== 'undefined' && ENACT_PACK_NO_ANIMATION) {
     scrollerProps.overscrollEffectOn = {
       arrowKey: false,
@@ -146,7 +147,7 @@ var Scroller = exports.Scroller = function Scroller(props) {
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Resizable.ResizeContext, _objectSpread(_objectSpread({}, resizeContextProps), {}, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ScrollContentWrapper, _objectSpread(_objectSpread(_objectSpread({}, scrollContainerProps), scrollContentWrapperRest), {}, {
       children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(ScrollBody, _objectSpread(_objectSpread({}, focusableBodyProps), {}, {
-        children: [rest.focusableScrollbar ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScrollbarPlaceholder["default"], {}) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_Scroller.ScrollerBasic, _objectSpread(_objectSpread({}, themeScrollContentProps), {}, {
+        children: [rest.focusableScrollbar ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScrollbarPlaceholder["default"], {}) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_Scroller2.ScrollerBasic, _objectSpread(_objectSpread({}, themeScrollContentProps), {}, {
           "aria-label": ariaLabel,
           id: id,
           ref: scrollContentHandle,
@@ -156,8 +157,8 @@ var Scroller = exports.Scroller = function Scroller(props) {
     }))
   }));
 };
-Scroller.displayName = 'Scroller';
-Scroller.propTypes = /** @lends limestone/Scroller.Scroller.prototype */{
+_Scroller.displayName = 'Scroller';
+_Scroller.propTypes = /** @lends limestone/Scroller.Scroller.prototype */{
   /**
    * The "aria-label" for the Scroller.
    *
@@ -464,13 +465,13 @@ Scroller.propTypes = /** @lends limestone/Scroller.Scroller.prototype */{
    */
   verticalScrollThumbAriaLabel: _propTypes["default"].string
 };
-var ScrollerBase = exports.ScrollerBase = Scroller;
-exports.Scroller = Scroller = (0, _Skinnable["default"])((0, _SpotlightContainerDecorator["default"])({
+var ScrollerBase = exports.ScrollerBase = _Scroller;
+exports.Scroller = _Scroller = (0, _Skinnable["default"])((0, _SpotlightContainerDecorator["default"])({
   overflow: true,
   preserveId: true,
   restrict: 'self-first'
 }, (0, _I18nDecorator.I18nContextDecorator)({
   rtlProp: 'rtl'
-}, Scroller)));
-Scroller.defaultPropValues = scrollerDefaultProps;
-var _default = exports["default"] = Scroller;
+}, _Scroller)));
+_Scroller.defaultPropValues = scrollerDefaultProps;
+var _default = exports["default"] = _Scroller;

package/Scroller/Scroller.module.css

@@ -15,6 +15,16 @@
   border-radius: var(--primitive-radius-12);
   opacity: 0;
 }
+.focusableBody.hasVerticalScrollbar::before {
+  right: var(--scroll-scrollbar-size);
+}
+.focusableBody.hasHorizontalScrollbar::before {
+  bottom: var(--scroll-scrollbar-size);
+}
+:global(.enact-locale-right-to-left) .focusableBody.hasVerticalScrollbar::before {
+  right: 0;
+  left: var(--scroll-scrollbar-size);
+}
 :global(.spotlight-input-key):global(.spotlight-input-key) .focusableBody:global(.spottable):focus::before,
 :global(.spotlight-input-key):global(.spotlight-input-mouse) .focusableBody:global(.spottable):focus::before {
   background-color: color(from var(--semantic-color-surface-default-focused) srgb r g b / 0.1);

package/Scroller/tests/Scroller-specs.js

@@ -1,7 +1,9 @@
 "use strict";
 
 require("@testing-library/jest-dom");
+var _spotlight = _interopRequireDefault(require("@enact/spotlight"));
 var _react = require("@testing-library/react");
+var _react2 = require("react");
 var _Scroller = _interopRequireDefault(require("../Scroller"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
@@ -66,7 +68,7 @@ describe('Scroller', function () {
     });
   });
   describe('focusable Scrollbar', function () {
-    test('should have focuable body and thumb when \'focusableScrollbar\' is "byEnter"', function () {
+    test('should have focusable body and thumb when \'focusableScrollbar\' is "byEnter"', function () {
       var id = 'scroller';
       (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Scroller["default"], {
         "data-testid": id,
@@ -86,7 +88,7 @@ describe('Scroller', function () {
       expect(scrollBody).toHaveClass(expected);
       expect(verticalScrollbar).toHaveClass(expected);
     });
-    test('should have focuable scroll thumb when \'focusableScrollbar\' is true', function () {
+    test('should have focusable scroll thumb when \'focusableScrollbar\' is true', function () {
       var id = 'scroller';
       (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Scroller["default"], {
         "data-testid": id,
@@ -101,6 +103,93 @@ describe('Scroller', function () {
       expect(scrollBody).not.toHaveClass(expected);
       expect(verticalScrollbar).toHaveClass(expected);
     });
+    describe('ScrollbarPlaceholder focus restoration', function () {
+      var focusSpy, pointerModeSpy, currentSpy, pausedSpy, containerSpy;
+      var placeholderElement;
+      var renderWithFocusedPlaceholder = function renderWithFocusedPlaceholder() {
+        placeholderElement = null;
+        currentSpy.mockImplementation(function () {
+          return placeholderElement;
+        });
+        var onRender = function onRender(id, phase) {
+          if (phase === 'mount') {
+            placeholderElement = document.querySelector('[data-spotlight-ignore-restore]');
+          }
+        };
+        var view = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.Profiler, {
+          id: "placeholder",
+          onRender: onRender,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Scroller["default"], {
+            focusableScrollbar: "byEnter",
+            verticalScrollbar: "visible",
+            children: contents
+          })
+        }));
+        currentSpy.mockImplementation(function () {
+          return null;
+        });
+        focusSpy.mockClear();
+        return view;
+      };
+      beforeEach(function () {
+        jest.useFakeTimers();
+        focusSpy = jest.spyOn(_spotlight["default"], 'focus').mockImplementation(function () {
+          return true;
+        });
+        pointerModeSpy = jest.spyOn(_spotlight["default"], 'getPointerMode').mockReturnValue(false);
+        currentSpy = jest.spyOn(_spotlight["default"], 'getCurrent').mockReturnValue(null);
+        pausedSpy = jest.spyOn(_spotlight["default"], 'isPaused').mockReturnValue(false);
+        containerSpy = jest.spyOn(_spotlight["default"], 'getActiveContainer').mockReturnValue('active-container');
+      });
+      afterEach(function () {
+        focusSpy.mockRestore();
+        pointerModeSpy.mockRestore();
+        currentSpy.mockRestore();
+        pausedSpy.mockRestore();
+        containerSpy.mockRestore();
+        jest.useRealTimers();
+      });
+      test('should focus the active container after the placeholder disappears', function () {
+        renderWithFocusedPlaceholder();
+        (0, _react.act)(function () {
+          return jest.advanceTimersByTime(0);
+        });
+        expect(focusSpy).toHaveBeenCalledWith('active-container', {
+          toOuterContainer: true
+        });
+      });
+      test('should not focus when pointer mode is active', function () {
+        pointerModeSpy.mockReturnValue(true);
+        renderWithFocusedPlaceholder();
+        (0, _react.act)(function () {
+          return jest.advanceTimersByTime(0);
+        });
+        expect(focusSpy).not.toHaveBeenCalled();
+      });
+      test('should defer focus while spotlight is paused, then focus after 400ms once it unpauses', function () {
+        pausedSpy.mockReturnValue(true);
+        renderWithFocusedPlaceholder();
+        (0, _react.act)(function () {
+          return jest.advanceTimersByTime(0);
+        });
+        expect(focusSpy).not.toHaveBeenCalled();
+        pausedSpy.mockReturnValue(false);
+        (0, _react.act)(function () {
+          return jest.advanceTimersByTime(400);
+        });
+        expect(focusSpy).toHaveBeenCalledWith('active-container', {
+          toOuterContainer: true
+        });
+      });
+      test('should not focus after the 400ms retry if spotlight is still paused', function () {
+        pausedSpy.mockReturnValue(true);
+        renderWithFocusedPlaceholder();
+        (0, _react.act)(function () {
+          return jest.advanceTimersByTime(400);
+        });
+        expect(focusSpy).not.toHaveBeenCalled();
+      });
+    });
   });
   describe('Scrollbar accessibility', function () {
     test('should set a custom "aria-label" to the scroll thumb in the horizontal scroll bar', function () {

package/Scroller/useThemeScroller.js

@@ -128,12 +128,12 @@ var useSpottable = function useSpottable(props, instances) {
   var _useEventKey = (0, _useEvent.useEventKey)(),
     addGlobalKeyDownEventListener = _useEventKey.addGlobalKeyDownEventListener,
     removeGlobalKeyDownEventListener = _useEventKey.removeGlobalKeyDownEventListener;
-  var setContainerDisabled = (0, _react.useCallback)(function (bool) {
+  var setContainerDisabled = (0, _react.useCallback)(function self(bool) {
     if (scrollContainerRef.current) {
       scrollContainerRef.current.dataset.spotlightContainerDisabled = bool;
       if (bool) {
         addGlobalKeyDownEventListener(function () {
-          setContainerDisabled(false);
+          self(false);
         });
       } else {
         removeGlobalKeyDownEventListener();
@@ -377,6 +377,9 @@ var useThemeScroller = exports.useThemeScroller = function useThemeScroller(prop
   var _ref3 = props.focusableScrollbar === 'byEnter' ? getFocusableBodyProps(scrollContainerRef, contentId, isScrollbarVisible) : {},
     setNavigableFilter = _ref3.setNavigableFilter,
     focusableBodyProps = _objectWithoutProperties(_ref3, _excluded2);
+  if (focusableBodyProps.className) {
+    focusableBodyProps.className = (0, _classnames["default"])(focusableBodyProps.className, isVerticalScrollbarVisible && _ScrollerModule["default"].hasVerticalScrollbar, isHorizontalScrollbarVisible && _ScrollerModule["default"].hasHorizontalScrollbar);
+  }
   (0, _react.useLayoutEffect)(function () {
     // Initial filter setting
     if (setNavigableFilter) {
@@ -384,7 +387,7 @@ var useThemeScroller = exports.useThemeScroller = function useThemeScroller(prop
         filterTarget: 'body'
       });
     }
-  }, [props.focusableScrollbar, scrollContainerRef.current]); // eslint-disable-line react-hooks/exhaustive-deps
+  }, [props.focusableScrollbar, scrollContainerRef]); // eslint-disable-line react-hooks/exhaustive-deps
 
   scrollContentProps.setThemeScrollContentHandle({
     calculatePositionOnFocus: calculatePositionOnFocus,

package/Slider/Slider.d.ts

@@ -24,6 +24,10 @@ input keys.
    * Sets the knob to selected state and allows it to move via 5-way controls.
    */
   active?: boolean;
+  /**
+   * Indicates if this component will be used as a colorPicker.
+   */
+  colorPicker?: boolean;
   /**
  * Customizes the component by mapping the supplied collection of CSS class names to the
 corresponding internal elements and states of this component.

package/Slider/Slider.js

@@ -36,7 +36,7 @@ var _SliderBehaviorDecorator = _interopRequireDefault(require("./SliderBehaviorD
 var _utils = require("./utils");
 var _SliderModule = _interopRequireDefault(require("./Slider.module.css"));
 var _jsxRuntime = require("react/jsx-runtime");
-var _excluded = ["active", "className", "css", "disabled", "focused", "keyFrequency", "max", "min", "pressed", "showAnchor", "showMinMax"];
+var _excluded = ["active", "className", "colorPicker", "css", "disabled", "focused", "keyFrequency", "max", "min", "pressed", "showAnchor", "showMinMax"];
 /**
  * Provides Limestone-themed slider components and behaviors.
  *
@@ -66,6 +66,7 @@ function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t =
 var sliderDefaultProps = {
   activateOnSelect: false,
   active: false,
+  colorPicker: false,
   disabled: false,
   keyFrequency: [1],
   max: 100,
@@ -86,10 +87,12 @@ var sliderDefaultProps = {
  * @ui
  * @public
  */
-var SliderBase = exports.SliderBase = function SliderBase(props) {
+var _SliderBase = exports.SliderBase = function SliderBase(props) {
   var sliderProps = (0, _util.setDefaultProps)(props, sliderDefaultProps);
+  (0, _util.checkPropTypes)(_SliderBase, sliderProps);
   var active = sliderProps.active,
     className = sliderProps.className,
+    colorPicker = sliderProps.colorPicker,
     css = sliderProps.css,
     disabled = sliderProps.disabled,
     focused = sliderProps.focused,
@@ -114,12 +117,13 @@ var SliderBase = exports.SliderBase = function SliderBase(props) {
     valueName: 'max'
   })(sliderProps);
   var tooltip = sliderProps.tooltip === true ? _ProgressBar2.ProgressBarTooltip : sliderProps.tooltip;
+  var context = (0, _react.useMemo)(function () {
+    return {
+      lastWheelTimeStamp: 0
+    };
+  }, []);
   var spotlightAccelerator = (0, _react.useRef)();
   var ref = (0, _react.useRef)();
-  var _useRef = (0, _react.useRef)({
-      lastWheelTimeStamp: 0
-    }),
-    context = _useRef.current;
   var handlers = (0, _useHandlers["default"])({
     onBlur: (0, _handle.handle)((0, _handle.forward)('onBlur'), (0, _handle.forProp)('active', true), (0, _handle.forward)('onActivate')),
     onKeyDown: (0, _handle.handle)((0, _handle.forProp)('disabled', false), (0, _handle.forwardWithPrevent)('onKeyDown'), (0, _anyPass["default"])([_utils.handleIncrement, _utils.handleDecrement])),
@@ -135,7 +139,7 @@ var SliderBase = exports.SliderBase = function SliderBase(props) {
     customCss: css,
     publicClassNames: true
   });
-  var componentClassName = (0, _classnames2["default"])(_SliderModule["default"].slider, className, _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, mergedCss.active, active), mergedCss.hasMinMax, showMinMax), mergedCss.pressed, pressed), mergedCss.showAnchor, showAnchor), css && css.slider);
+  var componentClassName = (0, _classnames2["default"])(_SliderModule["default"].slider, className, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, mergedCss.active, active), mergedCss.colorPicker, colorPicker), mergedCss.hasMinMax, showMinMax), mergedCss.pressed, pressed), mergedCss.showAnchor, showAnchor), css && css.slider);
   (0, _react.useEffect)(function () {
     spotlightAccelerator.current = new _Accelerator["default"](keyFrequency);
   }, [keyFrequency]);
@@ -161,18 +165,30 @@ var SliderBase = exports.SliderBase = function SliderBase(props) {
   delete rest.step;
   delete rest.tooltip;
   delete rest.wheelInterval;
+  var sliderMax = colorPicker ? 360 : max;
+  var sliderMin = colorPicker ? 0 : min;
+  var sliderStep = colorPicker ? 1 : step;
+  var styleObject = {
+    '--semantic-color-surface-default-handle': "hsla(".concat(rest.value ? rest.value : 0, ", 100%, 50%, 1)"),
+    '--semantic-color-surface-default-focused': "hsla(".concat(rest.value ? rest.value : 0, ", 100%, 50%, 1)")
+  };
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Slider["default"], _objectSpread(_objectSpread(_objectSpread({}, rest), handlers), {}, {
     "aria-disabled": disabled,
+    colorPicker: colorPicker,
     className: componentClassName,
     css: mergedCss,
     disabled: disabled,
-    max: max,
-    min: min,
+    max: sliderMax,
+    min: sliderMin,
     progressBarComponent: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ProgressBar["default"], {
-      css: mergedCss
+      css: mergedCss,
+      style: {
+        backgroundImage: colorPicker && (0, _utils.hueGradient)(rest.orientation)
+      }
     }),
     ref: ref,
-    step: step,
+    step: sliderStep,
+    style: colorPicker && styleObject,
     tooltipComponent: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ComponentOverride["default"], {
       component: tooltip,
       css: mergedCss,
@@ -181,15 +197,15 @@ var SliderBase = exports.SliderBase = function SliderBase(props) {
     minMaxComponent: showMinMax ? /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: mergedCss.minMax,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        children: min
+        children: sliderMin
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        children: max
+        children: sliderMax
       })]
     }) : null
   }));
 };
-SliderBase.displayName = 'Slider';
-SliderBase.propTypes = /** @lends limestone/Slider.SliderBase.prototype */{
+_SliderBase.displayName = 'Slider';
+_SliderBase.propTypes = /** @lends limestone/Slider.SliderBase.prototype */{
   /**
    * Activates the component when selected so that it may be manipulated via the directional
    * input keys.
@@ -205,6 +221,14 @@ SliderBase.propTypes = /** @lends limestone/Slider.SliderBase.prototype */{
    * @public
    */
   active: _propTypes["default"].bool,
+  /**
+   * Indicates if this component will be used as a colorPicker.
+   *
+   * @type {Boolean}
+   * @default false
+   * @public
+   */
+  colorPicker: _propTypes["default"].bool,
   /**
    * Customizes the component by mapping the supplied collection of CSS class names to the
    * corresponding internal elements and states of this component.
@@ -457,7 +481,7 @@ var SliderDecorator = exports.SliderDecorator = (0, _compose["default"])(_Pure["
  * @public
  */
 
-var Slider = exports.Slider = SliderDecorator(SliderBase);
+var Slider = exports.Slider = SliderDecorator(_SliderBase);
 Slider.defaultPropValues = sliderDefaultProps;
 
 /**