@enact/limestone 1.10.1 → 1.10.2

package/ImageItem/ImageItem.module.css

@@ -15,6 +15,34 @@
   left: 0;
   border-radius: var(--semantic-radius-button);
 }
+.imageItem .selectionContainer {
+  background-color: transparent;
+  pointer-events: none;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  position: absolute;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.imageItem .selectionContainer::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  border-width: 0.125rem;
+  border-style: solid;
+}
+.imageItem .selectionContainer .selectionIcon {
+  position: relative;
+  display: block;
+  border-radius: var(--semantic-radius-full);
+  margin: 0;
+}
 .imageItem .caption {
   font-size: var(--primitive-font-size-60);
   line-height: 1.75rem;
@@ -60,11 +88,18 @@
   width: 3rem;
   height: 3rem;
   line-height: 3rem;
+  --icon-size: 3rem;
 }
 .imageItem:global(.largeText).vertical .imageIcon {
   width: 3.3rem;
   height: 3.3rem;
 }
+.imageItem:global(.largeText).horizontal .selectionContainer .selectionIcon {
+  width: 1.5rem;
+  height: 1.5rem;
+  line-height: 1.5rem;
+  --icon-size: 1.5rem;
+}
 .imageItem.vertical.fullImage {
   border-radius: 0;
   padding: var(--primitive-spacing-60);
@@ -90,37 +125,6 @@
   padding: var(--primitive-spacing-24) var(--primitive-spacing-24) var(--primitive-spacing-30);
   margin: 0 var(--primitive-spacing-36) var(--primitive-spacing-30) var(--primitive-spacing-36);
 }
-.imageItem.vertical .selectionContainer {
-  background-color: transparent;
-  pointer-events: none;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  position: absolute;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-.imageItem.vertical .selectionContainer::after {
-  content: '';
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  border-width: 0.125rem;
-  border-style: solid;
-}
-.imageItem.vertical .selectionContainer .selectionIcon {
-  position: relative;
-  display: block;
-  border-radius: var(--semantic-radius-full);
-  margin: 0;
-  width: 2.5rem;
-  height: 2.5rem;
-  line-height: 2.5rem;
-}
 .imageItem.vertical .captions {
   align-items: center;
   margin-top: var(--primitive-spacing-30);
@@ -139,6 +143,12 @@
 .imageItem.vertical .placeholderLabel {
   height: 1.375rem;
 }
+.imageItem.vertical .selectionIcon {
+  width: 2.5rem;
+  height: 2.5rem;
+  line-height: 2.5rem;
+  --icon-size: 2.5rem;
+}
 .imageItem.horizontal {
   padding: var(--primitive-spacing-30) 1rem;
   align-items: center;
@@ -162,12 +172,10 @@
   height: 5rem;
 }
 .imageItem.horizontal .selectionIcon {
-  margin-left: var(--primitive-spacing-12);
-  margin-right: var(--primitive-spacing-48);
-}
-:global(.enact-locale-right-to-left) .imageItem.horizontal .selectionIcon {
-  margin-left: var(--primitive-spacing-48);
-  margin-right: var(--primitive-spacing-12);
+  width: 1.25rem;
+  height: 1.25rem;
+  line-height: 1.25rem;
+  --icon-size: 1.25rem;
 }
 .imageItem:global(.neutral)::before {
   opacity: 0;
@@ -196,7 +204,7 @@
 .imageItem:global(.neutral).selected .selectionContainer::after {
   border-color: color(from var(--semantic-color-on-surface-main-selected) srgb r g b / 0.7);
 }
-.imageItem:global(.neutral).selected.vertical .selectionIcon {
+.imageItem:global(.neutral).selected .selectionIcon {
   background-color: var(--semantic-color-surface-highlight);
   color: var(--semantic-color-on-surface-white);
 }
@@ -254,6 +262,11 @@
 :global(.spotlight-input-mouse) .imageItem:global(.neutral):global(.spottable):focus .label {
   color: var(--semantic-color-on-surface-sub-focused);
 }
+:global(.spotlight-input-key) .imageItem:global(.neutral):global(.spottable):focus.selected .selectionIcon,
+:global(.spotlight-input-mouse) .imageItem:global(.neutral):global(.spottable):focus.selected .selectionIcon {
+  background-color: var(--semantic-color-surface-highlight);
+  color: var(--semantic-color-on-surface-white);
+}
 :global(.spotlight-input-key) .imageItem:global(.neutral):global(.spottable):focus.vertical.fullImage .selectionContainer::after,
 :global(.spotlight-input-mouse) .imageItem:global(.neutral):global(.spottable):focus.vertical.fullImage .selectionContainer::after {
   border-color: var(--semantic-color-stroke-main-focused);
@@ -263,11 +276,6 @@
   transform: scale(1.1);
   box-shadow: 0 0.75rem 0.75rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
 }
-: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-highlight);
-  color: var(--semantic-color-on-surface-white);
-}
 :global(.spotlight-input-touch) .imageItem:global(.neutral):global(.spottable):active {
   color: var(--semantic-color-on-surface-main-focused);
 }
@@ -293,6 +301,10 @@
 :global(.spotlight-input-touch) .imageItem:global(.neutral):global(.spottable):active .label {
   color: var(--semantic-color-on-surface-sub-focused);
 }
+:global(.spotlight-input-touch) .imageItem:global(.neutral):global(.spottable):active.selected .selectionIcon {
+  background-color: var(--semantic-color-surface-highlight);
+  color: var(--semantic-color-on-surface-white);
+}
 :global(.spotlight-input-touch) .imageItem:global(.neutral):global(.spottable):active.vertical.fullImage .selectionContainer::after {
   border-color: var(--semantic-color-stroke-main-focused);
 }
@@ -300,10 +312,6 @@
   transform: scale(1.1);
   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-highlight);
-  color: var(--semantic-color-on-surface-white);
-}
 :global(.noAnimation) .imageItem:global(.neutral).vertical.fullImage .image {
   transition: none;
 }
