@enact/limestone 1.3.0 → 1.9.3

package/CHANGELOG.md

@@ -2,6 +2,226 @@
 
 The following is a curated list of changes in the Enact limestone module, newest changes on the top.
 
+## [1.9.3] - 2026-04-20
+
+### Fixed
+
+- `limestone/Popup` to not delay when closed with pointer
+
+## [1.9.2] - 2026-03-10
+
+### Fixed
+
+- `limestone/Card` `captionOverlayOnFocus` prop to work in `focusRing` mode
+
+## [1.9.1] - 2026-02-26
+
+### Changed
+
+- `limestone/Slider` styling to match the latest GUI
+
+### Fixed
+
+- `limestone/Card` press motion to work with key press
+- `limestone/IconItem` press motion to work with key press
+- `limestone/MediaOverlay` press motion to work with key press
+- `limestone/Popup` to avoid popup content blinking into existence after render
+- `limestone/Slider` press motion to work with key press
+
+## [1.9.0] - 2026-01-28
+
+### Added
+
+- `limestone/Button` `focusEffect` prop to set the visual effect applied to the button when focused.
+- `limestone/Icon` supported icon list, adding new icons `btspeakermute`, `system`, `remotecontrolsetting`, `warning`, `filepdf`, `filedoc`, `filexls`, `subtitleru`, and `mypageru`
+
+### Changed
+
+- `limestone/Button` styling to match the latest GUI
+- `limestone/Card` styling to match the latest GUI
+- `limestone/Chip` styling to match the latest GUI
+- `limestone/IconItem` styling to match the latest GUI
+- `limestone/MediaOverlay` styling to match the latest GUI
+- `limestone/Slider` styling to match the latest GUI
+- `limestone/Spinner` to match the latest GUI
+
+### Fixed
+
+- `limestone/Card` to not overflow text when `withoutMarquee` is set
+- `limestone/Input` `overlay` `Back` button to not overflow the `InputField` in case the `Title` or `Subtitle` is not set
+- `limestone/PageViews` to properly navigate between multiple `PageViews`
+- `limestone/PageViews` to resume spotlight on unmount
+
+## [1.8.0] - 2025-12-30
+
+### Added
+
+- `limestone/MediaPlayer.MediaControls` `nextAriaLabel` prop to custom the aria-label of the next button
+- `limestone/MediaPlayer.MediaControls` `nextButtonDisabled` prop to disable the next button
+- `limestone/MediaPlayer.MediaControls` `nextIcon` prop to select the next button icon
+- `limestone/MediaPlayer.MediaControls` `noNextButton` prop to remove the next button
+- `limestone/MediaPlayer.MediaControls` `noPreviousButton` prop to remove the previous button
+- `limestone/MediaPlayer.MediaControls` `onNextButtonClick` prop to custom the next button behavior when it is clicked
+- `limestone/MediaPlayer.MediaControls` `onPreviousButtonClick` prop to custom the previous button behavior when it is clicked
+- `limestone/MediaPlayer.MediaControls` `previousAriaLabel` prop to custom the aria-label of the previous button
+- `limestone/MediaPlayer.MediaControls` `previousButtonDisabled` prop to disable the previous button
+- `limestone/MediaPlayer.MediaControls` `previousIcon` prop to select the previous button icon
+- `limestone/VideoPlayer` `onNext` prop to custom the next button behavior when it is clicked
+- `limestone/VideoPlayer` `onPrevious` prop to custom the previous button behavior when it is clicked
+- `limestone/VideoPlayer` `onWillNext` prop to custom the next button behavior before playing the next video when it is clicked
+- `limestone/VideoPlayer` `onWillPrevious` prop to custom the previous button behavior before playing the previous video when it is clicked
+
+### Changed
+
+- `limestone/TabLayout` styling to match the latest GUI
+- `limestone/VirtualList` warning condition so the message will be shown only when `itemSizes.minSize` and `cbScrollTo` are set
+
+### Fixed
+
+- `limestone/InputField` to not overflow the parent container.
+
+## [1.6.3] - 2025-12-26
+
+### Changed
+
+- `limestone/VideoPlayer.FeedbackTooltip` to match the latest GUI
+
+## [1.7.0] - 2025-12-08
+
+### Added
+
+- `limestone/Icon` supported icon list, adding new icons `link2` and `btspeakermute`
+- `limestone/Card` `aria-label` prop to allow user to custom the aria-label
+- `limestone/Card` `icon` prop to allow user to change the icon
+- `limestone/Card` added option for progressBar
+- `limestone/Card` `splitCaption` prop to allow user to split the content for the captions
+- `limestone/Card` `withoutMarquee` prop to allow user to remove the text marquee effect
+- `limestone/Chip` `checked` prop to allow user to mark `Chip` component as `checked`
+- `limestone/Chip` `isImage` and `imageSize` props to allow user to use `Image` instead of `Icon`
+- `limestone/PageViews` `bannerMode` prop to allow 5-way navigation between pages
+- `limestone/ThemeDecorator/screenTypes` value `wuhd` to support WUHD displays
+
+### Changed
+
+- `limestone/Card` to match the latest GUI
+- `limestone/Checkbox` to match the latest GUI
+- `limestone/ImageItem` to match the latest GUI
+- `limestone/RadioItem` to match the latest GUI
+- `limestone/useScroll.HoverToScroll` scroll animation speed
+- `limestone/VideoPlayer.FeedbackTooltip` to match the latest GUI
+
+### Fixed
+
+- `limetone/Card` voice control to select the Card
+- `limestone/ContextualPopupDecorator` to be positioned appropriately on dynamic resolution changes
+- `limestone/Panels.Header` to use correct positions for elements inside slotBefore and slotAfter
+- `limestone/VideoPlayer.FeedbackTooltip` to use correct font family
+
+## [1.6.2] - 2025-11-05
+
+### Fixed
+
+- `limestone/Panels.Header` to use same Header height with/without subtitle.
+
+## [1.6.1] - 2025-10-29
+
+### Added
+
+- `limestone/Card` audio guidance for disabled
+- `limestone/Icon` supported icon list, updating existing icons
+
+### Fixed
+
+- `limestone/ImageItem` to get custom `aria-label`
+- `limestone/Input` `fullscreen` to prevent the title in portrait mode from rendering over the close button
+- `limestone/Input` `overlay` to prevent the invalid tooltip from overflowing
+- `limestone/Panels.Header` to stop layout shifting on render
+- `limestone/Panels.Header` to stop layout shifting when `noCloseButton` is active
+- `limestone/TabLayout` automatic expand/collapse behavior on screen orientation changes
+- `limestone/VideoPlayer` feedback style
+
+## [1.6.0] - 2025-10-14
+
+### Added
+
+- `limestone/Dropdown` aria props for audio guidance
+- `limestone/Scroller` `scrollToContentContainerOnFocus` prop to scrolls to the content container when descendants get focused
+- `limestone/TabLayout` `blockExpandOnLandscape` prop to prevent the tab list from automatically expand when the screen orientation changes to landscape mode
+
+### Changed
+
+- `limestone/Panels` to match the latest GUI
+- `limestone/PopupTabLayout` to match the latest GUI
+- `limestone/TabLayout` vertical to be expanded in landscape mode
+- `limestone/VideoPlayer` to match the latest GUI
+
+### Fixed
+
+- `limestone/ContextualPopupDecorator` to focus content with timeout when popup opens
+- `limestone/Dropdown` audio guidance for DropdownList
+- `limestone/Panels.Header` to stop layout shifting when `slotAfter` or `slotBefore` are modified
+- `limestone/Scroller` with `editable` prop to have proper `aria-label` when item is selected
+- `limestone/TabLayout` to correctly scroll on tab change, when it is wrapped in `ContentContainerDecorator`
+
+## [1.5.0] - 2025-09-24
+
+### Added
+
+- `limestone/Card` `fitImage` prop to allow image to fit the container by height and be centered
+
+### Fixed
+
+- `limestone/FlexiblePopupPanels` to match the latest GUI
+- `limestone/Panels.Header` to match the latest GUI
+- `limestone/VideoPlayer` position of feedback content
+- `limestone/VirtualList.VirtualGridList` not to show overscroll effect when press down key
+
+## [1.4.0] - 2025-09-15
+
+### Added
+
+- `limestone/CheckboxItem` `CheckboxItemGroup` to wrap multiple checkbox items as a list
+- `limestone/Item` props `slotAfterAria` and `slotBeforeAria` for audio guidance of slotAfter and slotBefore
+- `limestone/RadioItem` `RadioItemGroup` to wrap multiple radio items as a list
+- `limestone/VirtualList` prop `continue5WayHold` to scroll continuously from in a VirtualList to the outer scroller.
+
+### Changed
+
+- `limestone/Chip` audio guidance for chip button and delete button
+- `limestone/ImageItem` audio guidance for selected
+
+### Fixed
+
+- `limestone/Alert` buttons styles for overlay `type`.
+- `limestone/Card` to block select on `keyDown` instead of `keyUp` when `disabled`
+- `limestone/ContextualPopupDecorator` to focus content with timeout when popup opens
+- `limestone/DatePicker` to match the latest GUI
+- `limestone/Dropdown` by removing unnecessary aria props
+- `limestone/Input` buttons styles for number `popupType`.
+- `limestone/InputField` to not clip icons in webOS system.
+- `limestone/MediaPlayer.MediaControls` enforced direction of buttons as `ltr` to prevent them from swapping in RTL locales
+- `limestone/Panels.Header` to match the latest GUI
+- `limestone/TimePicker` to match the latest GUI
+- `limestone/VideoPlayer` to read out the timestamp properly
+
+## [1.3.2] - 2025-09-02
+
+### Fixed
+
+- `limestone/Alert` to show the outline appropriately in high-contrast mode
+- `limestone/Button` icon color to support style override
+- `limestone/Card` audio guidance to translate
+- `limestone/Card` `background` and `border` for `focusRing` mode
+- `limestone/KeyGuide` to show the outline appropriately in high-contrast mode
+- `limestone/Scroller` with `editable` prop to remain focused on the selected item when completing edit by down or enter key in pointer mode
+- `limestone/PopupTabLayout` to show the background color appropriately in high-contrast mode
+
+## [1.3.1] - 2025-08-14
+
+### Changed
+
+- Global variable from `ILIB_SANDSTONE_PATH` to `ILIB_LIMESTONE_PATH`
+
 ## [1.3.0] - 2025-08-08
 
 ### Added

