@enact/limestone 1.3.0 → 1.10.0

package/RadioItem/RadioItem.module.css

@@ -15,8 +15,8 @@
 }
 .radioItem:global(.neutral).selected .icon {
   color: var(--semantic-color-on-surface-main-selected);
-  background-color: var(--semantic-color-surface-accent);
-  box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-accent);
+  background-color: var(--semantic-color-surface-highlight);
+  box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-highlight);
 }
 .radioItem:global(.neutral).selected .bg {
   background-color: transparent;
@@ -30,8 +30,8 @@
 :global(.spotlight-input-key) .radioItem:global(.neutral):global(.spottable):focus.selected .icon,
 :global(.spotlight-input-mouse) .radioItem:global(.neutral):global(.spottable):focus.selected .icon {
   color: var(--semantic-color-on-surface-main-selected);
-  background-color: var(--semantic-color-surface-accent);
-  box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-accent);
+  background-color: var(--semantic-color-surface-highlight);
+  box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-highlight);
 }
 :global(.spotlight-input-touch) .radioItem:global(.neutral):global(.spottable):active .icon {
   color: transparent;
@@ -40,8 +40,8 @@
 }
 :global(.spotlight-input-touch) .radioItem:global(.neutral):global(.spottable):active.selected .icon {
   color: var(--semantic-color-on-surface-main-selected);
-  background-color: var(--semantic-color-surface-accent);
-  box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-accent);
+  background-color: var(--semantic-color-surface-highlight);
+  box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-highlight);
 }
 :global(.enact-a11y-high-contrast) .radioItem:global(.neutral):global(.highContrast) .icon {
   color: transparent;
@@ -50,8 +50,8 @@
 }
 :global(.enact-a11y-high-contrast) .radioItem:global(.neutral):global(.highContrast).selected .icon {
   color: var(--semantic-color-on-surface-main-selected);
-  background-color: var(--semantic-color-surface-accent);
-  box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-accent);
+  background-color: var(--semantic-color-surface-highlight);
+  box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-highlight);
 }
 :global(.enact-a11y-high-contrast) .radioItem:global(.neutral):global(.highContrast).selected .bg {
   background-color: transparent;
@@ -65,8 +65,8 @@
 :global(.spotlight-input-key) :global(.enact-a11y-high-contrast) .radioItem:global(.neutral):global(.highContrast):global(.spottable):focus.selected .icon,
 :global(.spotlight-input-mouse) :global(.enact-a11y-high-contrast) .radioItem:global(.neutral):global(.highContrast):global(.spottable):focus.selected .icon {
   color: var(--semantic-color-on-surface-main-selected);
-  background-color: var(--semantic-color-surface-accent);
-  box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-accent);
+  background-color: var(--semantic-color-surface-highlight);
+  box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-highlight);
 }
 :global(.spotlight-input-touch) :global(.enact-a11y-high-contrast) .radioItem:global(.neutral):global(.highContrast):global(.spottable):active .icon {
   color: transparent;
@@ -75,8 +75,8 @@
 }
 :global(.spotlight-input-touch) :global(.enact-a11y-high-contrast) .radioItem:global(.neutral):global(.highContrast):global(.spottable):active.selected .icon {
   color: var(--semantic-color-on-surface-main-selected);
-  background-color: var(--semantic-color-surface-accent);
-  box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-accent);
+  background-color: var(--semantic-color-surface-highlight);
+  box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-highlight);
 }
 .radioItem:global(.light) .icon {
   color: transparent;
@@ -85,8 +85,8 @@
 }
 .radioItem:global(.light).selected .icon {
   color: var(--semantic-color-on-surface-main-selected);
-  background-color: var(--semantic-color-surface-accent);
-  box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-accent);
+  background-color: var(--semantic-color-surface-highlight);
+  box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-highlight);
 }
 .radioItem:global(.light).selected .bg {
   background-color: transparent;
@@ -100,8 +100,8 @@
 :global(.spotlight-input-key) .radioItem:global(.light):global(.spottable):focus.selected .icon,
 :global(.spotlight-input-mouse) .radioItem:global(.light):global(.spottable):focus.selected .icon {
   color: var(--semantic-color-on-surface-main-selected);
-  background-color: var(--semantic-color-surface-accent);
-  box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-accent);
+  background-color: var(--semantic-color-surface-highlight);
+  box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-highlight);
 }
 :global(.spotlight-input-touch) .radioItem:global(.light):global(.spottable):active .icon {
   color: transparent;
@@ -110,8 +110,8 @@
 }
 :global(.spotlight-input-touch) .radioItem:global(.light):global(.spottable):active.selected .icon {
   color: var(--semantic-color-on-surface-main-selected);
-  background-color: var(--semantic-color-surface-accent);
-  box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-accent);
+  background-color: var(--semantic-color-surface-highlight);
+  box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-highlight);
 }
 .radioItem:global(.game) {
   --semantic-color-surface-default: #2d224c;
@@ -125,8 +125,8 @@
 }
 .radioItem:global(.game).selected .icon {
   color: var(--semantic-color-on-surface-main-selected);
-  background-color: var(--semantic-color-surface-accent);
-  box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-accent);
+  background-color: var(--semantic-color-surface-highlight);
+  box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-highlight);
 }
 .radioItem:global(.game).selected .bg {
   background-color: transparent;
@@ -140,8 +140,8 @@
 :global(.spotlight-input-key) .radioItem:global(.game):global(.spottable):focus.selected .icon,
 :global(.spotlight-input-mouse) .radioItem:global(.game):global(.spottable):focus.selected .icon {
   color: var(--semantic-color-on-surface-main-selected);
-  background-color: var(--semantic-color-surface-accent);
-  box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-accent);
+  background-color: var(--semantic-color-surface-highlight);
+  box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-highlight);
 }
 :global(.spotlight-input-touch) .radioItem:global(.game):global(.spottable):active .icon {
   color: transparent;
@@ -150,8 +150,8 @@
 }
 :global(.spotlight-input-touch) .radioItem:global(.game):global(.spottable):active.selected .icon {
   color: var(--semantic-color-on-surface-main-selected);
-  background-color: var(--semantic-color-surface-accent);
-  box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-accent);
+  background-color: var(--semantic-color-surface-highlight);
+  box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-highlight);
 }
 :global(.green) .radioItem:global(.game) {
   --semantic-color-surface-default: #1F2C24;
@@ -164,8 +164,8 @@
 }
 :global(.green) .radioItem:global(.game).selected .icon {
   color: var(--semantic-color-on-surface-main-selected);
-  background-color: var(--semantic-color-surface-accent);
-  box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-accent);
+  background-color: var(--semantic-color-surface-highlight);
+  box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-highlight);
 }
 :global(.green) .radioItem:global(.game).selected .bg {
   background-color: transparent;
@@ -179,8 +179,8 @@
 :global(.spotlight-input-key) :global(.green) .radioItem:global(.game):global(.spottable):focus.selected .icon,
 :global(.spotlight-input-mouse) :global(.green) .radioItem:global(.game):global(.spottable):focus.selected .icon {
   color: var(--semantic-color-on-surface-main-selected);
-  background-color: var(--semantic-color-surface-accent);
-  box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-accent);
+  background-color: var(--semantic-color-surface-highlight);
+  box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-highlight);
 }
 :global(.spotlight-input-touch) :global(.green) .radioItem:global(.game):global(.spottable):active .icon {
   color: transparent;
@@ -189,8 +189,8 @@
 }
 :global(.spotlight-input-touch) :global(.green) .radioItem:global(.game):global(.spottable):active.selected .icon {
   color: var(--semantic-color-on-surface-main-selected);
-  background-color: var(--semantic-color-surface-accent);
-  box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-accent);
+  background-color: var(--semantic-color-surface-highlight);
+  box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-highlight);
 }
 :global(.orange) .radioItem:global(.game) {
   --semantic-color-surface-default: #422923;
@@ -203,8 +203,8 @@
 }
 :global(.orange) .radioItem:global(.game).selected .icon {
   color: var(--semantic-color-on-surface-main-selected);
-  background-color: var(--semantic-color-surface-accent);
-  box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-accent);
+  background-color: var(--semantic-color-surface-highlight);
+  box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-highlight);
 }
 :global(.orange) .radioItem:global(.game).selected .bg {
   background-color: transparent;
@@ -218,8 +218,8 @@
 :global(.spotlight-input-key) :global(.orange) .radioItem:global(.game):global(.spottable):focus.selected .icon,
 :global(.spotlight-input-mouse) :global(.orange) .radioItem:global(.game):global(.spottable):focus.selected .icon {
   color: var(--semantic-color-on-surface-main-selected);
-  background-color: var(--semantic-color-surface-accent);
-  box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-accent);
+  background-color: var(--semantic-color-surface-highlight);
+  box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-highlight);
 }
 :global(.spotlight-input-touch) :global(.orange) .radioItem:global(.game):global(.spottable):active .icon {
   color: transparent;
@@ -228,6 +228,6 @@
 }
 :global(.spotlight-input-touch) :global(.orange) .radioItem:global(.game):global(.spottable):active.selected .icon {
   color: var(--semantic-color-on-surface-main-selected);
-  background-color: var(--semantic-color-surface-accent);
-  box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-accent);
+  background-color: var(--semantic-color-surface-highlight);
+  box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-highlight);
 }