@@ -348,7 +356,7 @@
 :global(.enact-a11y-high-contrast) .imageItem:global(.neutral):global(.highContrast).selected .selectionContainer::after {
   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 {
+:global(.enact-a11y-high-contrast) .imageItem:global(.neutral):global(.highContrast).selected .selectionIcon {
   background-color: var(--semantic-color-surface-highlight);
   color: var(--semantic-color-on-surface-white);
 }
@@ -406,6 +414,11 @@
 :global(.spotlight-input-mouse) :global(.enact-a11y-high-contrast) .imageItem:global(.neutral):global(.highContrast):global(.spottable):focus .label {
   color: var(--semantic-color-on-surface-sub-focused);
 }
+:global(.spotlight-input-key) :global(.enact-a11y-high-contrast) .imageItem:global(.neutral):global(.highContrast):global(.spottable):focus.selected .selectionIcon,
+:global(.spotlight-input-mouse) :global(.enact-a11y-high-contrast) .imageItem:global(.neutral):global(.highContrast):global(.spottable):focus.selected .selectionIcon {
+  background-color: var(--semantic-color-surface-highlight);
+  color: var(--semantic-color-on-surface-white);
+}
 :global(.spotlight-input-key) :global(.enact-a11y-high-contrast) .imageItem:global(.neutral):global(.highContrast):global(.spottable):focus.vertical.fullImage .selectionContainer::after,
 :global(.spotlight-input-mouse) :global(.enact-a11y-high-contrast) .imageItem:global(.neutral):global(.highContrast):global(.spottable):focus.vertical.fullImage .selectionContainer::after {
   border-color: var(--semantic-color-stroke-main-focused);
@@ -415,11 +428,6 @@
   transform: scale(1.1);
   box-shadow: 0 0.75rem 0.75rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
 }
-: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-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 {
   color: var(--semantic-color-on-surface-main-focused);
 }
@@ -445,6 +453,10 @@
 :global(.spotlight-input-touch) :global(.enact-a11y-high-contrast) .imageItem:global(.neutral):global(.highContrast):global(.spottable):active .label {
   color: var(--semantic-color-on-surface-sub-focused);
 }
+:global(.spotlight-input-touch) :global(.enact-a11y-high-contrast) .imageItem:global(.neutral):global(.highContrast):global(.spottable):active.selected .selectionIcon {
+  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.vertical.fullImage .selectionContainer::after {
   border-color: var(--semantic-color-stroke-main-focused);
 }
@@ -452,10 +464,6 @@
   transform: scale(1.1);
   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-highlight);
-  color: var(--semantic-color-on-surface-white);
-}
 :global(.noAnimation) :global(.enact-a11y-high-contrast) .imageItem:global(.neutral):global(.highContrast).vertical.fullImage .image {
   transition: none;
 }
@@ -500,7 +508,7 @@
 .imageItem:global(.light).selected .selectionContainer::after {
   border-color: color(from var(--semantic-color-on-surface-main-selected) srgb r g b / 0.7);
 }
-.imageItem:global(.light).selected.vertical .selectionIcon {
+.imageItem:global(.light).selected .selectionIcon {
   background-color: var(--semantic-color-surface-highlight);
   color: var(--semantic-color-on-surface-white);
 }
@@ -558,6 +566,11 @@
 :global(.spotlight-input-mouse) .imageItem:global(.light):global(.spottable):focus .label {
   color: var(--semantic-color-on-surface-sub-focused);
 }
+:global(.spotlight-input-key) .imageItem:global(.light):global(.spottable):focus.selected .selectionIcon,
+:global(.spotlight-input-mouse) .imageItem:global(.light):global(.spottable):focus.selected .selectionIcon {
+  background-color: var(--semantic-color-surface-highlight);
+  color: var(--semantic-color-on-surface-white);
+}
 :global(.spotlight-input-key) .imageItem:global(.light):global(.spottable):focus.vertical.fullImage .selectionContainer::after,
 :global(.spotlight-input-mouse) .imageItem:global(.light):global(.spottable):focus.vertical.fullImage .selectionContainer::after {
   border-color: var(--semantic-color-stroke-main-focused);
@@ -567,11 +580,6 @@
   transform: scale(1.1);
   box-shadow: 0 0.75rem 0.75rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
 }
-: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-highlight);
-  color: var(--semantic-color-on-surface-white);
-}
 :global(.spotlight-input-touch) .imageItem:global(.light):global(.spottable):active {
   color: var(--semantic-color-on-surface-main-focused);
 }
