@enact/limestone 1.3.0 → 1.10.0

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

@@ -101,7 +101,8 @@ describe('Slider', function () {
   });
   test('should set "aria-valuetext" to value when value is changed', function () {
     (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Slider["default"], {
-      defaultValue: 10
+      defaultValue: 10,
+      showMinMax: true
     }));
     var slider = _react.screen.getByRole('slider');
     focus(slider);
@@ -110,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
@@ -570,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.d.ts

@@ -37,8 +37,10 @@ export class SpinnerBase extends React.Component<
   Merge<React.HTMLProps<HTMLElement>, SpinnerBaseProps>
 > {}
 
-export interface SpinnerProps
-  extends Merge<SpinnerBaseProps, SpinnerDecoratorProps> {
+export interface SpinnerProps extends Merge<
+  SpinnerBaseProps,
+  SpinnerDecoratorProps
+> {
   /**
  * Determines how far the click-blocking should extend.
  * 
@@ -55,8 +57,7 @@ export class Spinner extends React.Component<
   Merge<React.HTMLProps<HTMLElement>, SpinnerProps>
 > {}
 
-export interface SpinnerDecoratorProps
-  extends limestone_Skinnable_SkinnableProps {}
+export interface SpinnerDecoratorProps extends limestone_Skinnable_SkinnableProps {}
 export function SpinnerDecorator<P>(
   Component: React.ComponentType<P> | string,
 ): React.ComponentType<P & SpinnerDecoratorProps>;

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/Spinner/Spinner.module.css

@@ -60,7 +60,7 @@
   border-radius: 20.8125rem;
   width: 2rem;
   height: 2rem;
-  padding: 0.5rem;
+  padding: var(--primitive-spacing-24);
   margin-left: auto;
   margin-right: auto;
 }
@@ -135,7 +135,7 @@
 :global(.enact-locale-non-latin) .spinner .client {
   font-family: "Limestone";
   font-weight: var(--primitive-font-weight-light);
-  font-size: 1.125rem;
+  font-size: var(--primitive-font-size-54);
   font-style: normal;
 }
 :global(.enact-locale-km) .spinner .client {
@@ -175,7 +175,7 @@
   height: 1rem;
 }
 .spinner.small .bg {
-  padding: 0.25rem;
+  padding: var(--primitive-spacing-12);
 }
 .spinner.small .decorator {
   -webkit-mask-image: radial-gradient(transparent 0.35417rem, black 0.375rem);
@@ -206,7 +206,7 @@
   color: var(--semantic-color-on-background-sub);
 }
 .spinner:global(.neutral) .bg {
-  background-color: var(--semantic-color-surface-default);
+  background-color: var(--semantic-color-surface-spinner);
 }
 .spinner:global(.neutral) .decorator {
   background: conic-gradient(color(from var(--semantic-color-on-background-main) srgb r g b / 0.2) 57.5%, var(--semantic-color-on-background-main) 100%);
@@ -227,7 +227,7 @@
   color: var(--semantic-color-on-background-sub);
 }
 :global(.enact-a11y-high-contrast) .spinner:global(.neutral):global(.highContrast) .bg {
-  background-color: var(--semantic-color-surface-default);
+  background-color: var(--semantic-color-surface-spinner);
 }
 :global(.enact-a11y-high-contrast) .spinner:global(.neutral):global(.highContrast) .decorator {
   background: conic-gradient(color(from var(--semantic-color-on-background-main) srgb r g b / 0.2) 57.5%, var(--semantic-color-on-background-main) 100%);
@@ -248,7 +248,7 @@
   color: var(--semantic-color-on-background-sub);
 }
 .spinner:global(.light) .bg {
-  background-color: var(--semantic-color-surface-default);
+  background-color: var(--semantic-color-surface-spinner);
 }
 .spinner:global(.light) .decorator {
   background: conic-gradient(color(from var(--semantic-color-on-background-main) srgb r g b / 0.2) 57.5%, var(--semantic-color-on-background-main) 100%);
@@ -272,7 +272,7 @@
   color: var(--semantic-color-on-background-sub);
 }
 .spinner:global(.game) .bg {
-  background-color: var(--semantic-color-surface-default);
+  background-color: var(--semantic-color-surface-spinner);
 }
 .spinner:global(.game) .decorator {
   background: conic-gradient(color(from var(--semantic-color-on-background-main) srgb r g b / 0.2) 57.5%, var(--semantic-color-on-background-main) 100%);
@@ -295,7 +295,7 @@
   color: var(--semantic-color-on-background-sub);
 }
 :global(.green) .spinner:global(.game) .bg {
-  background-color: var(--semantic-color-surface-default);
+  background-color: var(--semantic-color-surface-spinner);
 }
 :global(.green) .spinner:global(.game) .decorator {
   background: conic-gradient(color(from var(--semantic-color-on-background-main) srgb r g b / 0.2) 57.5%, var(--semantic-color-on-background-main) 100%);
@@ -318,7 +318,7 @@
   color: var(--semantic-color-on-background-sub);
 }
 :global(.orange) .spinner:global(.game) .bg {
-  background-color: var(--semantic-color-surface-default);
+  background-color: var(--semantic-color-surface-spinner);
 }
 :global(.orange) .spinner:global(.game) .decorator {
   background: conic-gradient(color(from var(--semantic-color-on-background-main) srgb r g b / 0.2) 57.5%, var(--semantic-color-on-background-main) 100%);

package/Steps/Steps.d.ts

@@ -100,14 +100,15 @@ export class StepsBase extends React.Component<
   Merge<React.HTMLProps<HTMLElement>, StepsBaseProps>
 > {}
 
-export interface StepsDecoratorProps
-  extends limestone_Skinnable_SkinnableProps {}
+export interface StepsDecoratorProps extends limestone_Skinnable_SkinnableProps {}
 export function StepsDecorator<P>(
   Component: React.ComponentType<P> | string,
 ): React.ComponentType<P & StepsDecoratorProps>;
 
-export interface StepsProps
-  extends Merge<StepsBaseProps, StepsDecoratorProps> {}
+export interface StepsProps extends Merge<
+  StepsBaseProps,
+  StepsDecoratorProps
+> {}
 /**
  * A full-featured Limestone-styled step component.
  */

package/Steps/Steps.js

@@ -15,7 +15,8 @@ var _Icon = _interopRequireDefault(require("../Icon"));
 var _Skinnable = _interopRequireDefault(require("../Skinnable"));
 var _StepsModule = _interopRequireDefault(require("./Steps.module.css"));
 var _jsxRuntime = require("react/jsx-runtime");
-var _excluded = ["css", "iconComponent", "size", "steps"];
+var _excluded = ["className", "css"],
+  _excluded2 = ["css", "iconComponent", "size", "steps"];
 /**
  * Provides Limestone styled component to indicate progress along a continuum.
  *
@@ -40,11 +41,14 @@ function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
 var PageIndicator = function PageIndicator(_ref) {
   var className = _ref.className,
-    css = _ref.css;
+    css = _ref.css,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  delete rest.children;
+  delete rest.size;
   var mergedClasses = (0, _classnames["default"])(css.pageIndicator, className);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", _objectSpread({
     className: mergedClasses
-  });
+  }, rest));
 };
 
 /**
@@ -258,7 +262,7 @@ var StepsBase = exports.StepsBase = (0, _kind["default"])({
       iconComponent = _ref4.iconComponent,
       size = _ref4.size,
       steps = _ref4.steps,
-      rest = _objectWithoutProperties(_ref4, _excluded);
+      rest = _objectWithoutProperties(_ref4, _excluded2);
     delete rest.current;
     delete rest.currentIcon;
     delete rest.futureIcon;

package/Switch/Switch.d.ts

@@ -29,17 +29,18 @@ export class SwitchBase extends React.Component<
   Merge<React.HTMLProps<HTMLElement>, SwitchBaseProps>
 > {}
 
-export interface SwitchDecoratorProps
-  extends Merge<
-    ui_Toggleable_ToggleableProps,
-    spotlight_Spottable_SpottableProps
-  > {}
+export interface SwitchDecoratorProps extends Merge<
+  ui_Toggleable_ToggleableProps,
+  spotlight_Spottable_SpottableProps
+> {}
 export function SwitchDecorator<P>(
   Component: React.ComponentType<P> | string,
 ): React.ComponentType<P & SwitchDecoratorProps>;
 
-export interface SwitchProps
-  extends Merge<SwitchBaseProps, SwitchDecoratorProps> {}
+export interface SwitchProps extends Merge<
+  SwitchBaseProps,
+  SwitchDecoratorProps
+> {}
 /**
  * A Limestone-styled component that looks like a toggle switch.
  * 

package/Switch/Switch.module.css

@@ -1,9 +1,92 @@
+/* ---------------------------------------
+Animations
+------------------------------------------ */
+:root {
+  /* Bounce
+	------------------------------------------ */
+  --lime-bounce-motion: var(--lime-bounce-animation-name) var(--lime-bounce-motion-duration) var(--lime-bounce-motion-easing-function);
+  --lime-check-motion: var(--lime-check-animation-name) var(--lime-check-motion-duration) forwards;
+}
+/* ---------------------------------------
+Animations properties
+------------------------------------------ */
+:root {
+  /* ---------------------------------------
+	Durations
+	------------------------------------------ */
+  --lime-motion-default-duration: 200ms;
+  --lime-motion-medium1-duration: 250ms;
+  --lime-motion-medium2-duration: 300ms;
+  --lime-motion-medium4-duration: 400ms;
+  --lime-motion-long2-duration: 500ms;
+  --lime-bounce-motion-duration: var(--lime-motion-medium2-duration);
+  --lime-check-motion-duration: var(--lime-motion-medium4-duration);
+  --lime-focus-in-motion-duration: var(--lime-motion-medium2-duration);
+  --lime-focus-out-motion-duration: var(--lime-motion-long2-duration);
+  --lime-press-motion-duration: var(--lime-motion-medium1-duration);
+  --lime-release-motion-duration: var(--lime-motion-medium2-duration);
+  /* ---------------------------------------
+	Easing functions
+	------------------------------------------ */
+  --lime-default-motion-easing-function: ease-out;
+  --lime-EIO-motion-easing-function: cubic-bezier(0.2, 0, 0.05, 1);
+  --lime-EO-motion-easing-function: cubic-bezier(0.1, 0.6, 0.15, 1);
+  --lime-bounce-motion-easing-function: var(--lime-default-motion-easing-function);
+  --lime-focus-in-motion-easing-function: var(--lime-EIO-motion-easing-function);
+  --lime-focus-out-motion-easing-function: var(--lime-EO-motion-easing-function);
+  --lime-press-motion-easing-function: var(--lime-EIO-motion-easing-function);
+  --lime-release-motion-easing-function: var(--lime-EO-motion-easing-function);
+  /* ---------------------------------------
+	Keyframes names
+	------------------------------------------ */
+  --lime-bounce-animation-name: bounce-motion;
+  --lime-check-animation-name: check-motion;
+  /* ---------------------------------------
+	Keyframes values
+	------------------------------------------ */
+  --lime-bounce-motion-offset-default-value: 0.125rem;
+}
+/* ---------------------------------------
+Keyframes
+------------------------------------------ */
+/* Bounce
+	------------------------------------------ */
+@keyframes bounce-motion {
+  0% {
+    transform: translateX(0);
+  }
+  50% {
+    transform: translateX(var(--lime-bounce-motion-offset-value, --lime-bounce-motion-offset-default-value));
+  }
+  80% {
+    transform: translateX(calc(var(--lime-bounce-motion-offset-value, --lime-bounce-motion-offset-default-value) / -2));
+  }
+  100% {
+    transform: translateX(0);
+  }
+}
+/* Check
+	------------------------------------------ */
+@keyframes check-motion {
+  0% {
+    transform: translateX(0);
+  }
+  100% {
+    transform: translateX(100%);
+  }
+}
+/* ---------------------------------------
+Motion Variables
+------------------------------------------ */
+/* ---------------------------------------
+Motion Mixins
+------------------------------------------ */
 .switch {
   display: inline-block;
   position: relative;
 }
 .switch .client {
-  border-radius: 0.625rem;
+  border-radius: var(--primitive-radius-30);
   width: 2.5rem;
   height: 1.25rem;
   position: relative;
@@ -15,7 +98,7 @@
   visibility: visible;
   height: 1rem;
   width: 1rem;
-  font-size: 1.75rem;
+  font-size: var(--primitive-font-size-84);
   line-height: 1.25rem;
   margin: 0;
   position: absolute;
@@ -32,15 +115,19 @@
 .switch.animated .icon {
   transition: left 200ms, background-color 200ms;
 }
+.switch.animated.selected .icon {
+  animation: var(--lime-bounce-animation-name) var(--lime-bounce-motion-duration) var(--lime-bounce-motion-easing-function);
+  --lime-bounce-motion-offset-value: var(--lime-bounce-motion-offset-default-value);
+}
 .switch:global(.spottable) {
-  margin: 0.75rem;
+  margin: var(--primitive-spacing-36);
 }
 .switch:global(.spottable) .bg {
   position: absolute;
-  top: -0.75rem;
-  right: -0.75rem;
-  bottom: -0.75rem;
-  left: -0.75rem;
+  top: calc(var(--primitive-spacing-36) * -1);
+  right: calc(var(--primitive-spacing-36) * -1);
+  bottom: calc(var(--primitive-spacing-36) * -1);
+  left: calc(var(--primitive-spacing-36) * -1);
   z-index: -1;
 }
 .switch:global(.neutral) .client {
@@ -71,7 +158,7 @@
   border-radius: var(--semantic-radius-button);
 }
 .switch:global(.neutral):global(.spottable) .bg {
-  border-radius: 0.5rem;
+  border-radius: var(--primitive-radius-24);
   will-change: box-shadow, box-shadow;
   opacity: 0;
   background-color: var(--semantic-color-surface-default-focused);
@@ -156,7 +243,7 @@
   border-radius: var(--semantic-radius-button);
 }
 :global(.enact-a11y-high-contrast) .switch:global(.neutral):global(.highContrast):global(.spottable) .bg {
-  border-radius: 0.5rem;
+  border-radius: var(--primitive-radius-24);
   will-change: box-shadow, box-shadow;
   opacity: 0;
   background-color: var(--semantic-color-surface-default-focused);
@@ -241,7 +328,7 @@
   border-radius: var(--semantic-radius-button);
 }
 .switch:global(.light):global(.spottable) .bg {
-  border-radius: 0.5rem;
+  border-radius: var(--primitive-radius-24);
   will-change: box-shadow, box-shadow;
   opacity: 0;
   background-color: var(--semantic-color-surface-default-focused);
@@ -331,7 +418,7 @@
   border-radius: 0;
 }
 .switch:global(.game):global(.spottable) .bg {
-  border-radius: 0.5rem;
+  border-radius: var(--primitive-radius-24);
   will-change: box-shadow, box-shadow;
   opacity: 0;
   background-color: var(--semantic-color-surface-default-focused);
@@ -420,7 +507,7 @@
   border-radius: 0;
 }
 :global(.green) .switch:global(.game):global(.spottable) .bg {
-  border-radius: 0.5rem;
+  border-radius: var(--primitive-radius-24);
   will-change: box-shadow, box-shadow;
   opacity: 0;
   background-color: var(--semantic-color-surface-default-focused);
@@ -509,7 +596,7 @@
   border-radius: 0;
 }
 :global(.orange) .switch:global(.game):global(.spottable) .bg {
-  border-radius: 0.5rem;
+  border-radius: var(--primitive-radius-24);
   will-change: box-shadow, box-shadow;
   opacity: 0;
   background-color: var(--semantic-color-surface-default-focused);

package/SwitchItem/SwitchItem.d.ts

@@ -7,8 +7,10 @@ import * as React from "react";
 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 SwitchItemBaseProps
-  extends Omit<limestone_Item_ItemProps, "iconComponent"> {
+export interface SwitchItemBaseProps extends Omit<
+  limestone_Item_ItemProps,
+  "iconComponent"
+> {
   /**
  * Customizes the component by mapping the supplied collection of CSS class names to the
 corresponding internal elements and states of this component.
@@ -34,14 +36,15 @@ export class SwitchItemBase extends React.Component<
   Merge<React.HTMLProps<HTMLElement>, SwitchItemBaseProps>
 > {}
 
-export interface SwitchItemDecoratorProps
-  extends ui_Toggleable_ToggleableProps {}
+export interface SwitchItemDecoratorProps extends ui_Toggleable_ToggleableProps {}
 export function SwitchItemDecorator<P>(
   Component: React.ComponentType<P> | string,
 ): React.ComponentType<P & SwitchItemDecoratorProps>;
 
-export interface SwitchItemProps
-  extends Merge<SwitchItemBaseProps, SwitchItemDecoratorProps> {}
+export interface SwitchItemProps extends Merge<
+  SwitchItemBaseProps,
+  SwitchItemDecoratorProps
+> {}
 /**
  * A Limestone-styled item with a switch component.
  *