@enact/limestone 1.3.0 → 1.9.4

package/Item/Item.js

@@ -20,7 +20,7 @@ var _Skinnable = _interopRequireDefault(require("../Skinnable"));
 var _ItemModule = _interopRequireDefault(require("./Item.module.css"));
 var _jsxRuntime = require("react/jsx-runtime");
 var _excluded = ["componentRef", "content", "contentSize", "css", "label", "labelPosition", "marqueeOn"],
-  _excluded2 = ["centered", "children", "componentRef", "contentRef", "contentSize", "css", "inline", "label", "labelPosition", "marqueeOn", "slotAfter", "slotBefore"];
+  _excluded2 = ["centered", "children", "componentRef", "contentRef", "contentSize", "css", "inline", "label", "labelPosition", "marqueeOn", "slotAfter", "slotAfterAria", "slotBefore", "slotBeforeAria"];
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
 function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return 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; }
@@ -217,6 +217,13 @@ var ItemBase = exports.ItemBase = (0, _kind["default"])({
      * @public
      */
     slotAfter: _propTypes2["default"].node,
+    /**
+     * Aria-label for slotAfter icon.
+     *
+     * @type {String}
+     * @public
+     */
+    slotAfterAria: _propTypes2["default"].string,
     /**
      * Nodes to be inserted before `children` and `label`.
      *
@@ -227,7 +234,14 @@ var ItemBase = exports.ItemBase = (0, _kind["default"])({
      * @type {Node}
      * @public
      */
-    slotBefore: _propTypes2["default"].node
+    slotBefore: _propTypes2["default"].node,
+    /**
+     * Aria-label for slotBefore icon.
+     *
+     * @type {String}
+     * @public
+     */
+    slotBeforeAria: _propTypes2["default"].string
   },
   defaultProps: {
     labelPosition: 'below',
@@ -267,7 +281,9 @@ var ItemBase = exports.ItemBase = (0, _kind["default"])({
       labelPosition = _ref5.labelPosition,
       marqueeOn = _ref5.marqueeOn,
       slotAfter = _ref5.slotAfter,
+      slotAfterAria = _ref5.slotAfterAria,
       slotBefore = _ref5.slotBefore,
+      slotBeforeAria = _ref5.slotBeforeAria,
       rest = _objectWithoutProperties(_ref5, _excluded2);
     delete rest.size;
     var keys = Object.keys(rest);
@@ -286,6 +302,7 @@ var ItemBase = exports.ItemBase = (0, _kind["default"])({
         className: css.bg
       }), slotBefore ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Layout.Cell, {
         className: css.slotBefore,
+        "aria-label": slotBeforeAria,
         shrink: true,
         children: slotBefore
       }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(ItemContent, {
@@ -299,6 +316,7 @@ var ItemBase = exports.ItemBase = (0, _kind["default"])({
         shrink: inline
       }), slotAfter ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Layout.Cell, {
         className: css.slotAfter,
+        "aria-label": slotAfterAria,
         shrink: true,
         children: slotAfter
       }) : null]

package/Item/Item.module.css

@@ -7,7 +7,7 @@
   display: flex;
   position: relative;
   color: inherit;
-  margin: 0 0.75rem 0.625rem 0.75rem;
+  margin: 0 var(--primitive-spacing-36) var(--primitive-spacing-30) var(--primitive-spacing-36);
 }
 .item.selected {
   /* Available for customization */

package/KeyGuide/KeyGuide.d.ts

@@ -66,17 +66,18 @@ export class KeyGuideBase extends React.Component<
   Merge<React.HTMLProps<HTMLElement>, KeyGuideBaseProps>
 > {}
 
-export interface KeyGuideDecoratorProps
-  extends Merge<
-    limestone_Marquee_MarqueeControllerProps,
-    limestone_Skinnable_SkinnableProps
-  > {}
+export interface KeyGuideDecoratorProps extends Merge<
+  limestone_Marquee_MarqueeControllerProps,
+  limestone_Skinnable_SkinnableProps
+> {}
 export function KeyGuideDecorator<P>(
   Component: React.ComponentType<P> | string,
 ): React.ComponentType<P & KeyGuideDecoratorProps>;
 
-export interface KeyGuideProps
-  extends Merge<KeyGuideBaseProps, KeyGuideDecoratorProps> {}
+export interface KeyGuideProps extends Merge<
+  KeyGuideBaseProps,
+  KeyGuideDecoratorProps
+> {}
 /**
  * A Key Guide component, ready to use in Limestone applications.
  * 

package/KeyGuide/KeyGuide.module.css

@@ -7,7 +7,7 @@
   flex-direction: column;
   width: 15.625rem;
   right: 3.125rem;
-  bottom: 2.5rem;
+  bottom: var(--primitive-spacing-120);
   padding: var(--primitive-spacing-48);
   gap: var(--primitive-spacing-42);
 }
@@ -64,6 +64,10 @@
 }
 .keyGuide:global(.neutral) {
   background: var(--semantic-color-surface-overlay-default);
+  outline-color: transparent;
+  outline-width: 0.063rem;
+  outline-style: solid;
+  outline-offset: -0.063rem;
 }
 .keyGuide:global(.neutral) .red {
   background-color: #ff6d78;
@@ -124,6 +128,10 @@
 }
 :global(.enact-a11y-high-contrast) .keyGuide:global(.neutral):global(.highContrast) {
   background: var(--semantic-color-surface-overlay-default);
+  outline-color: var(--semantic-color-stroke-main);
+  outline-width: 0.063rem;
+  outline-style: solid;
+  outline-offset: -0.063rem;
 }
 :global(.enact-a11y-high-contrast) .keyGuide:global(.neutral):global(.highContrast) .red {
   background-color: #ff6d78;
@@ -184,6 +192,10 @@
 }
 .keyGuide:global(.light) {
   background: var(--semantic-color-surface-overlay-default);
+  outline-color: transparent;
+  outline-width: 0.063rem;
+  outline-style: solid;
+  outline-offset: -0.063rem;
 }
 .keyGuide:global(.light) .red {
   background-color: #ff6d78;
@@ -247,6 +259,10 @@
   --semantic-color-surface-default-focused: #6d2fa1;
   --semantic-color-on-surface-main-focused: #e6e6e6;
   background: var(--semantic-color-surface-overlay-default);
+  outline-color: transparent;
+  outline-width: 0.063rem;
+  outline-style: solid;
+  outline-offset: -0.063rem;
 }
 .keyGuide:global(.game) .red {
   background-color: #ff6d78;
@@ -309,6 +325,10 @@
   --semantic-color-surface-default: #1F2C24;
   --semantic-color-surface-default-focused: #3ea07d;
   background: var(--semantic-color-surface-overlay-default);
+  outline-color: transparent;
+  outline-width: 0.063rem;
+  outline-style: solid;
+  outline-offset: -0.063rem;
 }
 :global(.green) .keyGuide:global(.game) .red {
   background-color: #ff6d78;
@@ -371,6 +391,10 @@
   --semantic-color-surface-default: #422923;
   --semantic-color-surface-default-focused: #b85f23;
   background: var(--semantic-color-surface-overlay-default);
+  outline-color: transparent;
+  outline-width: 0.063rem;
+  outline-style: solid;
+  outline-offset: -0.063rem;
 }
 :global(.orange) .keyGuide:global(.game) .red {
   background-color: #ff6d78;

package/Marquee/Marquee.d.ts

@@ -27,14 +27,12 @@ export class MarqueeBase extends React.Component<
   Merge<React.HTMLProps<HTMLElement>, MarqueeBaseProps>
 > {}
 
-export interface MarqueeControllerProps
-  extends ui_Marquee_MarqueeControllerProps {}
+export interface MarqueeControllerProps extends ui_Marquee_MarqueeControllerProps {}
 export function MarqueeController<P>(
   Component: React.ComponentType<P> | string,
 ): React.ComponentType<P & MarqueeControllerProps>;
 
-export interface MarqueeDecoratorProps
-  extends ui_Marquee_MarqueeDecoratorProps {}
+export interface MarqueeDecoratorProps extends ui_Marquee_MarqueeDecoratorProps {}
 export function MarqueeDecorator<P>(
   Component: React.ComponentType<P> | string,
 ): React.ComponentType<P & MarqueeDecoratorProps>;

package/MediaOverlay/MediaOverlay.d.ts

@@ -99,23 +99,24 @@ export class MediaOverlayBase extends React.Component<
   Merge<React.HTMLProps<HTMLElement>, MediaOverlayBaseProps>
 > {}
 
-export interface MediaOverlayDecoratorProps
-  extends Merge<
+export interface MediaOverlayDecoratorProps extends Merge<
+  Merge<
     Merge<
-      Merge<
-        limestone_Marquee_MarqueeControllerProps,
-        spotlight_Spottable_SpottableProps
-      >,
-      ui_Slottable_SlottableProps
+      limestone_Marquee_MarqueeControllerProps,
+      spotlight_Spottable_SpottableProps
     >,
-    limestone_Skinnable_SkinnableProps
-  > {}
+    ui_Slottable_SlottableProps
+  >,
+  limestone_Skinnable_SkinnableProps
+> {}
 export function MediaOverlayDecorator<P>(
   Component: React.ComponentType<P> | string,
 ): React.ComponentType<P & MediaOverlayDecoratorProps>;
 
-export interface MediaOverlayProps
-  extends Merge<MediaOverlayBaseProps, MediaOverlayDecoratorProps> {}
+export interface MediaOverlayProps extends Merge<
+  MediaOverlayBaseProps,
+  MediaOverlayDecoratorProps
+> {}
 /**
  * A Limestone-styled  `Media`  component.
  * 

package/MediaOverlay/MediaOverlay.js

@@ -4,11 +4,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = exports.MediaOverlayDecorator = exports.MediaOverlayBase = exports.MediaOverlay = void 0;
+var _propTypes = _interopRequireDefault(require("@enact/core/internal/prop-types"));
 var _kind = _interopRequireDefault(require("@enact/core/kind"));
 var _Spottable = _interopRequireDefault(require("@enact/spotlight/Spottable"));
 var _Layout = require("@enact/ui/Layout");
 var _Media = _interopRequireDefault(require("@enact/ui/Media"));
-var _propTypes = _interopRequireDefault(require("@enact/core/internal/prop-types"));
+var _Touchable = _interopRequireDefault(require("@enact/ui/Touchable"));
 var _Pure = _interopRequireDefault(require("@enact/ui/internal/Pure"));
 var _Slottable = _interopRequireDefault(require("@enact/ui/Slottable"));
 var _propTypes2 = _interopRequireDefault(require("prop-types"));
@@ -138,6 +139,14 @@ var MediaOverlayBase = exports.MediaOverlayBase = (0, _kind["default"])({
      * @public
      */
     placeholder: _propTypes2["default"].string,
+    /**
+     * Indicates if the component is pressed.
+     *
+     * @type {Boolean}
+     * @default false
+     * @private
+     */
+    pressed: _propTypes2["default"].bool,
     /**
      * A number between `0` and `1` indicating the proportion of the filled portion of the bar.
      *
@@ -187,32 +196,43 @@ var MediaOverlayBase = exports.MediaOverlayBase = (0, _kind["default"])({
   },
   defaultProps: {
     mediaComponent: 'video',
+    pressed: false,
     progress: 0,
     textAlign: 'end'
   },
   styles: {
     css: _MediaOverlayModule["default"],
     className: 'mediaOverlay',
-    publicClassNames: ['mediaOverlay', 'image', 'text']
+    publicClassNames: ['mediaOverlay', 'image', 'pressed', 'text']
+  },
+  computed: {
+    className: function className(_ref) {
+      var pressed = _ref.pressed,
+        styler = _ref.styler;
+      return styler.append({
+        pressed: pressed
+      });
+    }
   },
-  render: function render(_ref) {
-    var caption = _ref.caption,
-      css = _ref.css,
-      imageOverlay = _ref.imageOverlay,
-      loop = _ref.loop,
-      marqueeOn = _ref.marqueeOn,
-      mediaComponent = _ref.mediaComponent,
-      muted = _ref.muted,
-      noAutoPlay = _ref.noAutoPlay,
-      placeholder = _ref.placeholder,
-      progress = _ref.progress,
-      showProgress = _ref.showProgress,
-      source = _ref.source,
-      title = _ref.title,
-      subtitle = _ref.subtitle,
-      text = _ref.text,
-      textAlign = _ref.textAlign,
-      rest = _objectWithoutProperties(_ref, _excluded);
+  render: function render(_ref2) {
+    var caption = _ref2.caption,
+      css = _ref2.css,
+      imageOverlay = _ref2.imageOverlay,
+      loop = _ref2.loop,
+      marqueeOn = _ref2.marqueeOn,
+      mediaComponent = _ref2.mediaComponent,
+      muted = _ref2.muted,
+      noAutoPlay = _ref2.noAutoPlay,
+      placeholder = _ref2.placeholder,
+      progress = _ref2.progress,
+      showProgress = _ref2.showProgress,
+      source = _ref2.source,
+      title = _ref2.title,
+      subtitle = _ref2.subtitle,
+      text = _ref2.text,
+      textAlign = _ref2.textAlign,
+      rest = _objectWithoutProperties(_ref2, _excluded);
+    delete rest.pressed;
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", _objectSpread(_objectSpread({}, rest), {}, {
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         className: css.bg
@@ -279,7 +299,9 @@ var MediaOverlayBase = exports.MediaOverlayBase = (0, _kind["default"])({
  */
 var MediaOverlayDecorator = exports.MediaOverlayDecorator = (0, _compose["default"])((0, _Marquee.MarqueeController)({
   marqueeOnFocus: true
-}), _Pure["default"], _Spottable["default"], (0, _Slottable["default"])({
+}), _Pure["default"], (0, _Touchable["default"])({
+  activeProp: 'pressed'
+}), _Spottable["default"], (0, _Slottable["default"])({
   slots: ['source']
 }), _Skinnable["default"]);
 

package/MediaOverlay/MediaOverlay.module.css

@@ -1,3 +1,86 @@
+/* ---------------------------------------
+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
+------------------------------------------ */
 .mediaOverlay {
   display: block;
   position: relative;
@@ -16,6 +99,37 @@
 }
 .mediaOverlay .mediaContainer {
   position: relative;
+  transition: transform var(--lime-focus-out-motion-duration) var(--lime-focus-out-motion-easing-function);
+}
+:global(.spotlight-input-key) .mediaOverlay:global(.spottable):focus .mediaContainer,
+:global(.spotlight-input-mouse) .mediaOverlay:global(.spottable):focus .mediaContainer {
+  transform: scale(1.1);
+  transition: transform var(--lime-focus-in-motion-duration) var(--lime-focus-in-motion-easing-function);
+}
+:global(.spotlight-input-touch) .mediaOverlay:global(.spottable):active .mediaContainer {
+  transform: scale(1.1);
+  transition: transform var(--lime-focus-in-motion-duration) var(--lime-focus-in-motion-easing-function);
+}
+:global(.spotlight-input-key) .mediaOverlay:not([disabled]):global(.spottable):focus.pressed .mediaContainer,
+:global(.spotlight-input-mouse) .mediaOverlay:not([disabled]):global(.spottable):focus.pressed .mediaContainer,
+:global(.spotlight-input-key) .mediaOverlay:not([disabled]):global(.spottable):focus:active .mediaContainer,
+:global(.spotlight-input-mouse) .mediaOverlay:not([disabled]):global(.spottable):focus:active .mediaContainer {
+  transform: scale(1.05);
+  transition: transform var(--lime-press-motion-duration) var(--lime-press-motion-easing-function);
+}
+:global(.spotlight-input-key) .mediaOverlay:not([disabled]):global(.spottable):focus:not(.pressed) .mediaContainer,
+:global(.spotlight-input-mouse) .mediaOverlay:not([disabled]):global(.spottable):focus:not(.pressed) .mediaContainer {
+  transform: scale(1.1);
+  transition: transform var(--lime-release-motion-duration) var(--lime-release-motion-easing-function);
+}
+:global(.spotlight-input-touch) .mediaOverlay:not([disabled]):global(.spottable):active.pressed .mediaContainer,
+:global(.spotlight-input-touch) .mediaOverlay:not([disabled]):global(.spottable):active:active .mediaContainer {
+  transform: scale(1.05);
+  transition: transform var(--lime-press-motion-duration) var(--lime-press-motion-easing-function);
+}
+:global(.spotlight-input-touch) .mediaOverlay:not([disabled]):global(.spottable):active:not(.pressed) .mediaContainer {
+  transform: scale(1.1);
+  transition: transform var(--lime-release-motion-duration) var(--lime-release-motion-easing-function);
 }
 .mediaOverlay .media {
   display: block;
@@ -88,21 +202,6 @@
   font-size: var(--primitive-font-size-48);
   line-height: 1.3em;
 }
-:global(.spotlight-input-key) .mediaOverlay:global(.spottable):focus .image,
-:global(.spotlight-input-mouse) .mediaOverlay:global(.spottable):focus .image,
-:global(.spotlight-input-key) .mediaOverlay:global(.spottable):focus .media,
-:global(.spotlight-input-mouse) .mediaOverlay:global(.spottable):focus .media,
-:global(.spotlight-input-key) .mediaOverlay:global(.spottable):focus .progressBar,
-:global(.spotlight-input-mouse) .mediaOverlay:global(.spottable):focus .progressBar {
-  transform: scale(1.1);
-  transition: transform 200ms ease-in-out;
-}
-:global(.spotlight-input-touch) .mediaOverlay:global(.spottable):active .image,
-:global(.spotlight-input-touch) .mediaOverlay:global(.spottable):active .media,
-:global(.spotlight-input-touch) .mediaOverlay:global(.spottable):active .progressBar {
-  transform: scale(1.1);
-  transition: transform 200ms ease-in-out;
-}
 .mediaOverlay:global(.neutral) .bg {
   opacity: 0;
   background-color: var(--semantic-color-surface-default-focused);