@@ -597,6 +605,10 @@
 :global(.spotlight-input-touch) .imageItem:global(.light):global(.spottable):active .label {
   color: var(--semantic-color-on-surface-sub-focused);
 }
+:global(.spotlight-input-touch) .imageItem:global(.light):global(.spottable):active.selected .selectionIcon {
+  background-color: var(--semantic-color-surface-highlight);
+  color: var(--semantic-color-on-surface-white);
+}
 :global(.spotlight-input-touch) .imageItem:global(.light):global(.spottable):active.vertical.fullImage .selectionContainer::after {
   border-color: var(--semantic-color-stroke-main-focused);
 }
@@ -604,10 +616,6 @@
   transform: scale(1.1);
   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-highlight);
-  color: var(--semantic-color-on-surface-white);
-}
 :global(.noAnimation) .imageItem:global(.light).vertical.fullImage .image {
   transition: none;
 }
@@ -657,7 +665,7 @@
 .imageItem:global(.game).selected .selectionContainer::after {
   border-color: color(from var(--semantic-color-on-surface-main-selected) srgb r g b / 0.7);
 }
-.imageItem:global(.game).selected.vertical .selectionIcon {
+.imageItem:global(.game).selected .selectionIcon {
   background-color: var(--semantic-color-surface-highlight);
   color: var(--semantic-color-on-surface-white);
 }
@@ -715,6 +723,11 @@
 :global(.spotlight-input-mouse) .imageItem:global(.game):global(.spottable):focus .label {
   color: var(--semantic-color-on-surface-sub-focused);
 }
+:global(.spotlight-input-key) .imageItem:global(.game):global(.spottable):focus.selected .selectionIcon,
+:global(.spotlight-input-mouse) .imageItem:global(.game):global(.spottable):focus.selected .selectionIcon {
+  background-color: var(--semantic-color-surface-highlight);
+  color: var(--semantic-color-on-surface-white);
+}
 :global(.spotlight-input-key) .imageItem:global(.game):global(.spottable):focus.vertical.fullImage .selectionContainer::after,
 :global(.spotlight-input-mouse) .imageItem:global(.game):global(.spottable):focus.vertical.fullImage .selectionContainer::after {
   border-color: var(--semantic-color-stroke-main-focused);
@@ -724,11 +737,6 @@
   transform: scale(1.1);
   box-shadow: 0 0.75rem 0.75rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
 }
-: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-highlight);
-  color: var(--semantic-color-on-surface-white);
-}
 :global(.spotlight-input-touch) .imageItem:global(.game):global(.spottable):active {
   color: var(--semantic-color-on-surface-main-focused);
 }