package/RangePicker/RangePicker.module.css

@@ -8,12 +8,12 @@
   margin-bottom: 0;
 }
 .title {
-  margin-left: 1.875rem;
+  margin-left: calc(var(--primitive-spacing-36) + var(--primitive-spacing-36) + 18px);
   margin-right: var(--primitive-spacing-24);
 }
 :global(.enact-locale-right-to-left) .title {
   margin-left: var(--primitive-spacing-24);
-  margin-right: 1.875rem;
+  margin-right: calc(var(--primitive-spacing-36) + var(--primitive-spacing-36) + 18px);
 }
 .title.inlineTitle {
   display: inline-block;

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
 
@@ -228,9 +229,6 @@ var EditableWrapper = exports.EditableWrapper = function EditableWrapper(props)
       mutableRef.current.prevToIndex = mutableRef.current.fromIndex;
       updateArrowIcon(mutableRef.current.fromIndex);
       setTimeout(function () {
-        if (item !== null && item !== void 0 && item.children[1]) {
-          item.children[1].ariaLabel = '';
-        }
         if (!mutableRef.current.initialSelected) {
           announceRef.current.announce(mutableRef.current.selectedItemLabel + (0, _$L["default"])('Press the left/right button to move or press the up button to select other options.'));
         }
@@ -615,8 +613,8 @@ 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);
       focusItem(focusTarget);
     }
     setTimeout(function () {
@@ -889,27 +887,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 () {
@@ -982,6 +980,18 @@ var EditableWrapper = exports.EditableWrapper = function EditableWrapper(props)
     });
   }, []); // eslint-disable-line react-hooks/exhaustive-deps
 
