@enact/limestone 1.10.0 → 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;
@@ -48,6 +76,30 @@
 :global(.enact-locale-vi) .imageItem .label {
   font-size: var(--primitive-font-size-36);
 }
+.imageItem:global(.largeText) .caption {
+  font-size: var(--primitive-font-size-72);
+  line-height: 2.08333rem;
+}
+.imageItem:global(.largeText) .label {
+  font-size: var(--primitive-font-size-58);
+  line-height: 1.45833rem;
+}
+.imageItem:global(.largeText).vertical .selectionContainer .selectionIcon {
+  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);
@@ -73,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);
@@ -122,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;
@@ -145,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;
@@ -179,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);
 }
@@ -237,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);
@@ -246,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);
 }
@@ -276,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);
 }
@@ -283,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;
 }
@@ -331,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);
 }
@@ -389,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);
@@ -398,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);
 }
@@ -428,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);
 }
@@ -435,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;
 }
@@ -483,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);
 }
@@ -541,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);
@@ -550,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);
 }
@@ -580,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);
 }
@@ -587,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;
 }
@@ -640,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);
 }
@@ -698,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);
@@ -707,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);
 }
@@ -737,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);
 }
@@ -744,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;
 }
@@ -796,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);
 }
@@ -854,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);
@@ -863,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);
 }
@@ -893,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);
 }
@@ -900,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;
 }
@@ -952,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);
 }
@@ -1010,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);
@@ -1019,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);
 }
@@ -1049,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);
 }
@@ -1056,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);
 }
@@ -80,6 +80,10 @@
 .inputPopup .inputArea .contentArea {
   /* Available for customization */
 }
+.inputPopup:global(.largeText) .tooltip .tooltipLabel {
+  font-size: var(--primitive-font-size-58);
+  line-height: 1.45833rem;
+}
 :global(.enact-locale-right-to-left) .inputPopup .keypad {
   direction: ltr;
 }
@@ -92,6 +96,9 @@
 .inputPopup .keypad .key .icon {
   font-size: var(--primitive-font-size-90);
 }
+.inputPopup .keypad .key .icon:global(.largeText) {
+  font-size: var(--primitive-font-size-108);
+}
 .inputPopup.fullscreen .back {
   top: var(--primitive-spacing-108);
   left: var(--primitive-spacing-132);
@@ -102,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));
@@ -152,9 +159,6 @@
 :global(.enact-orientation-portrait) .inputPopup.fullscreen .keypad {
   margin: var(--primitive-spacing-132) auto 0 auto;
 }
-:global(.enact-text-large) .inputPopup.fullscreen .keypad .key {
-  height: 4rem;
-}
 .inputPopup.fullscreen .buttonArea {
   margin: 0;
   display: flex;
@@ -173,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 {
@@ -196,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);
 }
@@ -241,12 +246,6 @@
   justify-content: flex-end;
   column-gap: var(--primitive-spacing-60);
 }
-:global(.enact-text-large) .inputPopup.overlay .keypad {
-  width: 14.5rem;
-}
-:global(.enact-text-large) .inputPopup.overlay .keypad .key {
-  height: 4rem;
-}
 .inputPopup.overlay .buttonArea {
   align-items: center;
   display: flex;
@@ -257,6 +256,24 @@
 .inputPopup.overlay .tooltip .tooltipLabel {
   max-width: 15.375rem;
 }
+.inputPopup:global(.largeText).fullscreen .numberCell.password {
+  font-size: var(--primitive-font-size-56);
+}
+.inputPopup:global(.largeText).fullscreen .joined {
+  font-size: var(--primitive-font-size-94);
+}
+.inputPopup:global(.largeText).fullscreen .joined.password {
+  font-size: var(--primitive-font-size-56);
+}
+.inputPopup:global(.largeText).overlay .numberCell.password {
+  font-size: var(--primitive-font-size-48);
+}
+.inputPopup:global(.largeText).overlay .joined {
+  font-size: var(--primitive-font-size-94);
+}
+.inputPopup:global(.largeText).overlay .joined.password {
+  font-size: var(--primitive-font-size-48);
+}
 .inputPopup:global(.neutral) {
   background-color: var(--semantic-color-background-full-default);
 }

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;
@@ -232,6 +232,27 @@
 .inputField .tooltip .tooltipLabel {
   font-size: var(--primitive-font-size-48);
   font-weight: var(--primitive-font-weight-semibold);
+  line-height: 1.25rem;
+}
+.inputField:global(.largeText) .input,
+.inputField:global(.largeText) .inputHighlight,
+.inputField:global(.largeText) .marqueeText {
+  font-size: var(--primitive-font-size-94);
+}
+.inputField:global(.largeText).small .input,
+.inputField:global(.largeText).small .marqueeText {
+  font-size: var(--primitive-font-size-72);
+  line-height: 3.25rem;
+}
+.inputField:global(.largeText).small .inputHighlight {
+  line-height: 3.25rem;
+}
+.inputField:global(.largeText) .tooltip .tooltipLabel {
+  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);
@@ -990,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);
     });