@@ -754,6 +762,10 @@
 :global(.spotlight-input-touch) .imageItem:global(.game):global(.spottable):active .label {
   color: var(--semantic-color-on-surface-sub-focused);
 }
+:global(.spotlight-input-touch) .imageItem:global(.game):global(.spottable):active.selected .selectionIcon {
+  background-color: var(--semantic-color-surface-highlight);
+  color: var(--semantic-color-on-surface-white);
+}
 :global(.spotlight-input-touch) .imageItem:global(.game):global(.spottable):active.vertical.fullImage .selectionContainer::after {
   border-color: var(--semantic-color-stroke-main-focused);
 }
@@ -761,10 +773,6 @@
   transform: scale(1.1);
   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-highlight);
-  color: var(--semantic-color-on-surface-white);
-}
 :global(.noAnimation) .imageItem:global(.game).vertical.fullImage .image {
   transition: none;
 }
@@ -813,7 +821,7 @@
 :global(.green) .imageItem:global(.game).selected .selectionContainer::after {
   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 {
+:global(.green) .imageItem:global(.game).selected .selectionIcon {
   background-color: var(--semantic-color-surface-highlight);
   color: var(--semantic-color-on-surface-white);
 }
@@ -871,6 +879,11 @@
 :global(.spotlight-input-mouse) :global(.green) .imageItem:global(.game):global(.spottable):focus .label {
   color: var(--semantic-color-on-surface-sub-focused);
 }
+:global(.spotlight-input-key) :global(.green) .imageItem:global(.game):global(.spottable):focus.selected .selectionIcon,
+:global(.spotlight-input-mouse) :global(.green) .imageItem:global(.game):global(.spottable):focus.selected .selectionIcon {
+  background-color: var(--semantic-color-surface-highlight);
+  color: var(--semantic-color-on-surface-white);
+}
 :global(.spotlight-input-key) :global(.green) .imageItem:global(.game):global(.spottable):focus.vertical.fullImage .selectionContainer::after,
 :global(.spotlight-input-mouse) :global(.green) .imageItem:global(.game):global(.spottable):focus.vertical.fullImage .selectionContainer::after {
   border-color: var(--semantic-color-stroke-main-focused);
@@ -880,11 +893,6 @@
   transform: scale(1.1);
   box-shadow: 0 0.75rem 0.75rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
 }
-: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-highlight);
-  color: var(--semantic-color-on-surface-white);
-}
 :global(.spotlight-input-touch) :global(.green) .imageItem:global(.game):global(.spottable):active {
   color: var(--semantic-color-on-surface-main-focused);
 }
