@enact/limestone 1.3.0 → 1.10.0

package/IconItem/IconItem.module.css

@@ -1,6 +1,89 @@
+/* ---------------------------------------
+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
+------------------------------------------ */
 .iconItem {
   position: relative;
-  transition: transform 200ms ease-in-out;
+  transition: transform var(--lime-focus-out-motion-duration) var(--lime-focus-out-motion-easing-function);
   will-change: transform;
   height: 5.33333rem;
   width: 6.95833rem;
@@ -57,6 +140,7 @@
 :global(.spotlight-input-key) .iconItem:global(.spottable):focus,
 :global(.spotlight-input-mouse) .iconItem:global(.spottable):focus {
   transform: scale(1.1);
+  transition: transform var(--lime-focus-in-motion-duration) var(--lime-focus-in-motion-easing-function);
 }
 :global(.spotlight-input-key) .iconItem:global(.spottable):focus.labelOnFocus .label,
 :global(.spotlight-input-mouse) .iconItem:global(.spottable):focus.labelOnFocus .label,
@@ -70,6 +154,7 @@
 }
 :global(.spotlight-input-touch) .iconItem:global(.spottable):active {
   transform: scale(1.1);
+  transition: transform var(--lime-focus-in-motion-duration) var(--lime-focus-in-motion-easing-function);
 }
 :global(.spotlight-input-touch) .iconItem:global(.spottable):active.labelOnFocus .label,
 :global(.spotlight-input-touch) .iconItem:global(.spottable):active.labelOnFocus .labelContainer {
@@ -78,6 +163,27 @@
 :global(.spotlight-input-touch) .iconItem:global(.spottable):active.titleOnFocus .title {
   visibility: visible;
 }
+:global(.spotlight-input-key) .iconItem:not([disabled]):global(.spottable):focus.pressed,
+:global(.spotlight-input-mouse) .iconItem:not([disabled]):global(.spottable):focus.pressed,
+:global(.spotlight-input-key) .iconItem:not([disabled]):global(.spottable):focus:active,
+:global(.spotlight-input-mouse) .iconItem:not([disabled]):global(.spottable):focus:active {
+  transform: scale(1.05);
+  transition: transform var(--lime-press-motion-duration) var(--lime-press-motion-easing-function);
+}
+:global(.spotlight-input-key) .iconItem:not([disabled]):global(.spottable):focus:not(:pressed),
+:global(.spotlight-input-mouse) .iconItem:not([disabled]):global(.spottable):focus:not(:pressed) {
+  transform: scale(1.1);
+  transition: transform var(--lime-release-motion-duration) var(--lime-release-motion-easing-function);
+}
+:global(.spotlight-input-touch) .iconItem:not([disabled]):global(.spottable):active.pressed,
+:global(.spotlight-input-touch) .iconItem:not([disabled]):global(.spottable):active:active {
+  transform: scale(1.05);
+  transition: transform var(--lime-press-motion-duration) var(--lime-press-motion-easing-function);
+}
+:global(.spotlight-input-touch) .iconItem:not([disabled]):global(.spottable):active:not(:pressed) {
+  transform: scale(1.1);
+  transition: transform var(--lime-release-motion-duration) var(--lime-release-motion-easing-function);
+}
 :global(.noAnimation) .iconItem {
   transition: none;
 }

package/IconItem/tests/IconItem-specs.js

@@ -2,8 +2,9 @@
 
 require("@testing-library/jest-dom");
 var _react = require("@testing-library/react");
-var _IconItem = require("../IconItem");
+var _IconItem = _interopRequireWildcard(require("../IconItem"));
 var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 describe('IconItem', function () {
   test('should support `background` prop', function () {
     var background = '#ffffff';
@@ -103,4 +104,32 @@ describe('IconItem', function () {
     var actual = _react.screen.getByTestId('iconitem');
     expect(actual).toHaveClass(expected);
   });
+  test('should be pressed when selected', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_IconItem["default"], {
+      "data-testid": "iconitem"
+    }));
+    var iconItem = _react.screen.getByTestId('iconitem');
+
+    // Select by key
+    _react.fireEvent.keyDown(iconItem, {
+      key: 'Enter',
+      code: 'Enter',
+      keyCode: 13,
+      which: 13
+    });
+    expect(iconItem).toHaveClass('pressed');
+    _react.fireEvent.keyUp(iconItem, {
+      key: 'Enter',
+      code: 'Enter',
+      keyCode: 13,
+      which: 13
+    });
+    expect(iconItem).not.toHaveClass('pressed');
+
+    // Select by pointer
+    _react.fireEvent.mouseDown(iconItem);
+    expect(iconItem).toHaveClass('pressed');
+    _react.fireEvent.mouseUp(iconItem);
+    expect(iconItem).not.toHaveClass('pressed');
+  });
 });

