@enact/limestone 1.9.3 → 1.10.1

package/Slider/Slider.module.css

@@ -169,9 +169,6 @@ Motion Mixins
 .slider.horizontal .minMax {
   margin-top: var(--primitive-spacing-24);
 }
-.slider.horizontal:global(.largeText) {
-  padding: 0.25rem 0.375rem;
-}
 .slider.vertical {
   padding: 0.375rem 0.5rem;
   min-height: 5rem;
@@ -341,6 +338,31 @@ Motion Mixins
 :global(.spotlight-input-touch) .slider:global(.neutral).noFill:global(.spottable):active.pressed .fill {
   background-color: transparent;
 }
+.slider:global(.neutral).colorPicker .bar,
+.slider:global(.neutral).colorPicker .fill,
+.slider:global(.neutral).colorPicker .load {
+  background-color: transparent;
+}
+:global(.spotlight-input-key) .slider:global(.neutral).colorPicker:global(.spottable):focus .bar,
+:global(.spotlight-input-mouse) .slider:global(.neutral).colorPicker:global(.spottable):focus .bar,
+:global(.spotlight-input-key) .slider:global(.neutral).colorPicker:global(.spottable):focus .fill,
+:global(.spotlight-input-mouse) .slider:global(.neutral).colorPicker:global(.spottable):focus .fill,
+:global(.spotlight-input-key) .slider:global(.neutral).colorPicker:global(.spottable):focus .load,
+:global(.spotlight-input-mouse) .slider:global(.neutral).colorPicker:global(.spottable):focus .load {
+  background-color: transparent;
+}
+:global(.spotlight-input-key) .slider:global(.neutral).colorPicker:global(.spottable):focus .knob::before,
+:global(.spotlight-input-mouse) .slider:global(.neutral).colorPicker:global(.spottable):focus .knob::before {
+  border-color: var(--semantic-color-surface-white);
+}
+:global(.spotlight-input-touch) .slider:global(.neutral).colorPicker:global(.spottable):active .bar,
+:global(.spotlight-input-touch) .slider:global(.neutral).colorPicker:global(.spottable):active .fill,
+:global(.spotlight-input-touch) .slider:global(.neutral).colorPicker:global(.spottable):active .load {
+  background-color: transparent;
+}
+:global(.spotlight-input-touch) .slider:global(.neutral).colorPicker:global(.spottable):active .knob::before {
+  border-color: var(--semantic-color-surface-white);
+}
 .slider:global(.neutral).showAnchor .progressBar::after {
   background-color: color(from var(--semantic-color-surface-default-track) srgb r g b / 0.7);
 }
@@ -486,6 +508,31 @@ Motion Mixins
 :global(.spotlight-input-touch) :global(.enact-a11y-high-contrast) .slider:global(.neutral):global(.highContrast).noFill:global(.spottable):active.pressed .fill {
   background-color: transparent;
 }
+:global(.enact-a11y-high-contrast) .slider:global(.neutral):global(.highContrast).colorPicker .bar,
+:global(.enact-a11y-high-contrast) .slider:global(.neutral):global(.highContrast).colorPicker .fill,
+:global(.enact-a11y-high-contrast) .slider:global(.neutral):global(.highContrast).colorPicker .load {
+  background-color: transparent;
+}
+:global(.spotlight-input-key) :global(.enact-a11y-high-contrast) .slider:global(.neutral):global(.highContrast).colorPicker:global(.spottable):focus .bar,
+:global(.spotlight-input-mouse) :global(.enact-a11y-high-contrast) .slider:global(.neutral):global(.highContrast).colorPicker:global(.spottable):focus .bar,
+:global(.spotlight-input-key) :global(.enact-a11y-high-contrast) .slider:global(.neutral):global(.highContrast).colorPicker:global(.spottable):focus .fill,
+:global(.spotlight-input-mouse) :global(.enact-a11y-high-contrast) .slider:global(.neutral):global(.highContrast).colorPicker:global(.spottable):focus .fill,
+:global(.spotlight-input-key) :global(.enact-a11y-high-contrast) .slider:global(.neutral):global(.highContrast).colorPicker:global(.spottable):focus .load,
+:global(.spotlight-input-mouse) :global(.enact-a11y-high-contrast) .slider:global(.neutral):global(.highContrast).colorPicker:global(.spottable):focus .load {
+  background-color: transparent;
+}
+:global(.spotlight-input-key) :global(.enact-a11y-high-contrast) .slider:global(.neutral):global(.highContrast).colorPicker:global(.spottable):focus .knob::before,
+:global(.spotlight-input-mouse) :global(.enact-a11y-high-contrast) .slider:global(.neutral):global(.highContrast).colorPicker:global(.spottable):focus .knob::before {
+  border-color: var(--semantic-color-surface-white);
+}
+:global(.spotlight-input-touch) :global(.enact-a11y-high-contrast) .slider:global(.neutral):global(.highContrast).colorPicker:global(.spottable):active .bar,
+:global(.spotlight-input-touch) :global(.enact-a11y-high-contrast) .slider:global(.neutral):global(.highContrast).colorPicker:global(.spottable):active .fill,
+:global(.spotlight-input-touch) :global(.enact-a11y-high-contrast) .slider:global(.neutral):global(.highContrast).colorPicker:global(.spottable):active .load {
+  background-color: transparent;
+}
+:global(.spotlight-input-touch) :global(.enact-a11y-high-contrast) .slider:global(.neutral):global(.highContrast).colorPicker:global(.spottable):active .knob::before {
+  border-color: var(--semantic-color-surface-white);
+}
 :global(.enact-a11y-high-contrast) .slider:global(.neutral):global(.highContrast).showAnchor .progressBar::after {
   background-color: color(from var(--semantic-color-surface-default-track) srgb r g b / 0.7);
 }
@@ -631,6 +678,31 @@ Motion Mixins
 :global(.spotlight-input-touch) .slider:global(.light).noFill:global(.spottable):active.pressed .fill {
   background-color: transparent;
 }
+.slider:global(.light).colorPicker .bar,
+.slider:global(.light).colorPicker .fill,
+.slider:global(.light).colorPicker .load {
+  background-color: transparent;
+}
+:global(.spotlight-input-key) .slider:global(.light).colorPicker:global(.spottable):focus .bar,
+:global(.spotlight-input-mouse) .slider:global(.light).colorPicker:global(.spottable):focus .bar,
+:global(.spotlight-input-key) .slider:global(.light).colorPicker:global(.spottable):focus .fill,
+:global(.spotlight-input-mouse) .slider:global(.light).colorPicker:global(.spottable):focus .fill,
+:global(.spotlight-input-key) .slider:global(.light).colorPicker:global(.spottable):focus .load,
+:global(.spotlight-input-mouse) .slider:global(.light).colorPicker:global(.spottable):focus .load {
+  background-color: transparent;
+}
+:global(.spotlight-input-key) .slider:global(.light).colorPicker:global(.spottable):focus .knob::before,
+:global(.spotlight-input-mouse) .slider:global(.light).colorPicker:global(.spottable):focus .knob::before {
+  border-color: var(--semantic-color-surface-white);
+}
+:global(.spotlight-input-touch) .slider:global(.light).colorPicker:global(.spottable):active .bar,
+:global(.spotlight-input-touch) .slider:global(.light).colorPicker:global(.spottable):active .fill,
+:global(.spotlight-input-touch) .slider:global(.light).colorPicker:global(.spottable):active .load {
+  background-color: transparent;
+}
+:global(.spotlight-input-touch) .slider:global(.light).colorPicker:global(.spottable):active .knob::before {
+  border-color: var(--semantic-color-surface-white);
+}
 .slider:global(.light).showAnchor .progressBar::after {
   background-color: color(from var(--semantic-color-surface-default-track) srgb r g b / 0.7);
 }
@@ -781,6 +853,31 @@ Motion Mixins
 :global(.spotlight-input-touch) .slider:global(.game).noFill:global(.spottable):active.pressed .fill {
   background-color: transparent;
 }
+.slider:global(.game).colorPicker .bar,
+.slider:global(.game).colorPicker .fill,
+.slider:global(.game).colorPicker .load {
+  background-color: transparent;
+}
+:global(.spotlight-input-key) .slider:global(.game).colorPicker:global(.spottable):focus .bar,
+:global(.spotlight-input-mouse) .slider:global(.game).colorPicker:global(.spottable):focus .bar,
+:global(.spotlight-input-key) .slider:global(.game).colorPicker:global(.spottable):focus .fill,
+:global(.spotlight-input-mouse) .slider:global(.game).colorPicker:global(.spottable):focus .fill,
+:global(.spotlight-input-key) .slider:global(.game).colorPicker:global(.spottable):focus .load,
+:global(.spotlight-input-mouse) .slider:global(.game).colorPicker:global(.spottable):focus .load {
+  background-color: transparent;
+}
+:global(.spotlight-input-key) .slider:global(.game).colorPicker:global(.spottable):focus .knob::before,
+:global(.spotlight-input-mouse) .slider:global(.game).colorPicker:global(.spottable):focus .knob::before {
+  border-color: var(--semantic-color-surface-white);
+}
+:global(.spotlight-input-touch) .slider:global(.game).colorPicker:global(.spottable):active .bar,
+:global(.spotlight-input-touch) .slider:global(.game).colorPicker:global(.spottable):active .fill,
+:global(.spotlight-input-touch) .slider:global(.game).colorPicker:global(.spottable):active .load {
+  background-color: transparent;
+}
+:global(.spotlight-input-touch) .slider:global(.game).colorPicker:global(.spottable):active .knob::before {
+  border-color: var(--semantic-color-surface-white);
+}
 .slider:global(.game).showAnchor .progressBar::after {
   background-color: color(from var(--semantic-color-surface-default-track) srgb r g b / 0.7);
 }
@@ -930,6 +1027,31 @@ Motion Mixins
 :global(.spotlight-input-touch) :global(.green) .slider:global(.game).noFill:global(.spottable):active.pressed .fill {
   background-color: transparent;
 }
+:global(.green) .slider:global(.game).colorPicker .bar,
+:global(.green) .slider:global(.game).colorPicker .fill,
+:global(.green) .slider:global(.game).colorPicker .load {
+  background-color: transparent;
+}
+:global(.spotlight-input-key) :global(.green) .slider:global(.game).colorPicker:global(.spottable):focus .bar,
+:global(.spotlight-input-mouse) :global(.green) .slider:global(.game).colorPicker:global(.spottable):focus .bar,
+:global(.spotlight-input-key) :global(.green) .slider:global(.game).colorPicker:global(.spottable):focus .fill,
+:global(.spotlight-input-mouse) :global(.green) .slider:global(.game).colorPicker:global(.spottable):focus .fill,
+:global(.spotlight-input-key) :global(.green) .slider:global(.game).colorPicker:global(.spottable):focus .load,
+:global(.spotlight-input-mouse) :global(.green) .slider:global(.game).colorPicker:global(.spottable):focus .load {
+  background-color: transparent;
+}
+:global(.spotlight-input-key) :global(.green) .slider:global(.game).colorPicker:global(.spottable):focus .knob::before,
+:global(.spotlight-input-mouse) :global(.green) .slider:global(.game).colorPicker:global(.spottable):focus .knob::before {
+  border-color: var(--semantic-color-surface-white);
+}
+:global(.spotlight-input-touch) :global(.green) .slider:global(.game).colorPicker:global(.spottable):active .bar,
+:global(.spotlight-input-touch) :global(.green) .slider:global(.game).colorPicker:global(.spottable):active .fill,
+:global(.spotlight-input-touch) :global(.green) .slider:global(.game).colorPicker:global(.spottable):active .load {
+  background-color: transparent;
+}
+:global(.spotlight-input-touch) :global(.green) .slider:global(.game).colorPicker:global(.spottable):active .knob::before {
+  border-color: var(--semantic-color-surface-white);
+}
 :global(.green) .slider:global(.game).showAnchor .progressBar::after {
   background-color: color(from var(--semantic-color-surface-default-track) srgb r g b / 0.7);
 }
@@ -1079,6 +1201,31 @@ Motion Mixins
 :global(.spotlight-input-touch) :global(.orange) .slider:global(.game).noFill:global(.spottable):active.pressed .fill {
   background-color: transparent;
 }
+:global(.orange) .slider:global(.game).colorPicker .bar,
+:global(.orange) .slider:global(.game).colorPicker .fill,
+:global(.orange) .slider:global(.game).colorPicker .load {
+  background-color: transparent;
+}
+:global(.spotlight-input-key) :global(.orange) .slider:global(.game).colorPicker:global(.spottable):focus .bar,
+:global(.spotlight-input-mouse) :global(.orange) .slider:global(.game).colorPicker:global(.spottable):focus .bar,
+:global(.spotlight-input-key) :global(.orange) .slider:global(.game).colorPicker:global(.spottable):focus .fill,
+:global(.spotlight-input-mouse) :global(.orange) .slider:global(.game).colorPicker:global(.spottable):focus .fill,
+:global(.spotlight-input-key) :global(.orange) .slider:global(.game).colorPicker:global(.spottable):focus .load,
+:global(.spotlight-input-mouse) :global(.orange) .slider:global(.game).colorPicker:global(.spottable):focus .load {
+  background-color: transparent;
+}
+:global(.spotlight-input-key) :global(.orange) .slider:global(.game).colorPicker:global(.spottable):focus .knob::before,
+:global(.spotlight-input-mouse) :global(.orange) .slider:global(.game).colorPicker:global(.spottable):focus .knob::before {
+  border-color: var(--semantic-color-surface-white);
+}
+:global(.spotlight-input-touch) :global(.orange) .slider:global(.game).colorPicker:global(.spottable):active .bar,
+:global(.spotlight-input-touch) :global(.orange) .slider:global(.game).colorPicker:global(.spottable):active .fill,
+:global(.spotlight-input-touch) :global(.orange) .slider:global(.game).colorPicker:global(.spottable):active .load {
+  background-color: transparent;
+}
+:global(.spotlight-input-touch) :global(.orange) .slider:global(.game).colorPicker:global(.spottable):active .knob::before {
+  border-color: var(--semantic-color-surface-white);
+}
 :global(.orange) .slider:global(.game).showAnchor .progressBar::after {
   background-color: color(from var(--semantic-color-surface-default-track) srgb r g b / 0.7);
 }

package/Slider/SliderBehaviorDecorator.js

@@ -56,8 +56,9 @@ var SliderBehaviorDecorator = exports.SliderBehaviorDecorator = (0, _hoc["defaul
   var emitSpotlightEvents = config.emitSpotlightEvents;
 
   // eslint-disable-next-line no-shadow
-  var SliderBehaviorDecorator = function SliderBehaviorDecorator(props) {
+  var _SliderBehaviorDecorator = function SliderBehaviorDecorator(props) {
     var sliderBehaviorProps = (0, _util.setDefaultProps)(props, sliderBehaviorDefaultProps);
+    (0, _util.checkPropTypes)(_SliderBehaviorDecorator, sliderBehaviorProps);
     var paused = (0, _react.useMemo)(function () {
       return new _Pause["default"]();
     }, []);
@@ -81,12 +82,10 @@ var SliderBehaviorDecorator = exports.SliderBehaviorDecorator = (0, _hoc["defaul
       _useState0 = _slicedToArray(_useState9, 2),
       prevValue = _useState0[0],
       setPrevValue = _useState0[1];
-    (0, _react.useEffect)(function () {
-      if (sliderBehaviorProps.value !== prevValue) {
-        setUseHintText(false);
-        setPrevValue(sliderBehaviorProps.value);
-      }
-    }, [prevValue, sliderBehaviorProps.value]);
+    if (sliderBehaviorProps.value && sliderBehaviorProps.value !== prevValue) {
+      setUseHintText(false);
+      setPrevValue(sliderBehaviorProps.value);
+    }
     (0, _react.useEffect)(function () {
       return function () {
         paused.resume();
@@ -95,19 +94,22 @@ var SliderBehaviorDecorator = exports.SliderBehaviorDecorator = (0, _hoc["defaul
 
     var getValueText = (0, _react.useCallback)(function () {
       var ariaValueText = sliderBehaviorProps['aria-valuetext'],
+        colorPicker = sliderBehaviorProps.colorPicker,
         max = sliderBehaviorProps.max,
         min = sliderBehaviorProps.min,
         orientation = sliderBehaviorProps.orientation,
         _sliderBehaviorProps$ = sliderBehaviorProps.value,
         value = _sliderBehaviorProps$ === void 0 ? min : _sliderBehaviorProps$;
+      var sliderMax = colorPicker ? 360 : max;
+      var sliderMin = colorPicker ? 0 : min;
       var valueText = ariaValueText != null ? ariaValueText : value;
       var verticalHint = "".concat(new _IString["default"]((0, _$L["default"])('From {startValue} to {lastValue}')).format({
-        startValue: min,
-        lastValue: max
+        startValue: sliderMin,
+        lastValue: sliderMax
       }), " ").concat(valueText, " ").concat((0, _$L["default"])('change a value with up down button'));
       var horizontalHint = "".concat(new _IString["default"]((0, _$L["default"])('From {startValue} to {lastValue}')).format({
-        startValue: min,
-        lastValue: max
+        startValue: sliderMin,
+        lastValue: sliderMax
       }), " ").concat(valueText, " ").concat((0, _$L["default"])('change a value with left right button'));
       if (useHintText) {
         return orientation === 'horizontal' ? horizontalHint : verticalHint;
@@ -170,8 +172,8 @@ var SliderBehaviorDecorator = exports.SliderBehaviorDecorator = (0, _hoc["defaul
       onFocus: handleFocus
     }));
   };
-  SliderBehaviorDecorator.displayName = 'SliderBehaviorDecorator';
-  SliderBehaviorDecorator.propTypes = {
+  _SliderBehaviorDecorator.displayName = 'SliderBehaviorDecorator';
+  _SliderBehaviorDecorator.propTypes = {
     activateOnSelect: _propTypes["default"].bool,
     'aria-valuetext': _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
     max: _propTypes["default"].number,
@@ -179,6 +181,6 @@ var SliderBehaviorDecorator = exports.SliderBehaviorDecorator = (0, _hoc["defaul
     orientation: _propTypes["default"].string,
     value: _propTypes["default"].number
   };
-  return SliderBehaviorDecorator;
+  return _SliderBehaviorDecorator;
 });
 var _default = exports["default"] = SliderBehaviorDecorator;

package/Slider/tests/Slider-specs.js

@@ -111,6 +111,32 @@ describe('Slider', function () {
     var expectedValue = '11';
     expect(slider).toHaveAttribute(expectedAttribute, expectedValue);
   });
+  test('should be pressed when selected', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Slider["default"], {}));
+    var slider = _react.screen.getByRole('slider');
+
+    // Select by key
+    _react.fireEvent.keyDown(slider, {
+      key: 'Enter',
+      code: 'Enter',
+      keyCode: 13,
+      which: 13
+    });
+    expect(slider).toHaveClass('pressed');
+    _react.fireEvent.keyUp(slider, {
+      key: 'Enter',
+      code: 'Enter',
+      keyCode: 13,
+      which: 13
+    });
+    expect(slider).not.toHaveClass('pressed');
+
+    // Select by pointer
+    _react.fireEvent.mouseDown(slider);
+    expect(slider).toHaveClass('pressed');
+    _react.fireEvent.mouseUp(slider);
+    expect(slider).not.toHaveClass('pressed');
+  });
   test('should activate the slider on enter keyup', function () {
     (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Slider["default"], {
       activateOnSelect: true
@@ -571,4 +597,29 @@ describe('Slider', function () {
     var tooltip = _react.screen.queryByText('0');
     expect(tooltip).toBeNull();
   });
+  test('should apply `colorPicker`', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Slider["default"], {
+      colorPicker: true
+    }));
+    var slider = _react.screen.getByRole('slider');
+    var expected = 'colorPicker';
+    expect(slider).toHaveClass(expected);
+  });
+  test('should fire `onChange` with `onChange` type when value changed for `colorPicker`', function () {
+    var handleChange = jest.fn();
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Slider["default"], {
+      activateOnSelect: true,
+      colorPicker: true,
+      defaultValue: 50,
+      onChange: handleChange
+    }));
+    var slider = _react.screen.getByRole('slider');
+    activate(slider);
+    leftKeyDown(slider);
+    var expected = {
+      type: 'onChange'
+    };
+    var actual = handleChange.mock.calls.length && handleChange.mock.calls[0][0];
+    expect(actual).toMatchObject(expected);
+  });
 });

package/Slider/utils.js

@@ -3,11 +3,14 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.handleIncrementByWheel = exports.handleIncrement = exports.handleDecrementByWheel = exports.handleDecrement = exports.forwardSpotlightEvents = exports.emitChange = void 0;
+exports.hueGradient = exports.handleIncrementByWheel = exports.handleIncrement = exports.handleDecrementByWheel = exports.handleDecrement = exports.forwardSpotlightEvents = exports.emitChange = void 0;
 var _handle = require("@enact/core/handle");
 var _keymap = require("@enact/core/keymap");
 var _util = require("@enact/core/util");
 var _utils = require("@enact/ui/Slider/utils");
+var hueGradient = exports.hueGradient = function hueGradient(orientation) {
+  return "linear-gradient(".concat(orientation === 'horizontal' ? 'to right' : 'to top', ", \n\thsla(0, 100%, 50%, 1),\n\thsla(10, 100%, 50%, 1),\n\thsla(20, 100%, 50%, 1),\n\thsla(30, 100%, 50%, 1),\n\thsla(40, 100%, 50%, 1),\n\thsla(50, 100%, 50%, 1),\n\thsla(60, 100%, 50%, 1),\n\thsla(70, 100%, 50%, 1),\n\thsla(80, 100%, 50%, 1),\n\thsla(90, 100%, 50%, 1),\n\thsla(100, 100%, 50%, 1),\n\thsla(110, 100%, 50%, 1),\n\thsla(120, 100%, 50%, 1),\n\thsla(130, 100%, 50%, 1),\n\thsla(140, 100%, 50%, 1),\n\thsla(150, 100%, 50%, 1),\n\thsla(160, 100%, 50%, 1),\n\thsla(170, 100%, 50%, 1),\n\thsla(180, 100%, 50%, 1),\n\thsla(190, 100%, 50%, 1),\n\thsla(200, 100%, 50%, 1),\n\thsla(210, 100%, 50%, 1),\n\thsla(220, 100%, 50%, 1),\n\thsla(230, 100%, 50%, 1),\n\thsla(240, 100%, 50%, 1),\n\thsla(250, 100%, 50%, 1),\n\thsla(260, 100%, 50%, 1),\n\thsla(270, 100%, 50%, 1),\n\thsla(280, 100%, 50%, 1),\n\thsla(290, 100%, 50%, 1),\n\thsla(300, 100%, 50%, 1),\n\thsla(310, 100%, 50%, 1),\n\thsla(320, 100%, 50%, 1),\n\thsla(330, 100%, 50%, 1),\n\thsla(340, 100%, 50%, 1),\n\thsla(350, 100%, 50%, 1),\n\thsla(360, 100%, 50%, 1))");
+};
 var nop = function nop() {};
 var handleAcceleratedKeyDown = function handleAcceleratedKeyDown(ev, prop, _ref) {
   var spotlightAccelerator = _ref.current;
@@ -73,17 +76,30 @@ var checkInterval = function checkInterval(ev, _ref0, context) {
 };
 var emitChange = exports.emitChange = function emitChange(direction) {
   return (0, _handle.forwardCustom)('onChange', function (ev, _ref1) {
-    var knobStep = _ref1.knobStep,
+    var colorPicker = _ref1.colorPicker,
+      knobStep = _ref1.knobStep,
       max = _ref1.max,
       min = _ref1.min,
       step = _ref1.step,
       _ref1$value = _ref1.value,
       value = _ref1$value === void 0 ? min : _ref1$value;
-    var newValue = (0, _util.clamp)(min, max, value + calcStep(knobStep, step) * direction);
-    return {
-      value: newValue,
-      proportion: (0, _utils.calcProportion)(min, max, newValue)
-    };
+    if (colorPicker) {
+      var newValue = (0, _util.clamp)(0, 360, value + calcStep(knobStep, step) * direction);
+      return {
+        value: newValue,
+        proportion: (0, _utils.calcProportion)(min, max, newValue),
+        color: {
+          hex: (0, _utils.hslToHex)(value),
+          hsl: "hsla(".concat(value, ", 100%, 50%, 1)")
+        }
+      };
+    } else {
+      var _newValue = (0, _util.clamp)(min, max, value + calcStep(knobStep, step) * direction);
+      return {
+        value: _newValue,
+        proportion: (0, _utils.calcProportion)(min, max, _newValue)
+      };
+    }
   });
 };
 var isActive = function isActive(ev, props) {

package/Spinner/Spinner.js

@@ -6,13 +6,14 @@ Object.defineProperty(exports, "__esModule", {
 exports["default"] = exports.SpinnerDecorator = exports.SpinnerBase = exports.Spinner = void 0;
 var _kind = _interopRequireDefault(require("@enact/core/kind"));
 var _hoc = _interopRequireDefault(require("@enact/core/hoc"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
+var _util = require("@enact/core/util");
+var _spotlight = _interopRequireDefault(require("@enact/spotlight"));
+var _Pause = _interopRequireDefault(require("@enact/spotlight/Pause"));
 var _Pure = _interopRequireDefault(require("@enact/ui/internal/Pure"));
+var _Spinner = _interopRequireDefault(require("@enact/ui/Spinner"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
 var _compose = _interopRequireDefault(require("ramda/src/compose"));
 var _react = require("react");
-var _Pause = _interopRequireDefault(require("@enact/spotlight/Pause"));
-var _Spinner = _interopRequireDefault(require("@enact/ui/Spinner"));
-var _spotlight = _interopRequireDefault(require("@enact/spotlight"));
 var _$L = _interopRequireDefault(require("../internal/$L"));
 var _Marquee = _interopRequireDefault(require("../Marquee"));
 var _Skinnable = _interopRequireDefault(require("../Skinnable"));
@@ -191,7 +192,8 @@ var SpinnerBase = exports.SpinnerBase = (0, _kind["default"])({
  * @private
  */
 var SpinnerSpotlightDecorator = (0, _hoc["default"])(function (config, Wrapped) {
-  var SpinnerSpotlight = function SpinnerSpotlight(props) {
+  var _SpinnerSpotlight = function SpinnerSpotlight(props) {
+    (0, _util.checkPropTypes)(_SpinnerSpotlight, props);
     var paused = (0, _react.useMemo)(function () {
       return new _Pause["default"]('Spinner');
     }, []);
@@ -213,8 +215,8 @@ var SpinnerSpotlightDecorator = (0, _hoc["default"])(function (config, Wrapped)
     }, [blockClickOn, paused]);
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(Wrapped, _objectSpread({}, props));
   };
-  SpinnerSpotlight.displayName = 'SpinnerSpotlightDecorator';
-  SpinnerSpotlight.propTypes = /** @lends limestone/Spinner.Spinner.prototype */{
+  _SpinnerSpotlight.displayName = 'SpinnerSpotlightDecorator';
+  _SpinnerSpotlight.propTypes = /** @lends limestone/Spinner.Spinner.prototype */{
     /**
      * Determines how far the click-blocking should extend.
      *
@@ -227,7 +229,7 @@ var SpinnerSpotlightDecorator = (0, _hoc["default"])(function (config, Wrapped)
      */
     blockClickOn: _propTypes["default"].oneOf(['screen', 'container', null])
   };
-  return SpinnerSpotlight;
+  return _SpinnerSpotlight;
 });
 
 /**

package/Steps/Steps.module.css

@@ -5,6 +5,9 @@
   font-size: var(--primitive-font-size-48);
   font-weight: var(--primitive-font-weight-semibold);
 }
+.steps .step.numbers:global(.largeText) {
+  font-size: var(--primitive-font-size-58);
+}
 .steps .step.highlightCurrentOnly.future {
   opacity: 1;
 }

package/Switch/Switch.module.css

@@ -86,7 +86,7 @@ Motion Mixins
   position: relative;
 }
 .switch .client {
-  border-radius: var(--primitive-radius-30);
+  border-radius: var(--primitive-radius-999);
   width: 2.5rem;
   height: 1.25rem;
   position: relative;
@@ -106,9 +106,23 @@ Motion Mixins
   top: 0.125rem;
   left: 0.125rem;
 }
+.switch:global(.largeText) .client {
+  width: 3rem;
+  height: 1.5rem;
+}
+.switch:global(.largeText) .icon {
+  height: 1.1875rem;
+  width: 1.1875rem;
+  line-height: 1.5rem;
+  top: 0.15625rem;
+  left: 0.15625rem;
+}
 .switch.selected .icon {
   left: 1.375rem;
 }
+.switch.selected:global(.largeText) .icon {
+  left: 1.65625rem;
+}
 .switch.animated .client {
   transition: background-color 200ms;
 }

package/TabLayout/RefocusDecorator.js

@@ -5,13 +5,14 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.getNavigableFilter = exports["default"] = exports.RefocusDecorator = void 0;
 exports.getTabsSpotlightId = getTabsSpotlightId;
+var _util = require("@enact/core/util");
 var _spotlight = _interopRequireDefault(require("@enact/spotlight"));
 var _IdProvider = require("@enact/ui/internal/IdProvider");
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _react = require("react");
 var _TabGroupModule = _interopRequireDefault(require("./TabGroup.module.css"));
 var _jsxRuntime = require("react/jsx-runtime");
-var _excluded = ["blockCollapseOnPortrait", "blockExpandOnLandscape", "collapsed", "index", "onCollapse", "onExpand", "onTabAnimationEnd", "orientation", "spotlightId"];
+var _excluded = ["blockCollapseOnPortrait", "blockExpandOnLandscape", "collapsed", "index", "onCollapse", "onExpand", "onTabAnimationEnd", "orientation"];
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -60,17 +61,18 @@ function useScreenOrientation() {
 }
 var RefocusDecorator = exports.RefocusDecorator = function RefocusDecorator(Wrapped) {
   // eslint-disable-next-line no-shadow
-  function RefocusDecorator(_ref) {
-    var blockCollapseOnPortrait = _ref.blockCollapseOnPortrait,
-      blockExpandOnLandscape = _ref.blockExpandOnLandscape,
-      collapsed = _ref.collapsed,
-      index = _ref.index,
-      onCollapse = _ref.onCollapse,
-      onExpand = _ref.onExpand,
-      onTabAnimationEnd = _ref.onTabAnimationEnd,
-      orientation = _ref.orientation,
-      spotlightId = _ref.spotlightId,
-      rest = _objectWithoutProperties(_ref, _excluded);
+  function RefocusDecorator(props) {
+    (0, _util.checkPropTypes)(RefocusDecorator, props);
+    var blockCollapseOnPortrait = props.blockCollapseOnPortrait,
+      blockExpandOnLandscape = props.blockExpandOnLandscape,
+      collapsed = props.collapsed,
+      index = props.index,
+      onCollapse = props.onCollapse,
+      onExpand = props.onExpand,
+      onTabAnimationEnd = props.onTabAnimationEnd,
+      orientation = props.orientation,
+      rest = _objectWithoutProperties(props, _excluded);
+    var spotlightId = props.spotlightId;
     var _useId = (0, _IdProvider.useId)({
         prefix: 'lime-tablayout-'
       }),

package/TabLayout/TabGroup.module.css

@@ -49,7 +49,7 @@
   margin-right: 0;
 }
 .tab.vertical.button:global(.largeText) {
-  font-size: var(--primitive-font-size-60);
+  font-size: var(--primitive-font-size-72);
   min-width: 2.75rem;
 }
 .tab.vertical .client {

package/TabLayout/tests/TabGroup-specs.js

@@ -181,7 +181,7 @@ describe('TabGroup specs', function () {
     expect(handleFocusTab).toHaveBeenCalled();
   });
   test('should set the size for all tabs in horizontal orientation', function () {
-    var size = 456;
+    var size = 'small';
     (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_TabGroup["default"], {
       orientation: "horizontal",
       size: size,

package/ThemeDecorator/AccessibilityDecorator.js

@@ -35,14 +35,15 @@ var accessibilityDecoratorDefaultProps = {
  */
 var AccessibilityDecorator = exports.AccessibilityDecorator = (0, _hoc["default"])(function (config, Wrapped) {
   // eslint-disable-next-line no-shadow
-  var AccessibilityDecorator = function AccessibilityDecorator(props) {
-    var _setDefaultProps = (0, _util.setDefaultProps)(props, accessibilityDecoratorDefaultProps),
-      className = _setDefaultProps.className,
-      focusRing = _setDefaultProps.focusRing,
-      highContrast = _setDefaultProps.highContrast,
-      skinVariants = _setDefaultProps.skinVariants,
-      textSize = _setDefaultProps.textSize,
-      rest = _objectWithoutProperties(_setDefaultProps, _excluded);
+  var _AccessibilityDecorator = function AccessibilityDecorator(props) {
+    var accessibilityDecoratorProps = (0, _util.setDefaultProps)(props, accessibilityDecoratorDefaultProps);
+    (0, _util.checkPropTypes)(_AccessibilityDecorator, accessibilityDecoratorProps);
+    var className = accessibilityDecoratorProps.className,
+      focusRing = accessibilityDecoratorProps.focusRing,
+      highContrast = accessibilityDecoratorProps.highContrast,
+      skinVariants = accessibilityDecoratorProps.skinVariants,
+      textSize = accessibilityDecoratorProps.textSize,
+      rest = _objectWithoutProperties(accessibilityDecoratorProps, _excluded);
     var accessibilityClassName = highContrast ? "enact-a11y-high-contrast enact-text-".concat(textSize) : "enact-text-".concat(textSize);
     accessibilityClassName = focusRing ? "enact-a11y-focus-ring ".concat(accessibilityClassName) : "".concat(accessibilityClassName);
     var combinedClassName = className ? "".concat(className, " ").concat(accessibilityClassName) : accessibilityClassName;
@@ -75,8 +76,8 @@ var AccessibilityDecorator = exports.AccessibilityDecorator = (0, _hoc["default"
       }, rest))
     });
   };
-  AccessibilityDecorator.displayName = 'AccessibilityDecorator';
-  AccessibilityDecorator.propTypes = {
+  _AccessibilityDecorator.displayName = 'AccessibilityDecorator';
+  _AccessibilityDecorator.propTypes = {
     /** @lends limestone/ThemeDecorator.AccessibilityDecorator.prototype */
     /**
      * Enables additional features to help users visually differentiate components.
@@ -146,6 +147,6 @@ var AccessibilityDecorator = exports.AccessibilityDecorator = (0, _hoc["default"
      */
     textSize: _propTypes["default"].oneOf(['normal', 'large'])
   };
-  return AccessibilityDecorator;
+  return _AccessibilityDecorator;
 });
 var _default = exports["default"] = AccessibilityDecorator;

package/ThemeDecorator/I18nFontDecorator.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = exports.I18nFontDecorator = void 0;
 var _hoc = _interopRequireDefault(require("@enact/core/hoc"));
+var _util = require("@enact/core/util");
 var _i18n = _interopRequireDefault(require("@enact/i18n"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _react = require("react");
@@ -17,17 +18,18 @@ function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
 function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 var I18nFontDecorator = exports.I18nFontDecorator = (0, _hoc["default"])(function (config, Wrapped) {
-  var I18nDecorator = function I18nDecorator(props) {
+  var _I18nDecorator = function I18nDecorator(props) {
+    (0, _util.checkPropTypes)(_I18nDecorator, props);
     var ilibLocale = _i18n["default"].getLocale();
     (0, _react.useEffect)(function () {
       (0, _fontGenerator.fontOverrideGenerator)(props.locale || ilibLocale);
     }, [ilibLocale, props.locale]);
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(Wrapped, _objectSpread({}, props));
   };
-  I18nDecorator.displayName = 'I18nFontDecorator';
-  I18nDecorator.propTypes = {
+  _I18nDecorator.displayName = 'I18nFontDecorator';
+  _I18nDecorator.propTypes = {
     locale: _propTypes["default"].string
   };
-  return I18nDecorator;
+  return _I18nDecorator;
 });
 var _default = exports["default"] = I18nFontDecorator;

package/ThemeDecorator/ThemeDecorator.d.ts

@@ -77,6 +77,13 @@ export interface ThemeDecoratorConfig extends Object {
    * Disables use of full screen.
    */
   disableFullscreen?: boolean;
+  /**
+ * A CSS class name to apply globally to every spottable component when it receives spotlight focus.
+ * 
+ * This is the declarative equivalent of calling  `setFocusEffectClass`  imperatively. It acts as
+an app-wide default.
+ */
+  focusEffectClass?: string;
   /**
    * Enables a floating layer for popup components.
    *