package/Card/Card.d.ts

@@ -20,6 +20,10 @@ String value or Object of values used to determine which image will appear on
 a specific screenSize.
  */
   src: string | object;
+  /**
+   * The "aria-label" for the Card.
+   */
+  "aria-label"?: string;
   /**
  * Determines whether the caption will be placed over the image or not.
 It only applies when  `orientation`  is  `'vertical'` .
@@ -43,11 +47,19 @@ corresponding internal elements and states of this component.
    * Disables Card and becomes non-interactive.
    */
   disabled?: boolean;
+  /**
+   * Fits the image to its height and width and positions it on the center of the Card.
+   */
+  fitImage?: boolean;
   /**
  * Set to  `true`  to display a container with background color.
 When  `orientation`  is  `'horizontal'` , this prop is always  `true`  and provided value will be ignored.
  */
   hasContainer?: boolean;
+  /**
+   * Icon used when  `selected`  is  `true`
+   */
+  icon?: string;
   /**
  * Source for the image icon.
  * 
@@ -79,6 +91,10 @@ a specific screenSize. This prop is only used when  `orientation`  is  `'vertica
    * The primary badge image source.
    */
   primaryBadgeSrc?: string | object;
+  /**
+   * The progress displayed inside the ProgressBar
+   */
+  progress?: number;
   /**
    * Set to  `true`  to display the image with rounded corners.
    */