@@ -910,6 +918,10 @@
 :global(.spotlight-input-touch) :global(.green) .imageItem:global(.game):global(.spottable):active .label {
   color: var(--semantic-color-on-surface-sub-focused);
 }
+:global(.spotlight-input-touch) :global(.green) .imageItem:global(.game):global(.spottable):active.selected .selectionIcon {
+  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.vertical.fullImage .selectionContainer::after {
   border-color: var(--semantic-color-stroke-main-focused);
 }
@@ -917,10 +929,6 @@
   transform: scale(1.1);
   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-highlight);
-  color: var(--semantic-color-on-surface-white);
-}
 :global(.noAnimation) :global(.green) .imageItem:global(.game).vertical.fullImage .image {
   transition: none;
 }
@@ -969,7 +977,7 @@
 :global(.orange) .imageItem:global(.game).selected .selectionContainer::after {
   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 {
+:global(.orange) .imageItem:global(.game).selected .selectionIcon {
   background-color: var(--semantic-color-surface-highlight);
   color: var(--semantic-color-on-surface-white);
 }
@@ -1027,6 +1035,11 @@
 :global(.spotlight-input-mouse) :global(.orange) .imageItem:global(.game):global(.spottable):focus .label {
   color: var(--semantic-color-on-surface-sub-focused);
 }
+:global(.spotlight-input-key) :global(.orange) .imageItem:global(.game):global(.spottable):focus.selected .selectionIcon,
+:global(.spotlight-input-mouse) :global(.orange) .imageItem:global(.game):global(.spottable):focus.selected .selectionIcon {
+  background-color: var(--semantic-color-surface-highlight);
+  color: var(--semantic-color-on-surface-white);
+}
 :global(.spotlight-input-key) :global(.orange) .imageItem:global(.game):global(.spottable):focus.vertical.fullImage .selectionContainer::after,
 :global(.spotlight-input-mouse) :global(.orange) .imageItem:global(.game):global(.spottable):focus.vertical.fullImage .selectionContainer::after {
   border-color: var(--semantic-color-stroke-main-focused);
@@ -1036,11 +1049,6 @@
   transform: scale(1.1);
   box-shadow: 0 0.75rem 0.75rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
 }
-: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-highlight);
-  color: var(--semantic-color-on-surface-white);
-}
 :global(.spotlight-input-touch) :global(.orange) .imageItem:global(.game):global(.spottable):active {
   color: var(--semantic-color-on-surface-main-focused);
 }
@@ -1066,6 +1074,10 @@
 :global(.spotlight-input-touch) :global(.orange) .imageItem:global(.game):global(.spottable):active .label {
   color: var(--semantic-color-on-surface-sub-focused);
 }
+:global(.spotlight-input-touch) :global(.orange) .imageItem:global(.game):global(.spottable):active.selected .selectionIcon {
+  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.vertical.fullImage .selectionContainer::after {
   border-color: var(--semantic-color-stroke-main-focused);
 }
@@ -1073,10 +1085,6 @@
   transform: scale(1.1);
   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-highlight);
-  color: var(--semantic-color-on-surface-white);
-}
 :global(.noAnimation) :global(.orange) .imageItem:global(.game).vertical.fullImage .image {
   transition: none;
 }

package/ImageItem/tests/ImageItem-specs.js

@@ -194,14 +194,15 @@ describe('ImageItem', function () {
     var actual = _react.screen.getAllByRole('img')[0].parentElement;
     expect(actual).not.toHaveClass(expected);
   });