package/Image/Image.d.ts

@@ -32,14 +32,15 @@ export class ImageBase extends React.Component<
   Merge<React.HTMLProps<HTMLElement>, ImageBaseProps>
 > {}
 
-export interface ImageDecoratorProps
-  extends limestone_Skinnable_SkinnableProps {}
+export interface ImageDecoratorProps extends limestone_Skinnable_SkinnableProps {}
 export function ImageDecorator<P>(
   Component: React.ComponentType<P> | string,
 ): React.ComponentType<P & ImageDecoratorProps>;
 
-export interface ImageProps
-  extends Merge<ImageBaseProps, ImageDecoratorProps> {}
+export interface ImageProps extends Merge<
+  ImageBaseProps,
+  ImageDecoratorProps
+> {}
 /**
  * A Limestone-styled image component
  * ```

package/Image/Image.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports["default"] = exports.ImageDecorator = exports.ImageBase = exports.Image = void 0;
 var _kind = _interopRequireDefault(require("@enact/core/kind"));
 var _hoc = _interopRequireDefault(require("@enact/core/hoc"));
+var _util = require("@enact/core/util");
 var _Image = require("@enact/ui/Image");
 var _propTypes = _interopRequireDefault(require("@enact/core/internal/prop-types"));
 var _ForwardRef = _interopRequireDefault(require("@enact/ui/ForwardRef"));
@@ -106,7 +107,8 @@ var ImageBase = exports.ImageBase = (0, _kind["default"])({
 // another time. -B 2018-05-01
 var ResponsiveImageDecorator = (0, _hoc["default"])(function (config, Wrapped) {
   // eslint-disable-next-line no-shadow
-  var ResponsiveImageDecorator = function ResponsiveImageDecorator(props) {
+  var _ResponsiveImageDecorator = function ResponsiveImageDecorator(props) {
+    (0, _util.checkPropTypes)(_ResponsiveImageDecorator, props);
     var _useState = (0, _react.useState)((0, _resolution.selectSrc)(props.src)),
       _useState2 = _slicedToArray(_useState, 2),
       setSrc = _useState2[1];
@@ -122,11 +124,11 @@ var ResponsiveImageDecorator = (0, _hoc["default"])(function (config, Wrapped) {
 
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(Wrapped, _objectSpread({}, props));
   };
-  ResponsiveImageDecorator.displayName = 'ResponsiveImageDecorator';
-  ResponsiveImageDecorator.propTypes = {
+  _ResponsiveImageDecorator.displayName = 'ResponsiveImageDecorator';
+  _ResponsiveImageDecorator.propTypes = {
     src: _propTypes2["default"].oneOfType([_propTypes2["default"].string, _propTypes2["default"].object])
   };
-  return ResponsiveImageDecorator;
+  return _ResponsiveImageDecorator;
 });
 
 /**

package/ImageItem/ImageItem.d.ts

@@ -99,20 +99,21 @@ export class ImageItemBase extends React.Component<
   Merge<React.HTMLProps<HTMLElement>, ImageItemBaseProps>
 > {}
 
-export interface ImageItemDecoratorProps
-  extends Merge<
-    Merge<
-      limestone_Marquee_MarqueeControllerProps,
-      spotlight_Spottable_SpottableProps
-    >,
-    limestone_Skinnable_SkinnableProps
-  > {}
+export interface ImageItemDecoratorProps extends Merge<
+  Merge<
+    limestone_Marquee_MarqueeControllerProps,
+    spotlight_Spottable_SpottableProps
+  >,
+  limestone_Skinnable_SkinnableProps
+> {}
 export function ImageItemDecorator<P>(
   Component: React.ComponentType<P> | string,
 ): React.ComponentType<P & ImageItemDecoratorProps>;
 
-export interface ImageItemProps
-  extends Merge<ImageItemBaseProps, ImageItemDecoratorProps> {}
+export interface ImageItemProps extends Merge<
+  ImageItemBaseProps,
+  ImageItemDecoratorProps
+> {}
 /**
  * A limestone-styled image item, Marquee and Spottable applied.
  * 

package/ImageItem/ImageItem.js

@@ -11,6 +11,7 @@ var _ImageItem = require("@enact/ui/ImageItem");
 var _Layout = require("@enact/ui/Layout");
 var _propTypes2 = _interopRequireDefault(require("prop-types"));
 var _compose = _interopRequireDefault(require("ramda/src/compose"));
+var _$L = _interopRequireDefault(require("../internal/$L"));
 var _Checkbox = require("../Checkbox");
 var _Icon = _interopRequireDefault(require("../Icon"));
 var _Image = _interopRequireDefault(require("../Image"));
@@ -225,15 +226,24 @@ var ImageItemBase = exports.ImageItemBase = (0, _kind["default"])({
     publicClassNames: ['imageItem', 'caption', 'fullImage', 'horizontal', 'image', 'imageIcon', 'label', 'selected', 'selectionIcon', 'vertical']
   },
   computed: {
-    children: function children(_ref) {
-      var centered = _ref.centered,
-        _children = _ref.children,
-        css = _ref.css,
-        index = _ref['data-index'],
-        imageIconComponent = _ref.imageIconComponent,
-        imageIconSrc = _ref.imageIconSrc,
+    'aria-label': function ariaLabel(_ref) {
+      var customAriaLabel = _ref['aria-label'],
+        children = _ref.children,
         label = _ref.label,
-        orientation = _ref.orientation;
+        selected = _ref.selected,
+        showSelection = _ref.showSelection;
+      var defaultAriaLabel = "".concat(children || '').concat(label ? " ".concat(label) : '');
+      return "".concat(customAriaLabel || defaultAriaLabel).concat(selected && showSelection ? ' ' + (0, _$L["default"])('Selected') : '');
+    },
+    children: function children(_ref2) {
+      var centered = _ref2.centered,
+        _children = _ref2.children,
+        css = _ref2.css,
+        index = _ref2['data-index'],
+        imageIconComponent = _ref2.imageIconComponent,
+        imageIconSrc = _ref2.imageIconSrc,
+        label = _ref2.label,
+        orientation = _ref2.orientation;
       var hasImageIcon = imageIconSrc && orientation === 'vertical';
       if (!hasImageIcon && !_children && !label) return;
       var alignment = orientation === 'vertical' && centered ? {
@@ -270,23 +280,23 @@ var ImageItemBase = exports.ImageItemBase = (0, _kind["default"])({
         children: captions
       }) : captions;
     },
-    className: function className(_ref2) {
-      var children = _ref2.children,
-        imageIconSrc = _ref2.imageIconSrc,
-        label = _ref2.label,
-        orientation = _ref2.orientation,
-        styler = _ref2.styler,
-        wideImage = _ref2.wideImage;
+    className: function className(_ref3) {
+      var children = _ref3.children,
+        imageIconSrc = _ref3.imageIconSrc,
+        label = _ref3.label,
+        orientation = _ref3.orientation,
+        styler = _ref3.styler,
+        wideImage = _ref3.wideImage;
       return styler.append({
         fullImage: orientation === 'vertical' && !children && !label && !imageIconSrc,
         wideImage: orientation === 'horizontal' && wideImage
       });
     },
-    selectionComponent: function selectionComponent(_ref3) {
-      var css = _ref3.css,
-        orientation = _ref3.orientation,
-        selected = _ref3.selected,
-        SelectionComponent = _ref3.selectionComponent;
+    selectionComponent: function selectionComponent(_ref4) {
+      var css = _ref4.css,
+        orientation = _ref4.orientation,
+        selected = _ref4.selected,
+        SelectionComponent = _ref4.selectionComponent;
       if (SelectionComponent) {
         return /*#__PURE__*/(0, _jsxRuntime.jsx)(SelectionComponent, {});
       } else if (orientation === 'vertical') {
@@ -303,23 +313,19 @@ var ImageItemBase = exports.ImageItemBase = (0, _kind["default"])({
       }
     }
   },
