@enact/limestone 1.3.0 → 1.9.3

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

@@ -228,9 +228,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 +612,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 () {
@@ -982,6 +979,16 @@ 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 () {
+    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)),

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

@@ -78,6 +78,7 @@ var scrollerDefaultProps = {
     track: false,
     wheel: true
   },
+  scrollToContentContainerOnFocus: true,
   scrollMode: 'native',
   verticalScrollbar: 'auto'
 };
@@ -114,9 +115,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,
@@ -441,6 +440,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.
    *

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/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.
@@ -104,6 +106,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 +168,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>;

package/Slider/Slider.js

@@ -23,6 +23,7 @@ var _ProgressBar = _interopRequireDefault(require("@enact/ui/ProgressBar"));
 var _Pure = _interopRequireDefault(require("@enact/ui/internal/Pure"));
 var _Slottable = _interopRequireDefault(require("@enact/ui/Slottable"));
 var _Slider = _interopRequireDefault(require("@enact/ui/Slider"));
+var _Touchable = _interopRequireDefault(require("@enact/ui/Touchable"));
 var _classnames2 = _interopRequireDefault(require("classnames"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _anyPass = _interopRequireDefault(require("ramda/src/anyPass"));
@@ -35,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", "showAnchor"];
+var _excluded = ["active", "className", "css", "disabled", "focused", "keyFrequency", "max", "min", "pressed", "showAnchor", "showMinMax"];
 /**
  * Provides Limestone-themed slider components and behaviors.
  *
@@ -70,6 +71,7 @@ var sliderDefaultProps = {
   max: 100,
   min: 0,
   orientation: 'horizontal',
+  pressed: false,
   step: 1,
   wheelInterval: 0
 };
@@ -92,7 +94,11 @@ var SliderBase = exports.SliderBase = function SliderBase(props) {
     disabled = sliderProps.disabled,
     focused = sliderProps.focused,
     keyFrequency = sliderProps.keyFrequency,
+    max = sliderProps.max,
+    min = sliderProps.min,
+    pressed = sliderProps.pressed,
     showAnchor = sliderProps.showAnchor,
+    showMinMax = sliderProps.showMinMax,
     rest = _objectWithoutProperties(sliderProps, _excluded);
   (0, _validators.validateSteppedOnce)(function (p) {
     return p.knobStep;
@@ -129,7 +135,7 @@ var SliderBase = exports.SliderBase = function SliderBase(props) {
     customCss: css,
     publicClassNames: true
   });
-  var componentClassName = (0, _classnames2["default"])(_SliderModule["default"].slider, className, _defineProperty(_defineProperty({}, mergedCss.active, active), mergedCss.showAnchor, showAnchor), css && css.slider);
+  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);
   (0, _react.useEffect)(function () {
     spotlightAccelerator.current = new _Accelerator["default"](keyFrequency);
   }, [keyFrequency]);
@@ -160,6 +166,8 @@ var SliderBase = exports.SliderBase = function SliderBase(props) {
     className: componentClassName,
     css: mergedCss,
     disabled: disabled,
+    max: max,
+    min: min,
     progressBarComponent: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ProgressBar["default"], {
       css: mergedCss
     }),
@@ -169,7 +177,15 @@ var SliderBase = exports.SliderBase = function SliderBase(props) {
       component: tooltip,
       css: mergedCss,
       visible: focused
-    })
+    }),
+    minMaxComponent: showMinMax ? /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: mergedCss.minMax,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        children: min
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        children: max
+      })]
+    }) : null
   }));
 };
 SliderBase.displayName = 'Slider';
@@ -304,6 +320,14 @@ SliderBase.propTypes = /** @lends limestone/Slider.SliderBase.prototype */{
    * @public
    */
   onKeyUp: _propTypes["default"].func,
+  /**
+   * Indicates if the component is pressed.
+   *
+   * @type {Boolean}
+   * @default false
+   * @private
+   */
+  pressed: _propTypes["default"].bool,
   /**
    * Displays an anchor at `progressAnchor`.
    *
@@ -311,6 +335,13 @@ SliderBase.propTypes = /** @lends limestone/Slider.SliderBase.prototype */{
    * @public
    */
   showAnchor: _propTypes["default"].bool,
+  /**
+   * Displays the min and max values at the edges of the slider.
+   *
+   * @type {Boolean}
+   * @public
+   */
+  showMinMax: _propTypes["default"].bool,
   /**
    * The amount to increment or decrement the value.
    *
@@ -391,7 +422,9 @@ SliderBase.propTypes = /** @lends limestone/Slider.SliderBase.prototype */{
  * @mixes ui/Slider.SliderDecorator
  * @public
  */
-var SliderDecorator = exports.SliderDecorator = (0, _compose["default"])(_Pure["default"], _Changeable["default"], _SliderBehaviorDecorator["default"], _Spottable["default"], (0, _Slottable["default"])({
+var SliderDecorator = exports.SliderDecorator = (0, _compose["default"])(_Pure["default"], (0, _Touchable["default"])({
+  activeProp: 'pressed'
+}), _Changeable["default"], _SliderBehaviorDecorator["default"], _Spottable["default"], (0, _Slottable["default"])({
   slots: ['knob', 'tooltip']
 }), _Skinnable["default"]);