@@ -95,6 +111,19 @@ a specific screenSize. This prop is only used when  `orientation`  is  `'vertica
    * Applies a selected visual effect to the image.
    */
   selected?: boolean;
+  /**
+   * Activates the 'ProgressBar'.
+   */
+  showProgressBar?: boolean;
+  /**
+ * Splits the captions in two sections. This prop is only used when
+ `captionOverlayOnFocus`  or  `captionOverlay`  is  `true`  and  `orientation`  is  `'vertical'` .
+ */
+  splitCaption?: boolean;
+  /**
+   * Removes the marquee effect of caption and label text.
+   */
+  withoutMarquee?: boolean;
 }
 /**
  * A Limestone styled base component for   .
@@ -104,14 +133,13 @@ export class CardBase extends React.Component<
   Merge<React.HTMLProps<HTMLElement>, CardBaseProps>
 > {}
 
-export interface CardDecoratorProps
-  extends Merge<
-    Merge<
-      limestone_Marquee_MarqueeControllerProps,
-      spotlight_Spottable_SpottableProps
-    >,
-    limestone_Skinnable_SkinnableProps
-  > {}
+export interface CardDecoratorProps extends Merge<
+  Merge<
+    limestone_Marquee_MarqueeControllerProps,
+    spotlight_Spottable_SpottableProps
+  >,
+  limestone_Skinnable_SkinnableProps
+> {}
 export function CardDecorator<P>(
   Component: React.ComponentType<P> | string,
 ): React.ComponentType<P & CardDecoratorProps>;

package/Card/Card.js

@@ -9,17 +9,20 @@ var _kind = _interopRequireDefault(require("@enact/core/kind"));
 var _Spottable = _interopRequireDefault(require("@enact/spotlight/Spottable"));
 var _Card = require("@enact/ui/Card");
 var _Layout = require("@enact/ui/Layout");
+var _Touchable = _interopRequireDefault(require("@enact/ui/Touchable"));
 var _resolution = _interopRequireDefault(require("@enact/ui/resolution"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _compose = _interopRequireDefault(require("ramda/src/compose"));
 var _Icon = _interopRequireDefault(require("../Icon"));
 var _Image = _interopRequireDefault(require("../Image"));
+var _$L = _interopRequireDefault(require("../internal/$L"));
 var _AsyncRenderChildren = _interopRequireDefault(require("../internal/AsyncRenderChildren"));
 var _Marquee = require("../Marquee");
+var _ProgressBar = _interopRequireDefault(require("../ProgressBar"));
 var _Skinnable = _interopRequireDefault(require("../Skinnable"));
 var _CardModule = _interopRequireDefault(require("./Card.module.css"));
 var _jsxRuntime = require("react/jsx-runtime");
-var _excluded = ["css", "imageSize", "primaryBadgeSrc", "secondaryBadgeSrc", "style"];
+var _excluded = ["css", "disabled", "icon", "imageSize", "primaryBadgeSrc", "secondaryBadgeSrc", "style"];
 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; }
@@ -87,6 +90,13 @@ var CardBase = exports.CardBase = (0, _kind["default"])({
      * @public
      */
     src: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].object]).isRequired,
+    /**
+     * The "aria-label" for the Card.
+     *
+     * @type {String}
+     * @public
+     */
+    'aria-label': _propTypes["default"].string,
     /**
      * Determines whether the caption will be placed over the image or not.
      * It only applies when `orientation` is `'vertical'`.
@@ -132,6 +142,13 @@ var CardBase = exports.CardBase = (0, _kind["default"])({
      * @public
      */
     disabled: _propTypes["default"].bool,
+    /**
+     * Fits the image to its height and width and positions it on the center of the Card.
+     *
+     * @type {Boolean}
+     * @public
+     */
+    fitImage: _propTypes["default"].bool,
     /**
      * Set to `true` to display a container with background color.
      * When `orientation` is `'horizontal'`, this prop is always `true` and provided value will be ignored.
@@ -140,6 +157,14 @@ var CardBase = exports.CardBase = (0, _kind["default"])({
      * @public
      */
     hasContainer: _propTypes["default"].bool,
+    /**
+     * Icon used when `selected` is `true`
+     *
+     * @type {String}
+     * @default 'check'
+     * @public
+     */
+    icon: _propTypes["default"].string,
     /**
      * Source for the image icon.
      *
@@ -186,6 +211,14 @@ var CardBase = exports.CardBase = (0, _kind["default"])({
      * @public
      */
     placeholder: _propTypes["default"].string,
+    /**
+     * Indicates if the component is pressed.
+     *
+     * @type {Boolean}
+     * @default false
+     * @private
+     */
+    pressed: _propTypes["default"].bool,
     /**
      * The primary badge image source.
      *
@@ -193,6 +226,13 @@ var CardBase = exports.CardBase = (0, _kind["default"])({
      * @public
      */
     primaryBadgeSrc: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].object]),
+    /**
+     * The progress displayed inside the ProgressBar
+     *
+     * @type {Number}
+     * @public
+     */
+    progress: _propTypes["default"].number,
     /**
      * Set to `true` to display the image with rounded corners.
      *
@@ -220,10 +260,34 @@ var CardBase = exports.CardBase = (0, _kind["default"])({
      * @type {Boolean}
      * @public
      */
-    selected: _propTypes["default"].bool
+    selected: _propTypes["default"].bool,
+    /**
+     * Activates the 'ProgressBar'.
+     *
+     * @type {Boolean}
+     * @public
+     */
+    showProgressBar: _propTypes["default"].bool,
+    /**
+     * Splits the captions in two sections. This prop is only used when
+     * `captionOverlayOnFocus` or `captionOverlay` is `true` and `orientation` is `'vertical'`.
+     *
+     * @type {Boolean}
+     * @public
+     */
+    splitCaption: _propTypes["default"].bool,
+    /**
+     * Removes the marquee effect of caption and label text.
+     * @type {Boolean}
+     * @public
+     */
+    withoutMarquee: _propTypes["default"].bool
   },
   defaultProps: {
-    orientation: 'vertical'
+    icon: 'check',
+    orientation: 'vertical',
+    pressed: false,
+    withoutMarquee: false
   },
   styles: {
     css: _CardModule["default"],
@@ -231,15 +295,16 @@ var CardBase = exports.CardBase = (0, _kind["default"])({
   },
   handlers: {
     onClick: (0, _handle.handle)((0, _handle.not)((0, _handle.forProp)('disabled', true)), (0, _handle.forward)('onClick')),
-    onKeyUp: (0, _handle.handle)((0, _handle.not)((0, _handle.forProp)('disabled', true)), (0, _handle.forward)('onKeyUp'))
+    onKeyDown: (0, _handle.handle)((0, _handle.not)((0, _handle.forProp)('disabled', true)), (0, _handle.forward)('onKeyDown'))
   },
   computed: {
     'aria-label': function ariaLabel(_ref) {
-      var children = _ref.children,
+      var _ariaLabel = _ref['aria-label'],
+        children = _ref.children,
         label = _ref.label,
         secondaryLabel = _ref.secondaryLabel,
         selected = _ref.selected;
-      return "".concat(children || '').concat(label ? " ".concat(label) : '').concat(secondaryLabel ? " ".concat(secondaryLabel) : '').concat(selected ? ' selected' : '');
+      return _ariaLabel || "".concat(children || '').concat(label ? " ".concat(label) : '').concat(secondaryLabel ? " ".concat(secondaryLabel) : '').concat(selected ? ' ' + (0, _$L["default"])('Selected') : '');
     },
     captionOverlay: function captionOverlay(_ref2) {
       var _captionOverlay = _ref2.captionOverlay,
@@ -247,14 +312,20 @@ var CardBase = exports.CardBase = (0, _kind["default"])({
       return _captionOverlay || captionOverlayOnFocus;
     },
     children: function children(_ref3) {
-      var centered = _ref3.centered,
+      var captionOverlay = _ref3.captionOverlay,
+        captionOverlayOnFocus = _ref3.captionOverlayOnFocus,
+        centered = _ref3.centered,
         _children = _ref3.children,
         css = _ref3.css,
         index = _ref3['data-index'],
         imageIconSrc = _ref3.imageIconSrc,
         label = _ref3.label,
         orientation = _ref3.orientation,
-        secondaryLabel = _ref3.secondaryLabel;
+        progress = _ref3.progress,
+        secondaryLabel = _ref3.secondaryLabel,
+        showProgressBar = _ref3.showProgressBar,
+        splitCaption = _ref3.splitCaption,
+        withoutMarquee = _ref3.withoutMarquee;
       var hasImageIcon = imageIconSrc && orientation === 'vertical';
       var alignment = centered && !imageIconSrc ? {
         alignment: 'center'
@@ -266,7 +337,29 @@ var CardBase = exports.CardBase = (0, _kind["default"])({
           component: _Image["default"],
           shrink: true,
           src: imageIconSrc
-        }) : null, /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Layout.Cell, {
+        }) : null, withoutMarquee ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Layout.Cell, {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            style: {
+              textAlign: alignment === null || alignment === void 0 ? void 0 : alignment.alignment
+            },
+            className: css.caption,
+            children: _children
+          }), typeof label !== 'undefined' ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            style: {
+              textAlign: alignment === null || alignment === void 0 ? void 0 : alignment.alignment
+            },
+            className: css.label,
+            children: label
+          }) : null, typeof secondaryLabel !== 'undefined' ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            style: {
+              textAlign: alignment === null || alignment === void 0 ? void 0 : alignment.alignment
+            },
+            className: css.label,
+            children: secondaryLabel
+          }) : null, showProgressBar ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_ProgressBar["default"], {
+            progress: progress
+          }) : null]
+        }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Layout.Cell, {
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Marquee.Marquee, _objectSpread(_objectSpread({}, alignment), {}, {
             className: css.caption,
             marqueeOn: "hover",
@@ -279,9 +372,32 @@ var CardBase = exports.CardBase = (0, _kind["default"])({
             className: css.label,
             marqueeOn: "hover",
             children: secondaryLabel
+          })) : null, showProgressBar ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_ProgressBar["default"], {
+            progress: progress
+          }) : null]
+        })]
+      });
+      var splitCaptions = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Layout.Cell, {
+          className: css.captions,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Marquee.Marquee, _objectSpread(_objectSpread({}, alignment), {}, {
+            className: css.caption,
+            marqueeOn: "hover",
+            children: _children
+          }))
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Layout.Cell, {
+          children: [typeof label !== 'undefined' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Marquee.Marquee, _objectSpread(_objectSpread({}, alignment), {}, {
+            className: css.label,
+            marqueeOn: "hover",
+            children: label
+          })) : null, typeof secondaryLabel !== 'undefined' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Marquee.Marquee, _objectSpread(_objectSpread({}, alignment), {}, {
+            className: css.label,
+            marqueeOn: "hover",
+            children: secondaryLabel
           })) : null]
         })]
       });
+      var selectedCaptions = (captionOverlay || captionOverlayOnFocus) && splitCaption && orientation === 'vertical' ? splitCaptions : captions;
       return typeof index !== 'undefined' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_AsyncRenderChildren["default"], {
         fallback: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Layout.Row, {
           className: css.captions,
@@ -296,12 +412,14 @@ var CardBase = exports.CardBase = (0, _kind["default"])({
           })]
         }),
         index: index,
-        children: captions
-      }) : captions;
+        children: selectedCaptions
+      }) : selectedCaptions;
     },
     className: function className(_ref4) {
       var captionOverlay = _ref4.captionOverlay,
         captionOverlayOnFocus = _ref4.captionOverlayOnFocus,
+        icon = _ref4.icon,
+        pressed = _ref4.pressed,
         roundedImage = _ref4.roundedImage,
         hasContainer = _ref4.hasContainer,
         orientation = _ref4.orientation,
@@ -309,29 +427,46 @@ var CardBase = exports.CardBase = (0, _kind["default"])({
       return styler.append({
         captionOverlay: captionOverlay && orientation === 'vertical',
         captionOverlayOnFocus: !captionOverlay && captionOverlayOnFocus && orientation === 'vertical',
+        pressed: pressed,
         roundedImage: roundedImage,
-        hasContainer: orientation === 'horizontal' || hasContainer && !captionOverlay
+        hasContainer: orientation === 'horizontal' || hasContainer && !captionOverlay,
+        isCheckIcon: icon === 'check'
       });
+    },
+    splitCaption: function splitCaption(_ref5) {
+      var captionOverlay = _ref5.captionOverlay,
+        captionOverlayOnFocus = _ref5.captionOverlayOnFocus,
+        _splitCaption = _ref5.splitCaption;
+      return (captionOverlay || captionOverlayOnFocus) && _splitCaption;
     }
   },
-  render: function render(_ref5) {
+  render: function render(_ref6) {
     var _imageSize$height, _imageSize$width;
-    var css = _ref5.css,
-      imageSize = _ref5.imageSize,
-      primaryBadgeSrc = _ref5.primaryBadgeSrc,
-      secondaryBadgeSrc = _ref5.secondaryBadgeSrc,
-      style = _ref5.style,
-      rest = _objectWithoutProperties(_ref5, _excluded);
+    var css = _ref6.css,
+      disabled = _ref6.disabled,
+      icon = _ref6.icon,
+      imageSize = _ref6.imageSize,
+      primaryBadgeSrc = _ref6.primaryBadgeSrc,
+      secondaryBadgeSrc = _ref6.secondaryBadgeSrc,
+      style = _ref6.style,
+      rest = _objectWithoutProperties(_ref6, _excluded);
     delete rest.captionOverlayOnFocus;
     delete rest.centered;
     delete rest.label;
+    delete rest.progress;
     delete rest.secondaryLabel;
+    delete rest.showProgressBar;
     delete rest.imageIconSrc;
     delete rest.hasContainer;
+    delete rest.pressed;
     delete rest.roundedImage;
+    delete rest.withoutMarquee;
     var defaultImageSize = getDefaultImageSize(rest.orientation);
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Card.Card, _objectSpread(_objectSpread({}, rest), {}, {
+      "aria-disabled": disabled,
       css: css,
+      "data-webos-voice-intent": "Select",
+      disabled: disabled,
       imageComponent: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Image["default"], {
         children: [primaryBadgeSrc ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Image["default"], {
           className: css.primaryBadge,
@@ -343,7 +478,7 @@ var CardBase = exports.CardBase = (0, _kind["default"])({
           className: css.selectionContainer,
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon["default"], {
             className: css.selectionIcon,
-            children: "check"
+            children: icon
           })
         })]
       }),
@@ -368,6 +503,8 @@ var CardBase = exports.CardBase = (0, _kind["default"])({
  */
 var CardDecorator = exports.CardDecorator = (0, _compose["default"])((0, _Marquee.MarqueeController)({
   marqueeOnFocus: true
+}), (0, _Touchable["default"])({
+  activeProp: 'pressed'
 }), _Spottable["default"], _Skinnable["default"]);
 
 /**