-  render: function render(_ref4) {
-    var css = _ref4.css,
-      disabled = _ref4.disabled,
-      orientation = _ref4.orientation,
-      SelectionComponent = _ref4.selectionComponent,
-      showSelection = _ref4.showSelection,
-      rest = _objectWithoutProperties(_ref4, _excluded);
+  render: function render(_ref5) {
+    var css = _ref5.css,
+      disabled = _ref5.disabled,
+      orientation = _ref5.orientation,
+      SelectionComponent = _ref5.selectionComponent,
+      showSelection = _ref5.showSelection,
+      rest = _objectWithoutProperties(_ref5, _excluded);
     var isSlotBefore = orientation === 'horizontal' && showSelection;
     delete rest.centered;
     delete rest.imageIconComponent;
     delete rest.imageIconSrc;
     delete rest.label;
     delete rest.wideImage;
-    if (showSelection) {
-      rest['role'] = 'checkbox';
-      rest['aria-checked'] = rest.selected;
-    }
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ImageItem.ImageItem, _objectSpread(_objectSpread({}, rest), {}, {
       "aria-disabled": disabled,
       css: css,

package/ImageItem/ImageItem.module.css

@@ -20,16 +20,16 @@
   line-height: 1.75rem;
 }
 :global(.enact-locale-km) .imageItem .caption {
-  font-size: 1.125rem;
+  font-size: var(--primitive-font-size-54);
 }
 :global(.enact-locale-si) .imageItem .caption {
-  font-size: 1.125rem;
+  font-size: var(--primitive-font-size-54);
 }
 :global(.enact-locale-th) .imageItem .caption {
-  font-size: 1.125rem;
+  font-size: var(--primitive-font-size-54);
 }
 :global(.enact-locale-vi) .imageItem .caption {
-  font-size: 1.125rem;
+  font-size: var(--primitive-font-size-54);
 }
 .imageItem .label {
   font-size: var(--primitive-font-size-48);
@@ -37,20 +37,20 @@
   line-height: 1.25rem;
 }
 :global(.enact-locale-km) .imageItem .label {
-  font-size: 0.75rem;
+  font-size: var(--primitive-font-size-36);
 }
 :global(.enact-locale-si) .imageItem .label {
-  font-size: 0.75rem;
+  font-size: var(--primitive-font-size-36);
 }
 :global(.enact-locale-th) .imageItem .label {
-  font-size: 0.75rem;
+  font-size: var(--primitive-font-size-36);
 }
 :global(.enact-locale-vi) .imageItem .label {
-  font-size: 0.75rem;
+  font-size: var(--primitive-font-size-36);
 }
 .imageItem.vertical.fullImage {
   border-radius: 0;
-  padding: 1.25rem;
+  padding: var(--primitive-spacing-60);
 }
 .imageItem.vertical.fullImage .image {
   transition: transform 200ms ease-in-out, box-shadow 200ms ease-in-out;
@@ -71,7 +71,7 @@
 }
 .imageItem.vertical:not(.fullImage) {
   padding: var(--primitive-spacing-24) var(--primitive-spacing-24) var(--primitive-spacing-30);
-  margin: 0 0.75rem 0.625rem 0.75rem;
+  margin: 0 var(--primitive-spacing-36) var(--primitive-spacing-30) var(--primitive-spacing-36);
 }
 .imageItem.vertical .selectionContainer {
   background-color: transparent;
@@ -123,9 +123,9 @@
   height: 1.375rem;
 }
 .imageItem.horizontal {
-  padding: 0.625rem 1rem;
+  padding: var(--primitive-spacing-30) 1rem;
   align-items: center;
-  margin: 0 0.75rem 0.625rem 0.75rem;
+  margin: 0 var(--primitive-spacing-36) var(--primitive-spacing-30) var(--primitive-spacing-36);
 }
 .imageItem.horizontal .image {
   width: 3.75rem;
@@ -180,7 +180,7 @@
   border-color: color(from var(--semantic-color-on-surface-main-selected) srgb r g b / 0.7);
 }
 .imageItem:global(.neutral).selected.vertical .selectionIcon {
-  background-color: var(--semantic-color-surface-accent);
+  background-color: var(--semantic-color-surface-highlight);
   color: var(--semantic-color-on-surface-white);
 }
 .imageItem:global(.neutral).vertical.fullImage .selectionContainer::after {
@@ -248,7 +248,7 @@
 }
 :global(.spotlight-input-key) .imageItem:global(.neutral):global(.spottable):focus.vertical.selected .selectionIcon,
 :global(.spotlight-input-mouse) .imageItem:global(.neutral):global(.spottable):focus.vertical.selected .selectionIcon {
-  background-color: var(--semantic-color-surface-accent);
+  background-color: var(--semantic-color-surface-highlight);
   color: var(--semantic-color-on-surface-white);
 }
 :global(.spotlight-input-touch) .imageItem:global(.neutral):global(.spottable):active {
@@ -284,7 +284,7 @@
   box-shadow: 0 0.75rem 0.75rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
 }
 :global(.spotlight-input-touch) .imageItem:global(.neutral):global(.spottable):active.vertical.selected .selectionIcon {
-  background-color: var(--semantic-color-surface-accent);
+  background-color: var(--semantic-color-surface-highlight);
   color: var(--semantic-color-on-surface-white);
 }
 :global(.noAnimation) .imageItem:global(.neutral).vertical.fullImage .image {
@@ -332,7 +332,7 @@
   border-color: color(from var(--semantic-color-on-surface-main-selected) srgb r g b / 0.7);
 }
 :global(.enact-a11y-high-contrast) .imageItem:global(.neutral):global(.highContrast).selected.vertical .selectionIcon {
-  background-color: var(--semantic-color-surface-accent);
+  background-color: var(--semantic-color-surface-highlight);
   color: var(--semantic-color-on-surface-white);
 }
 :global(.enact-a11y-high-contrast) .imageItem:global(.neutral):global(.highContrast).vertical.fullImage .selectionContainer::after {
@@ -400,7 +400,7 @@
 }
 :global(.spotlight-input-key) :global(.enact-a11y-high-contrast) .imageItem:global(.neutral):global(.highContrast):global(.spottable):focus.vertical.selected .selectionIcon,
 :global(.spotlight-input-mouse) :global(.enact-a11y-high-contrast) .imageItem:global(.neutral):global(.highContrast):global(.spottable):focus.vertical.selected .selectionIcon {
-  background-color: var(--semantic-color-surface-accent);
+  background-color: var(--semantic-color-surface-highlight);
   color: var(--semantic-color-on-surface-white);
 }
 :global(.spotlight-input-touch) :global(.enact-a11y-high-contrast) .imageItem:global(.neutral):global(.highContrast):global(.spottable):active {
@@ -436,7 +436,7 @@
   box-shadow: 0 0.75rem 0.75rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
 }
 :global(.spotlight-input-touch) :global(.enact-a11y-high-contrast) .imageItem:global(.neutral):global(.highContrast):global(.spottable):active.vertical.selected .selectionIcon {
-  background-color: var(--semantic-color-surface-accent);
+  background-color: var(--semantic-color-surface-highlight);
   color: var(--semantic-color-on-surface-white);
 }
 :global(.noAnimation) :global(.enact-a11y-high-contrast) .imageItem:global(.neutral):global(.highContrast).vertical.fullImage .image {
@@ -484,7 +484,7 @@
   border-color: color(from var(--semantic-color-on-surface-main-selected) srgb r g b / 0.7);
 }
 .imageItem:global(.light).selected.vertical .selectionIcon {
-  background-color: var(--semantic-color-surface-accent);
+  background-color: var(--semantic-color-surface-highlight);
   color: var(--semantic-color-on-surface-white);
 }
 .imageItem:global(.light).vertical.fullImage .selectionContainer::after {
@@ -552,7 +552,7 @@
 }
 :global(.spotlight-input-key) .imageItem:global(.light):global(.spottable):focus.vertical.selected .selectionIcon,
 :global(.spotlight-input-mouse) .imageItem:global(.light):global(.spottable):focus.vertical.selected .selectionIcon {
-  background-color: var(--semantic-color-surface-accent);
+  background-color: var(--semantic-color-surface-highlight);
   color: var(--semantic-color-on-surface-white);
 }
 :global(.spotlight-input-touch) .imageItem:global(.light):global(.spottable):active {
@@ -588,7 +588,7 @@
   box-shadow: 0 0.75rem 0.75rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
 }
 :global(.spotlight-input-touch) .imageItem:global(.light):global(.spottable):active.vertical.selected .selectionIcon {
-  background-color: var(--semantic-color-surface-accent);
+  background-color: var(--semantic-color-surface-highlight);
   color: var(--semantic-color-on-surface-white);
 }
 :global(.noAnimation) .imageItem:global(.light).vertical.fullImage .image {
@@ -641,7 +641,7 @@
   border-color: color(from var(--semantic-color-on-surface-main-selected) srgb r g b / 0.7);
 }
 .imageItem:global(.game).selected.vertical .selectionIcon {
-  background-color: var(--semantic-color-surface-accent);
+  background-color: var(--semantic-color-surface-highlight);
   color: var(--semantic-color-on-surface-white);
 }
 .imageItem:global(.game).vertical.fullImage .selectionContainer::after {
@@ -709,7 +709,7 @@
 }
 :global(.spotlight-input-key) .imageItem:global(.game):global(.spottable):focus.vertical.selected .selectionIcon,
 :global(.spotlight-input-mouse) .imageItem:global(.game):global(.spottable):focus.vertical.selected .selectionIcon {
-  background-color: var(--semantic-color-surface-accent);
+  background-color: var(--semantic-color-surface-highlight);
   color: var(--semantic-color-on-surface-white);
 }
 :global(.spotlight-input-touch) .imageItem:global(.game):global(.spottable):active {
@@ -745,7 +745,7 @@
   box-shadow: 0 0.75rem 0.75rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
 }
 :global(.spotlight-input-touch) .imageItem:global(.game):global(.spottable):active.vertical.selected .selectionIcon {
-  background-color: var(--semantic-color-surface-accent);
+  background-color: var(--semantic-color-surface-highlight);
   color: var(--semantic-color-on-surface-white);
 }
 :global(.noAnimation) .imageItem:global(.game).vertical.fullImage .image {
@@ -797,7 +797,7 @@
   border-color: color(from var(--semantic-color-on-surface-main-selected) srgb r g b / 0.7);
 }
 :global(.green) .imageItem:global(.game).selected.vertical .selectionIcon {
-  background-color: var(--semantic-color-surface-accent);
+  background-color: var(--semantic-color-surface-highlight);
   color: var(--semantic-color-on-surface-white);
 }
 :global(.green) .imageItem:global(.game).vertical.fullImage .selectionContainer::after {
@@ -865,7 +865,7 @@
 }
 :global(.spotlight-input-key) :global(.green) .imageItem:global(.game):global(.spottable):focus.vertical.selected .selectionIcon,
 :global(.spotlight-input-mouse) :global(.green) .imageItem:global(.game):global(.spottable):focus.vertical.selected .selectionIcon {
-  background-color: var(--semantic-color-surface-accent);
+  background-color: var(--semantic-color-surface-highlight);
   color: var(--semantic-color-on-surface-white);
 }
 :global(.spotlight-input-touch) :global(.green) .imageItem:global(.game):global(.spottable):active {
@@ -901,7 +901,7 @@
   box-shadow: 0 0.75rem 0.75rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
 }
 :global(.spotlight-input-touch) :global(.green) .imageItem:global(.game):global(.spottable):active.vertical.selected .selectionIcon {
-  background-color: var(--semantic-color-surface-accent);
+  background-color: var(--semantic-color-surface-highlight);
   color: var(--semantic-color-on-surface-white);
 }
 :global(.noAnimation) :global(.green) .imageItem:global(.game).vertical.fullImage .image {
@@ -953,7 +953,7 @@
   border-color: color(from var(--semantic-color-on-surface-main-selected) srgb r g b / 0.7);
 }
 :global(.orange) .imageItem:global(.game).selected.vertical .selectionIcon {
-  background-color: var(--semantic-color-surface-accent);
+  background-color: var(--semantic-color-surface-highlight);
   color: var(--semantic-color-on-surface-white);
 }
 :global(.orange) .imageItem:global(.game).vertical.fullImage .selectionContainer::after {
@@ -1021,7 +1021,7 @@
 }
 :global(.spotlight-input-key) :global(.orange) .imageItem:global(.game):global(.spottable):focus.vertical.selected .selectionIcon,
 :global(.spotlight-input-mouse) :global(.orange) .imageItem:global(.game):global(.spottable):focus.vertical.selected .selectionIcon {
-  background-color: var(--semantic-color-surface-accent);
+  background-color: var(--semantic-color-surface-highlight);
   color: var(--semantic-color-on-surface-white);
 }
 :global(.spotlight-input-touch) :global(.orange) .imageItem:global(.game):global(.spottable):active {
@@ -1057,7 +1057,7 @@
   box-shadow: 0 0.75rem 0.75rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
 }
 :global(.spotlight-input-touch) :global(.orange) .imageItem:global(.game):global(.spottable):active.vertical.selected .selectionIcon {
-  background-color: var(--semantic-color-surface-accent);
+  background-color: var(--semantic-color-surface-highlight);
   color: var(--semantic-color-on-surface-white);
 }
 :global(.noAnimation) :global(.orange) .imageItem:global(.game).vertical.fullImage .image {

package/ImageItem/tests/ImageItem-specs.js

@@ -169,20 +169,13 @@ describe('ImageItem', function () {
     var actual = _react.screen.getAllByRole('img')[0].children.item(0);
     expect(actual).toHaveClass(expected);
   });
-  test('should have `checkbox` role when `showSelection` is true', function () {
-    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_ImageItem.ImageItemBase, {
-      showSelection: true
-    }));
-    var actual = _react.screen.getByRole('checkbox');
-    expect(actual).toBeInTheDocument();
-  });
-  test('should be `checked` when `showSelection` and `selected` props are true', function () {
+  test('should have "Selected" in `aria-label` when `showSelection` and `selected` is true', function () {
     (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_ImageItem.ImageItemBase, {
       selected: true,
       showSelection: true
     }));
-    var actual = _react.screen.getByRole('checkbox');
-    expect(actual).toBeChecked();
+    var actual = _react.screen.getByLabelText('Selected');
+    expect(actual).toBeInTheDocument();
   });
   test('should support `wideImage` prop', function () {
     (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_ImageItem.ImageItemBase, {