+  // 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'] + '"]');
+        hiddenElement.setAttribute('data-is-hiding', true);
+      }
+    });
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(TouchableDiv, {
     holdConfig: holdConfig,
     className: (0, _classnames["default"])(mergedCss.wrapper, _defineProperty({}, mergedCss.centered, centered)),
@@ -1000,8 +1010,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.
@@ -1033,4 +1043,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.d.ts

@@ -19,43 +19,43 @@ export interface EditableShape {
  * The callback function called when editing is finished.
 It has an event object contains  `orders`  array which app can use for repopulate items.
  */
-  onComplete: Function /**
+  onComplete: Function; /**
  * Obtains a reference to  `blurItem`  function.
 If you would like to remove  `focused`  CSS class to an item, you can get the reference to  `blurItem`  function via  `useRef` .
  `blurItem`  function needs to be called with an item node when an item is blurred.
- */;
-  blurItemFuncRef?: Function | object /**
+ */
+  blurItemFuncRef?: Function | object; /**
    * Centers the contents of the scroller.
-   */;
-  centered?: boolean /**
+   */
+  centered?: boolean; /**
  * Customizes the component by mapping the supplied collection of CSS class names to the
 corresponding internal elements and states of this component.
 The following classes are supported:
  * *  `wrapper`  - The content wrapper component class
  * *  `selected`  - The selected item class
  * *  `focused`  - The focused item class
- */;
-  css?: object /**
+ */
+  css?: object; /**
  * Obtains a reference to  `focusItem`  function.
 If you would like to use  `focused`  CSS class to an item, you can get the reference to  `focusItem`  function via  `useRef` .
  `focusItem`  function needs to be called with an item node when an item is focused.
- */;
-  focusItemFuncRef?: Function | object /**
+ */
+  focusItemFuncRef?: Function | object; /**
  * Obtains a reference to  `hideItem`  function.
 If you would like to hide an item, you can get the reference to  `hideItem`  function via  `useRef` .
- */;
-  hideItemFuncRef?: Function | object /**
+ */
+  hideItemFuncRef?: Function | object; /**
  * Obtains a reference to  `removeItem`  function.
 If you would like to remove an item, you can get the reference to  `removeItem`  function via  `useRef` .
- */;
-  removeItemFuncRef?: Function | object /**
+ */
+  removeItemFuncRef?: Function | object; /**
  * Decides how to start editing items.
 It can be either  `'press'`  or  `'longPress'` . If unset, it defaults to  `'longPress'` .
- */;
-  selectItemBy?: string /**
+ */
+  selectItemBy?: string; /**
  * Obtains a reference to  `showItem`  function.
 If you would like to show an item, you can get the reference to  `showItem`  function via  `useRef` .
- */;
+ */
   showItemFuncRef?: Function | object;
 }
 export interface ScrollerProps extends ui_Scroller_ScrollerBasicProps {
@@ -217,6 +217,10 @@ corresponding internal elements and states of this component.
    * Specifies how to scroll.
    */
   scrollMode?: "native" | "translate";
+  /**
+   * Scrolls to the container created by    when descendants get focused.
+   */
+  scrollToContentContainerOnFocus?: boolean;
   /**
    * Specifies how to show vertical scrollbar.
    */

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");
@@ -78,6 +78,7 @@ var scrollerDefaultProps = {
     track: false,
     wheel: true
   },
+  scrollToContentContainerOnFocus: true,
   scrollMode: 'native',
   verticalScrollbar: 'auto'
 };
@@ -96,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,
@@ -114,9 +116,7 @@ var Scroller = exports.Scroller = function Scroller(props) {
 
   // Hooks
 
-  var _useScroll = (0, _useScroll2["default"])(_objectSpread(_objectSpread({}, rest), {}, {
-      scrollToContentContainerOnFocus: true
-    })),
+  var _useScroll = (0, _useScroll2["default"])(_objectSpread({}, rest)),
     ScrollContentWrapper = _useScroll.scrollContentWrapper,
     scrollContentHandle = _useScroll.scrollContentHandle,
     isHorizontalScrollbarVisible = _useScroll.isHorizontalScrollbarVisible,
@@ -147,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,
@@ -157,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.
    *
@@ -441,6 +441,13 @@ Scroller.propTypes = /** @lends limestone/Scroller.Scroller.prototype */{
    * @public
    */
   scrollMode: _propTypes["default"].oneOf(['native', 'translate']),
+  /**
+   * Scrolls to the container created by {@link limestone/Scroller.ContentContainerDecorator} when descendants get focused.
+   * @type {Boolean}
+   * @default true
+   * @public
+   */
+  scrollToContentContainerOnFocus: _propTypes["default"].bool,
   /**
    * Specifies how to show vertical scrollbar.
    *
@@ -458,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

@@ -12,7 +12,7 @@
   right: 0;
   bottom: 0;
   left: 0;
-  border-radius: 0.25rem;
+  border-radius: var(--primitive-radius-12);
   opacity: 0;
 }
 :global(.spotlight-input-key):global(.spotlight-input-key) .focusableBody:global(.spottable):focus::before,
@@ -29,11 +29,11 @@
   mask-image: linear-gradient(transparent, #000 1rem, #000 calc(100% - 1rem), transparent 100%);
 }
 .focusableBody .verticalFadeout {
-  padding: 1.5rem 1rem 1.5rem 1.875rem;
-  mask-image: linear-gradient(transparent 0.5rem, #000 calc(0.5rem + 1rem), #000 calc(100% - 1rem - 0.5rem), transparent calc(100% - 0.5rem));
+  padding: var(--primitive-spacing-72) var(--primitive-spacing-48) var(--primitive-spacing-72) var(--primitive-spacing-90);
+  mask-image: linear-gradient(transparent var(--primitive-spacing-24), #000 calc(var(--primitive-spacing-24) + 1rem), #000 calc(100% - 1rem - var(--primitive-spacing-24)), transparent calc(100% - var(--primitive-spacing-24)));
 }
 :global(.enact-locale-right-to-left) .focusableBody .verticalFadeout {
-  padding: 1.5rem 1.875rem 1.5rem 1rem;
+  padding: var(--primitive-spacing-72) var(--primitive-spacing-90) var(--primitive-spacing-72) var(--primitive-spacing-48);
 }
 .horizontalFadeout {
   padding: 0 1rem;

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();
@@ -384,7 +384,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

@@ -11,8 +11,10 @@ import { SliderBaseProps as ui_Slider_SliderBaseProps } from "@enact/ui/Slider";
 type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;
 type Merge<M, N> = Omit<M, Extract<keyof M, keyof N>> & N;
 
-export interface SliderBaseProps
-  extends Omit<ui_Slider_SliderBaseProps, "progressBarComponent"> {
+export interface SliderBaseProps extends Omit<
+  ui_Slider_SliderBaseProps,
+  "progressBarComponent"
+> {
   /**
  * Activates the component when selected so that it may be manipulated via the directional
 input keys.
@@ -22,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.
@@ -104,6 +110,10 @@ this callback.
    * Displays an anchor at  `progressAnchor` .
    */
   showAnchor?: boolean;
+  /**
+   * Displays the min and max values at the edges of the slider.
+   */
+  showMinMax?: boolean;
   /**
    * The amount to increment or decrement the value.
    *
@@ -162,20 +172,16 @@ export class SliderBase extends React.Component<
   Merge<React.HTMLProps<HTMLElement>, SliderBaseProps>
 > {}
 
-export interface SliderDecoratorProps
-  extends Merge<
+export interface SliderDecoratorProps extends Merge<
+  Merge<
     Merge<
-      Merge<
-        Merge<
-          ui_Changeable_ChangeableProps,
-          spotlight_Spottable_SpottableProps
-        >,
-        limestone_Skinnable_SkinnableProps
-      >,
-      ui_Slottable_SlottableProps
+      Merge<ui_Changeable_ChangeableProps, spotlight_Spottable_SpottableProps>,
+      limestone_Skinnable_SkinnableProps
     >,
-    ui_Slider_SliderDecoratorProps
-  > {}
+    ui_Slottable_SlottableProps
+  >,
+  ui_Slider_SliderDecoratorProps
+> {}
 export function SliderDecorator<P>(
   Component: React.ComponentType<P> | string,
 ): React.ComponentType<P & SliderDecoratorProps>;