-  test('should be `checked` when `showSelection` and `selected` props are true with horizontal layout', function () {
+  test('should apply `selected` class when `showSelection` and `selected` props are true with horizontal layout', function () {
     (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_ImageItem.ImageItemBase, {
       orientation: "horizontal",
       showSelection: true,
       selected: true
     }));
-    var actual = _react.screen.getAllByRole('checkbox')[0];
-    expect(actual).toBeChecked();
+    var expected = 'selected';
+    var actual = _react.screen.getAllByRole('img')[0].parentElement;
+    expect(actual).toHaveClass(expected);
   });
   test('should support `selectionComponent` prop with horizontal layout', function () {
     (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_ImageItem.ImageItemBase, {
@@ -209,8 +210,8 @@ describe('ImageItem', function () {
       selectionComponent: SelectionComponent,
       showSelection: true
     }));
-    var expected = 'slotBefore';
-    var actual = _react.screen.getAllByRole('img')[0].previousElementSibling;
+    var expected = 'selectionContainer';
+    var actual = _react.screen.getAllByRole('img')[0].children.item(0);
     expect(actual).toHaveClass(expected);
   });
 });

package/Input/Input.module.css

@@ -54,9 +54,6 @@
   z-index: -1;
   border-radius: var(--semantic-radius-button);
 }
-.inputPopup .inputArea {
-  text-align: center;
-}
 .inputPopup .numberCell {
   justify-content: center;
   align-items: center;
@@ -69,6 +66,9 @@
   display: block;
   margin: var(--primitive-spacing-60) auto 0 auto;
 }
+.inputPopup .inputArea {
+  text-align: center;
+}
 .inputPopup .inputArea .tooltip {
   margin-top: var(--primitive-spacing-24);
 }
@@ -109,7 +109,7 @@
   right: var(--primitive-spacing-132);
 }
 .inputPopup.fullscreen .inputBody {
-  padding: calc(var(--primitive-spacing-156) - var(--primitive-spacing-48)) NaNrem - var(--primitive-spacing-72)) 0 NaNrem - var(--primitive-spacing-72));
+  padding: calc(var(--primitive-spacing-156) - var(--primitive-spacing-48)) calc(324px - var(--primitive-spacing-72)) 0 calc(324px - var(--primitive-spacing-72));
 }
 :global(.enact-orientation-portrait) .inputPopup.fullscreen .inputBody {
   padding: calc(var(--primitive-spacing-96) - var(--primitive-spacing-48)) calc(var(--primitive-spacing-132) - var(--primitive-spacing-72)) 0 calc(var(--primitive-spacing-132) - var(--primitive-spacing-72));
@@ -177,16 +177,16 @@
   max-width: 67.5rem;
 }
 .inputPopup.fullscreen:not(.number, .passwordnumber) .inputArea {
-  height: calc(100% - 4.75rem - 18.25rem );
+  height: calc(100% -  4.75rem - 18.25rem );
 }
 .inputPopup.fullscreen.number .inputArea,
 .inputPopup.fullscreen.passwordnumber .inputArea {
-  height: calc(100% - 4.75rem - 5rem );
+  height: calc(100% -  4.75rem - 5rem );
   margin: var(--primitive-spacing-120) 0 0 0;
 }
 .inputPopup.fullscreen.number .inputArea.withButtons,
 .inputPopup.fullscreen.passwordnumber .inputArea.withButtons {
-  height: calc(100% - 4.75rem - 6.25rem );
+  height: calc(100% -  4.75rem - 6.25rem );
   margin: var(--primitive-spacing-60) 0 0 0;
 }
 .inputPopup.overlay {
@@ -200,6 +200,7 @@
   height: 2.5rem;
 }
 .inputPopup.overlay .title {
+  font-family: "Limestone Title", "Limestone";
   margin: 0 var(--primitive-spacing-144) 0 var(--primitive-spacing-144);
   font-size: var(--primitive-font-size-90);
 }

package/Input/InputField.module.css

@@ -4,7 +4,7 @@
   font-size: var(--primitive-font-size-60);
   font-style: normal;
   font-family: "Limestone";
-  line-height: 1.4em;
+  line-height: 1.34em;
   padding: 0;
   border: 0;
   cursor: pointer;
@@ -251,6 +251,9 @@
   font-size: var(--primitive-font-size-58);
   line-height: 1.45833rem;
 }
+.inputField.active .marqueeText {
+  display: none;
+}
 .inputField:global(.neutral) {
   caret-color: var(--semantic-color-on-surface-accent);
   color: var(--semantic-color-on-surface-input-field);
@@ -1008,6 +1011,3 @@
 :global(.spotlight-input-touch) :global(.orange) .inputField:global(.game)[disabled]:global(.spottable):active .marqueeText {
   color: color(from var(--semantic-color-on-surface-main-focused) srgb r g b / 0.4);
 }
-.inputField.active .marqueeText {
-  display: none;
-}

package/Input/index.d.ts

@@ -1,7 +1,7 @@
 // Type definitions for limestone/Input
 
 import { ChangeableProps as ui_Changeable_ChangeableProps } from "@enact/ui/Changeable";
-import { SkinnableProps as limestone_Skinnable_SkinnableProps } from "limestone/Skinnable";
+import { SkinnableProps as limestone_Skinnable_SkinnableProps } from "@enact/limestone/Skinnable";
 import { ToggleableProps as ui_Toggleable_ToggleableProps } from "@enact/ui/Toggleable";
 import * as React from "react";
 import { SpottableProps as spotlight_Spottable_SpottableProps } from "@enact/spotlight/Spottable";

package/Input/tests/Input-specs.js

@@ -352,7 +352,7 @@ describe('Input specs', function () {
           invalidMessage: "Invalid"
         })
       }));
-      var invalidTextField = _react.screen.getByText('Invalid').parentElement.parentElement;
+      var invalidTextField = _react.screen.getByText('Invalid').parentElement.parentElement.parentElement;
       var expected = 'tooltipLabel';
       expect(invalidTextField).toHaveClass(expected);
     });
@@ -377,7 +377,7 @@ describe('Input specs', function () {
           invalid: true
         })
       }));
-      var invalidTextField = _react.screen.getByText('Please enter a valid value.').parentElement.parentElement;
+      var invalidTextField = _react.screen.getByText('Please enter a valid value.').parentElement.parentElement.parentElement;
       var expected = 'tooltipLabel';
       expect(invalidTextField).toHaveClass(expected);
     });

package/Input/tests/InputField-specs.js

@@ -259,7 +259,7 @@ describe('InputField Specs', function () {
       invalid: true,
       invalidMessage: "invalid message"
     }));
-    var invalidText = _react.screen.getByText('invalid message').parentElement.parentElement;
+    var invalidText = _react.screen.getByText('invalid message').parentElement.parentElement.parentElement;
     var expected = 'tooltipLabel';
     expect(invalidText).toBeInTheDocument();
     expect(invalidText).toHaveClass(expected);

package/Item/Item.d.ts

@@ -3,8 +3,8 @@
 import { ItemDecoratorProps as ui_Item_ItemDecoratorProps } from "@enact/ui/Item";
 import { SlottableProps as ui_Slottable_SlottableProps } from "@enact/ui/Slottable";
 import { SpottableProps as spotlight_Spottable_SpottableProps } from "@enact/spotlight/Spottable";
-import { MarqueeControllerProps as limestone_Marquee_MarqueeControllerProps } from "limestone/Marquee";
-import { SkinnableProps as limestone_Skinnable_SkinnableProps } from "limestone/Skinnable";
+import { MarqueeControllerProps as limestone_Marquee_MarqueeControllerProps } from "@enact/limestone/Marquee";
+import { SkinnableProps as limestone_Skinnable_SkinnableProps } from "@enact/limestone/Skinnable";
 import { ItemBaseProps as ui_Item_ItemBaseProps } from "@enact/ui/Item";
 import * as React from "react";