@enact/limestone 1.10.0 → 1.10.2

package/Card/Card.module.css

@@ -34,8 +34,8 @@ Animations properties
   --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);
+  --lime-press-motion-easing-function: var(--lime-EO-motion-easing-function);
+  --lime-release-motion-easing-function: var(--lime-EIO-motion-easing-function);
   /* ---------------------------------------
 	Keyframes names
 	------------------------------------------ */
@@ -76,9 +76,6 @@ Keyframes
   }
 }
 /* ---------------------------------------
-Motion Variables
------------------------------------------- */
-/* ---------------------------------------
 Motion Mixins
 ------------------------------------------ */
 .card {
@@ -103,21 +100,26 @@ Motion Mixins
   border-style: solid;
 }
 .card .selectionContainer .selectionIcon {
-  width: 1.875rem;
-  height: 1.875rem;
+  --icon-size: 1rem;
+  width: 1.25rem;
+  height: 1.25rem;
   border-radius: 50%;
   margin: 0;
-  line-height: 1.875rem;
+  line-height: 1.25rem;
   z-index: 3;
 }
 .card:not(.isCheckIcon) .selectionContainer .selectionIcon {
-  --icon-size: 2.5rem;
-  width: 3rem;
-  height: 3rem;
-  line-height: 3rem;
+  --icon-size: 3rem;
+  width: 3.75rem;
+  height: 3.75rem;
+  line-height: 3.75rem;
 }
 .card .primaryBadge,
 .card .secondaryBadge {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  text-align: center;
   position: absolute;
   width: 2.25rem;
   height: 2.25rem;
@@ -144,6 +146,27 @@ Motion Mixins
   line-height: 1.25rem;
   font-weight: var(--primitive-font-weight-regular);
 }
+.card .labels {
+  height: fit-content;
+}
+.card .labels .labelContainer {
+  align-items: center;
+  gap: var(--primitive-spacing-12);
+}
+.card .labels .labelContainer:has(.labelIcon) {
+  margin-bottom: var(--primitive-spacing-6);
+  will-change: transform;
+}
+.card .labels .labelContainer:has(.labelIcon) .label {
+  margin-top: calc(72px - 60px);
+}
+.card .labels .labelContainer:has(.labelIcon) .labelIcon {
+  margin: 0;
+}
+.card .labels .labelContainer:has(.labelIcon):has(+ .captionImageIconsContainer),
+.card .labels .labelContainer:has(.labelIcon):is(:last-child) {
+  margin-bottom: 0;
+}
 .card.selected .image::after {
   content: '';
   position: absolute;
@@ -188,6 +211,15 @@ Motion Mixins
   height: auto;
   transition: transform var(--lime-focus-out-motion-duration) var(--lime-focus-out-motion-easing-function);
 }
+.card.vertical .captionImageIconsContainer {
+  margin-top: var(--primitive-spacing-24);
+  gap: var(--primitive-spacing-24);
+}
+.card.vertical .captionImageIconsContainer .captionImageIcon {
+  height: var(--caption-image-height, 2rem);
+  width: var(--caption-image-width, 2rem);
+  margin: 0;
+}
 .card.vertical .captions {
   padding: var(--primitive-spacing-36) 0;
   display: flex;
@@ -199,6 +231,8 @@ Motion Mixins
   height: var(--card-image-height);
 }
 .card.vertical .imageIcon {
+  font-size: 3.75rem;
+  line-height: 3.75rem;
   height: 3.75rem;
   width: 3.75rem;
   margin: 0;
@@ -206,6 +240,25 @@ Motion Mixins
 .card.vertical.captionOverlay .captions {
   padding: var(--primitive-spacing-36) var(--primitive-spacing-48);
 }
+.card.vertical.captionOverlay.centeredTitle .captions {
+  gap: var(--primitive-spacing-24);
+  justify-content: center;
+}
+.card.vertical.captionOverlay.centeredTitle .captionCell {
+  max-height: fit-content;
+}
+.card.vertical.captionOverlay.centeredTitle .children {
+  height: 100%;
+}
+.card.vertical.captionOverlay.centeredTitle .labels {
+  display: none;
+}
+.card.vertical.captionOverlay.centeredTitle .imageIcon {
+  font-size: 3rem;
+  line-height: 3rem;
+  width: 3rem;
+  height: 3rem;
+}
 .card.vertical.captionOverlay.splitCaption .caption {
   width: calc(var(--card-image-width) - (var(--primitive-spacing-48) + var(--primitive-spacing-48)));
 }
@@ -226,11 +279,18 @@ Motion Mixins
 .card.vertical:not(.hasContainer) .image {
   z-index: 1;
 }
+.card.vertical:not(.hasContainer).captionOverflow .captions,
+.card.vertical:not(.hasContainer).captionOverflowOnFocus .captions {
+  width: 23.75rem;
+}
+.card.vertical:not(.hasContainer).captionOverflowOnFocus .captions {
+  display: none;
+}
 .card.vertical.selected:not(.hasContainer) .selectionContainer {
   z-index: 3;
 }
 .card.horizontal {
-  width: 27.5rem;
+  width: 24.83333rem;
   height: 7rem;
   transition: transform var(--lime-focus-out-motion-duration) var(--lime-focus-out-motion-easing-function);
 }
@@ -240,6 +300,36 @@ Motion Mixins
 .card.horizontal .image {
   width: var(--card-image-width);
 }
+.card.vertical .duration,
+.card.horizontal .duration {
+  font-size: var(--primitive-font-size-48);
+  line-height: 1.25rem;
+  font-weight: var(--primitive-font-weight-semibold);
+  padding: var(--primitive-spacing-6) var(--primitive-spacing-12);
+  border-radius: var(--primitive-radius-12);
+  width: fit-content;
+  margin-left: auto;
+  margin-right: 0;
+}
+:global(.enact-locale-right-to-left) .card.vertical .duration,
+:global(.enact-locale-right-to-left) .card.horizontal .duration {
+  margin-left: 0;
+  margin-right: auto;
+}
+.card.vertical.durationOverlay .duration,
+.card.horizontal.durationOverlay .duration {
+  position: absolute;
+  bottom: var(--primitive-spacing-24);
+  right: var(--primitive-spacing-24);
+}
+.card.vertical.progressBarOverlay .progress,
+.card.horizontal.progressBarOverlay .progress {
+  position: absolute;
+  bottom: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  width: calc(100% - var(--primitive-spacing-48) * 2);
+}
 :global(.spotlight-input-key) .card:global(.spottable):focus.hasContainer,
 :global(.spotlight-input-mouse) .card:global(.spottable):focus.hasContainer {
   transform: scale(1.1);
@@ -257,6 +347,10 @@ Motion Mixins
 :global(.spotlight-input-mouse) .card:global(.spottable):focus.vertical:not(.hasContainer) .selectionContainer {
   z-index: 5;
 }
+:global(.spotlight-input-key) .card:global(.spottable):focus.vertical:not(.hasContainer).captionOverflowOnFocus .captions,
+:global(.spotlight-input-mouse) .card:global(.spottable):focus.vertical:not(.hasContainer).captionOverflowOnFocus .captions {
+  display: flex;
+}
 :global(.spotlight-input-touch) .card:global(.spottable):active.hasContainer {
   transform: scale(1.1);
   transition: transform var(--lime-focus-in-motion-duration) var(--lime-focus-in-motion-easing-function);
@@ -270,6 +364,9 @@ Motion Mixins
 :global(.spotlight-input-touch) .card:global(.spottable):active.vertical:not(.hasContainer) .selectionContainer {
   z-index: 5;
 }
+:global(.spotlight-input-touch) .card:global(.spottable):active.vertical:not(.hasContainer).captionOverflowOnFocus .captions {
+  display: flex;
+}
 :global(.spotlight-input-key) .card:not([disabled]):global(.spottable):focus.hasContainer.pressed,
 :global(.spotlight-input-mouse) .card:not([disabled]):global(.spottable):focus.hasContainer.pressed,
 :global(.spotlight-input-key) .card:not([disabled]):global(.spottable):focus.hasContainer:active,
@@ -342,6 +439,33 @@ Motion Mixins
   transform: scale(1.1);
   transition: transform var(--lime-release-motion-duration) var(--lime-release-motion-easing-function);
 }
+.card:global(.largeText) .caption {
+  font-size: var(--primitive-font-size-72);
+  line-height: 2.08333rem;
+}
+.card:global(.largeText) .duration {
+  font-size: var(--primitive-font-size-58);
+  line-height: 1.45833rem;
+}
+.card:global(.largeText) .label {
+  font-size: var(--primitive-font-size-58);
+  line-height: 1.45833rem;
+}
+.card:global(.largeText).captionOverlay.splitCaption .label {
+  font-size: var(--primitive-font-size-72);
+}
+.card:global(.largeText) .selectionContainer .selectionIcon {
+  --icon-size: 3.6rem;
+}
+.card:global(.largeText):is(.isCheckIcon) .selectionContainer .selectionIcon {
+  --icon-size: 1.20833rem;
+  width: 1.5rem;
+  height: 1.5rem;
+  line-height: 1.45833rem;
+}
+.card:global(.neutral) .duration {
+  background-color: color(from var(--semantic-color-surface-overlay-default) srgb r g b / 0.5);
+}
 .card:global(.neutral) .selectionContainer {
   border-color: transparent;
 }
@@ -381,6 +505,9 @@ Motion Mixins
 .card:global(.neutral).vertical.captionOverlay .captions {
   background: linear-gradient(180deg, transparent 0%, color(from var(--semantic-color-on-surface-black) srgb r g b / 0.7) 100%);
 }
+.card:global(.neutral).vertical.captionOverlay.centeredTitle .captions {
+  background: transparent;
+}
 .card:global(.neutral).vertical.captionOverlay.roundedImage .captions {
   border-bottom-left-radius: var(--semantic-radius-container);
   border-bottom-right-radius: var(--semantic-radius-container);
@@ -486,7 +613,9 @@ Motion Mixins
   color: var(--semantic-color-on-surface-main-focused);
 }
 :global(.spotlight-input-key) .card:global(.neutral):global(.spottable):focus.hasContainer .label,
-:global(.spotlight-input-mouse) .card:global(.neutral):global(.spottable):focus.hasContainer .label {
+:global(.spotlight-input-mouse) .card:global(.neutral):global(.spottable):focus.hasContainer .label,
+:global(.spotlight-input-key) .card:global(.neutral):global(.spottable):focus.hasContainer .labelIcon,
+:global(.spotlight-input-mouse) .card:global(.neutral):global(.spottable):focus.hasContainer .labelIcon {
   color: var(--semantic-color-on-surface-sub-focused);
 }
 :global(.spotlight-input-key) .card:global(.neutral):global(.spottable):focus.vertical:not(.captionOverlay):not(.hasContainer):not(:global(.focusRing)) .selectionContainer,
@@ -529,12 +658,16 @@ Motion Mixins
 :global(.spotlight-input-touch) .card:global(.neutral):global(.spottable):active.hasContainer .caption {
   color: var(--semantic-color-on-surface-main-focused);
 }
-:global(.spotlight-input-touch) .card:global(.neutral):global(.spottable):active.hasContainer .label {
+:global(.spotlight-input-touch) .card:global(.neutral):global(.spottable):active.hasContainer .label,
+:global(.spotlight-input-touch) .card:global(.neutral):global(.spottable):active.hasContainer .labelIcon {
   color: var(--semantic-color-on-surface-sub-focused);
 }
 :global(.spotlight-input-touch) .card:global(.neutral):global(.spottable):active.vertical:not(.captionOverlay):not(.hasContainer):not(:global(.focusRing)) .selectionContainer {
   border-color: var(--semantic-color-stroke-main-focused);
 }
+:global(.enact-a11y-high-contrast) .card:global(.neutral):global(.highContrast) .duration {
+  background-color: color(from var(--semantic-color-surface-overlay-default) srgb r g b / 0.5);
+}
 :global(.enact-a11y-high-contrast) .card:global(.neutral):global(.highContrast) .selectionContainer {
   border-color: transparent;
 }
@@ -574,6 +707,9 @@ Motion Mixins
 :global(.enact-a11y-high-contrast) .card:global(.neutral):global(.highContrast).vertical.captionOverlay .captions {
   background: linear-gradient(180deg, transparent 0%, color(from var(--semantic-color-on-surface-black) srgb r g b / 0.7) 100%);
 }
+:global(.enact-a11y-high-contrast) .card:global(.neutral):global(.highContrast).vertical.captionOverlay.centeredTitle .captions {
+  background: transparent;
+}
 :global(.enact-a11y-high-contrast) .card:global(.neutral):global(.highContrast).vertical.captionOverlay.roundedImage .captions {
   border-bottom-left-radius: var(--semantic-radius-container);
   border-bottom-right-radius: var(--semantic-radius-container);
@@ -679,7 +815,9 @@ Motion Mixins
   color: var(--semantic-color-on-surface-main-focused);
 }
 :global(.spotlight-input-key) :global(.enact-a11y-high-contrast) .card:global(.neutral):global(.highContrast):global(.spottable):focus.hasContainer .label,
-:global(.spotlight-input-mouse) :global(.enact-a11y-high-contrast) .card:global(.neutral):global(.highContrast):global(.spottable):focus.hasContainer .label {
+:global(.spotlight-input-mouse) :global(.enact-a11y-high-contrast) .card:global(.neutral):global(.highContrast):global(.spottable):focus.hasContainer .label,
+:global(.spotlight-input-key) :global(.enact-a11y-high-contrast) .card:global(.neutral):global(.highContrast):global(.spottable):focus.hasContainer .labelIcon,
+:global(.spotlight-input-mouse) :global(.enact-a11y-high-contrast) .card:global(.neutral):global(.highContrast):global(.spottable):focus.hasContainer .labelIcon {
   color: var(--semantic-color-on-surface-sub-focused);
 }
 :global(.spotlight-input-key) :global(.enact-a11y-high-contrast) .card:global(.neutral):global(.highContrast):global(.spottable):focus.vertical:not(.captionOverlay):not(.hasContainer):not(:global(.focusRing)) .selectionContainer,
@@ -722,12 +860,16 @@ Motion Mixins
 :global(.spotlight-input-touch) :global(.enact-a11y-high-contrast) .card:global(.neutral):global(.highContrast):global(.spottable):active.hasContainer .caption {
   color: var(--semantic-color-on-surface-main-focused);
 }
-:global(.spotlight-input-touch) :global(.enact-a11y-high-contrast) .card:global(.neutral):global(.highContrast):global(.spottable):active.hasContainer .label {
+:global(.spotlight-input-touch) :global(.enact-a11y-high-contrast) .card:global(.neutral):global(.highContrast):global(.spottable):active.hasContainer .label,
+:global(.spotlight-input-touch) :global(.enact-a11y-high-contrast) .card:global(.neutral):global(.highContrast):global(.spottable):active.hasContainer .labelIcon {
   color: var(--semantic-color-on-surface-sub-focused);
 }
 :global(.spotlight-input-touch) :global(.enact-a11y-high-contrast) .card:global(.neutral):global(.highContrast):global(.spottable):active.vertical:not(.captionOverlay):not(.hasContainer):not(:global(.focusRing)) .selectionContainer {
   border-color: var(--semantic-color-stroke-main-focused);
 }
+.card:global(.light) .duration {
+  background-color: color(from var(--semantic-color-surface-overlay-default) srgb r g b / 0.5);
+}
 .card:global(.light) .selectionContainer {
   border-color: transparent;
 }
@@ -767,6 +909,9 @@ Motion Mixins
 .card:global(.light).vertical.captionOverlay .captions {
   background: linear-gradient(180deg, transparent 0%, color(from var(--semantic-color-on-surface-black) srgb r g b / 0.7) 100%);
 }
+.card:global(.light).vertical.captionOverlay.centeredTitle .captions {
+  background: transparent;
+}
 .card:global(.light).vertical.captionOverlay.roundedImage .captions {
   border-bottom-left-radius: var(--semantic-radius-container);
   border-bottom-right-radius: var(--semantic-radius-container);
@@ -872,7 +1017,9 @@ Motion Mixins
   color: var(--semantic-color-on-surface-main-focused);
 }
 :global(.spotlight-input-key) .card:global(.light):global(.spottable):focus.hasContainer .label,
-:global(.spotlight-input-mouse) .card:global(.light):global(.spottable):focus.hasContainer .label {
+:global(.spotlight-input-mouse) .card:global(.light):global(.spottable):focus.hasContainer .label,
+:global(.spotlight-input-key) .card:global(.light):global(.spottable):focus.hasContainer .labelIcon,
+:global(.spotlight-input-mouse) .card:global(.light):global(.spottable):focus.hasContainer .labelIcon {
   color: var(--semantic-color-on-surface-sub-focused);
 }
 :global(.spotlight-input-key) .card:global(.light):global(.spottable):focus.vertical:not(.captionOverlay):not(.hasContainer):not(:global(.focusRing)) .selectionContainer,
@@ -915,7 +1062,8 @@ Motion Mixins
 :global(.spotlight-input-touch) .card:global(.light):global(.spottable):active.hasContainer .caption {
   color: var(--semantic-color-on-surface-main-focused);
 }
-:global(.spotlight-input-touch) .card:global(.light):global(.spottable):active.hasContainer .label {
+:global(.spotlight-input-touch) .card:global(.light):global(.spottable):active.hasContainer .label,
+:global(.spotlight-input-touch) .card:global(.light):global(.spottable):active.hasContainer .labelIcon {
   color: var(--semantic-color-on-surface-sub-focused);
 }
 :global(.spotlight-input-touch) .card:global(.light):global(.spottable):active.vertical:not(.captionOverlay):not(.hasContainer):not(:global(.focusRing)) .selectionContainer {
@@ -926,6 +1074,9 @@ Motion Mixins
   --semantic-color-surface-default-focused: #6d2fa1;
   --semantic-color-on-surface-main-focused: #e6e6e6;
 }
+.card:global(.game) .duration {
+  background-color: color(from var(--semantic-color-surface-overlay-default) srgb r g b / 0.5);
+}
 .card:global(.game) .selectionContainer {
   border-color: transparent;
 }
@@ -965,6 +1116,9 @@ Motion Mixins
 .card:global(.game).vertical.captionOverlay .captions {
   background: linear-gradient(180deg, transparent 0%, color(from var(--semantic-color-on-surface-black) srgb r g b / 0.7) 100%);
 }
+.card:global(.game).vertical.captionOverlay.centeredTitle .captions {
+  background: transparent;
+}
 .card:global(.game).vertical.captionOverlay.roundedImage .captions {
   border-bottom-left-radius: var(--semantic-radius-container);
   border-bottom-right-radius: var(--semantic-radius-container);
@@ -1070,7 +1224,9 @@ Motion Mixins
   color: var(--semantic-color-on-surface-main-focused);
 }
 :global(.spotlight-input-key) .card:global(.game):global(.spottable):focus.hasContainer .label,
-:global(.spotlight-input-mouse) .card:global(.game):global(.spottable):focus.hasContainer .label {
+:global(.spotlight-input-mouse) .card:global(.game):global(.spottable):focus.hasContainer .label,
+:global(.spotlight-input-key) .card:global(.game):global(.spottable):focus.hasContainer .labelIcon,
+:global(.spotlight-input-mouse) .card:global(.game):global(.spottable):focus.hasContainer .labelIcon {
   color: var(--semantic-color-on-surface-sub-focused);
 }
 :global(.spotlight-input-key) .card:global(.game):global(.spottable):focus.vertical:not(.captionOverlay):not(.hasContainer):not(:global(.focusRing)) .selectionContainer,
@@ -1113,7 +1269,8 @@ Motion Mixins
 :global(.spotlight-input-touch) .card:global(.game):global(.spottable):active.hasContainer .caption {
   color: var(--semantic-color-on-surface-main-focused);
 }
-:global(.spotlight-input-touch) .card:global(.game):global(.spottable):active.hasContainer .label {
+:global(.spotlight-input-touch) .card:global(.game):global(.spottable):active.hasContainer .label,
+:global(.spotlight-input-touch) .card:global(.game):global(.spottable):active.hasContainer .labelIcon {
   color: var(--semantic-color-on-surface-sub-focused);
 }
 :global(.spotlight-input-touch) .card:global(.game):global(.spottable):active.vertical:not(.captionOverlay):not(.hasContainer):not(:global(.focusRing)) .selectionContainer {
@@ -1123,6 +1280,9 @@ Motion Mixins
   --semantic-color-surface-default: #1F2C24;
   --semantic-color-surface-default-focused: #3ea07d;
 }
+:global(.green) .card:global(.game) .duration {
+  background-color: color(from var(--semantic-color-surface-overlay-default) srgb r g b / 0.5);
+}
 :global(.green) .card:global(.game) .selectionContainer {
   border-color: transparent;
 }
@@ -1162,6 +1322,9 @@ Motion Mixins
 :global(.green) .card:global(.game).vertical.captionOverlay .captions {
   background: linear-gradient(180deg, transparent 0%, color(from var(--semantic-color-on-surface-black) srgb r g b / 0.7) 100%);
 }
+:global(.green) .card:global(.game).vertical.captionOverlay.centeredTitle .captions {
+  background: transparent;
+}
 :global(.green) .card:global(.game).vertical.captionOverlay.roundedImage .captions {
   border-bottom-left-radius: var(--semantic-radius-container);
   border-bottom-right-radius: var(--semantic-radius-container);
@@ -1267,7 +1430,9 @@ Motion Mixins
   color: var(--semantic-color-on-surface-main-focused);
 }
 :global(.spotlight-input-key) :global(.green) .card:global(.game):global(.spottable):focus.hasContainer .label,
-:global(.spotlight-input-mouse) :global(.green) .card:global(.game):global(.spottable):focus.hasContainer .label {
+:global(.spotlight-input-mouse) :global(.green) .card:global(.game):global(.spottable):focus.hasContainer .label,
+:global(.spotlight-input-key) :global(.green) .card:global(.game):global(.spottable):focus.hasContainer .labelIcon,
+:global(.spotlight-input-mouse) :global(.green) .card:global(.game):global(.spottable):focus.hasContainer .labelIcon {
   color: var(--semantic-color-on-surface-sub-focused);
 }
 :global(.spotlight-input-key) :global(.green) .card:global(.game):global(.spottable):focus.vertical:not(.captionOverlay):not(.hasContainer):not(:global(.focusRing)) .selectionContainer,
@@ -1310,7 +1475,8 @@ Motion Mixins
 :global(.spotlight-input-touch) :global(.green) .card:global(.game):global(.spottable):active.hasContainer .caption {
   color: var(--semantic-color-on-surface-main-focused);
 }
-:global(.spotlight-input-touch) :global(.green) .card:global(.game):global(.spottable):active.hasContainer .label {
+:global(.spotlight-input-touch) :global(.green) .card:global(.game):global(.spottable):active.hasContainer .label,
+:global(.spotlight-input-touch) :global(.green) .card:global(.game):global(.spottable):active.hasContainer .labelIcon {
   color: var(--semantic-color-on-surface-sub-focused);
 }
 :global(.spotlight-input-touch) :global(.green) .card:global(.game):global(.spottable):active.vertical:not(.captionOverlay):not(.hasContainer):not(:global(.focusRing)) .selectionContainer {
@@ -1320,6 +1486,9 @@ Motion Mixins
   --semantic-color-surface-default: #422923;
   --semantic-color-surface-default-focused: #b85f23;
 }
+:global(.orange) .card:global(.game) .duration {
+  background-color: color(from var(--semantic-color-surface-overlay-default) srgb r g b / 0.5);
+}
 :global(.orange) .card:global(.game) .selectionContainer {
   border-color: transparent;
 }
@@ -1359,6 +1528,9 @@ Motion Mixins
 :global(.orange) .card:global(.game).vertical.captionOverlay .captions {
   background: linear-gradient(180deg, transparent 0%, color(from var(--semantic-color-on-surface-black) srgb r g b / 0.7) 100%);
 }
+:global(.orange) .card:global(.game).vertical.captionOverlay.centeredTitle .captions {
+  background: transparent;
+}
 :global(.orange) .card:global(.game).vertical.captionOverlay.roundedImage .captions {
   border-bottom-left-radius: var(--semantic-radius-container);
   border-bottom-right-radius: var(--semantic-radius-container);
@@ -1464,7 +1636,9 @@ Motion Mixins
   color: var(--semantic-color-on-surface-main-focused);
 }
 :global(.spotlight-input-key) :global(.orange) .card:global(.game):global(.spottable):focus.hasContainer .label,
-:global(.spotlight-input-mouse) :global(.orange) .card:global(.game):global(.spottable):focus.hasContainer .label {
+:global(.spotlight-input-mouse) :global(.orange) .card:global(.game):global(.spottable):focus.hasContainer .label,
+:global(.spotlight-input-key) :global(.orange) .card:global(.game):global(.spottable):focus.hasContainer .labelIcon,
+:global(.spotlight-input-mouse) :global(.orange) .card:global(.game):global(.spottable):focus.hasContainer .labelIcon {
   color: var(--semantic-color-on-surface-sub-focused);
 }
 :global(.spotlight-input-key) :global(.orange) .card:global(.game):global(.spottable):focus.vertical:not(.captionOverlay):not(.hasContainer):not(:global(.focusRing)) .selectionContainer,
@@ -1507,7 +1681,8 @@ Motion Mixins
 :global(.spotlight-input-touch) :global(.orange) .card:global(.game):global(.spottable):active.hasContainer .caption {
   color: var(--semantic-color-on-surface-main-focused);
 }
-:global(.spotlight-input-touch) :global(.orange) .card:global(.game):global(.spottable):active.hasContainer .label {
+:global(.spotlight-input-touch) :global(.orange) .card:global(.game):global(.spottable):active.hasContainer .label,
+:global(.spotlight-input-touch) :global(.orange) .card:global(.game):global(.spottable):active.hasContainer .labelIcon {
   color: var(--semantic-color-on-surface-sub-focused);
 }
 :global(.spotlight-input-touch) :global(.orange) .card:global(.game):global(.spottable):active.vertical:not(.captionOverlay):not(.hasContainer):not(:global(.focusRing)) .selectionContainer {

package/Card/tests/Card-specs.js

@@ -126,4 +126,104 @@ describe('Card', function () {
     _react.fireEvent.mouseUp(card);
     expect(card).not.toHaveClass('pressed');
   });
+  test('should format a negative duration as "00:00" in the image overlay', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Card.CardBase, {
+      src: src,
+      showDuration: true,
+      durationOverlay: true,
+      duration: -1
+    }));
+    expect(_react.screen.getByText('00:00')).toBeInTheDocument();
+  });
+  test('should format a duration of one hour or more as MM:SS in the captions', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Card.CardBase, {
+      src: src,
+      showDuration: true,
+      duration: 200
+    }));
+    expect(_react.screen.getByText('03:20')).toBeInTheDocument();
+  });
+  test('should format a duration of one hour or more as HH:MM:SS in the captions', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Card.CardBase, {
+      src: src,
+      showDuration: true,
+      duration: 3661
+    }));
+    expect(_react.screen.getByText('01:01:01')).toBeInTheDocument();
+  });
+  test('should render an array of `captionImageIconsSrc` as Images in the captions', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Card.CardBase, {
+      src: src,
+      captionImageIconsSrc: []
+    }));
+    expect(_react.screen.queryAllByRole('img')).toHaveLength(2);
+  });
+  test('should render a React element passed as `imageIconSrc`', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Card.CardBase, {
+      src: src,
+      imageIconSrc: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        "data-testid": "custom-image-icon"
+      })
+    }));
+    expect(_react.screen.getByTestId('custom-image-icon')).toBeInTheDocument();
+  });
+  test('should render `label` without icons when `labelIcons` is not provided', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Card.CardBase, {
+      src: src,
+      label: "Label text"
+    }));
+    expect(_react.screen.getByText('Label text')).toBeInTheDocument();
+  });
+  test('should render `labelIcons` alongside the `label`', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Card.CardBase, {
+      src: src,
+      label: "Label text",
+      labelIcons: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        "data-testid": "label-icon-1"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        "data-testid": "label-icon-2"
+      })],
+      secondaryLabel: "Secondary label",
+      secondaryLabelIcons: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        "data-testid": "secondary-label-icon"
+      })]
+    }));
+    expect(_react.screen.getByTestId('label-icon-1')).toBeInTheDocument();
+    expect(_react.screen.getByTestId('label-icon-2')).toBeInTheDocument();
+    expect(_react.screen.getByTestId('secondary-label-icon')).toBeInTheDocument();
+  });
+  test('should render `labelIcons` alongside the `label` in `withoutMarquee` mode', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Card.CardBase, {
+      src: src,
+      withoutMarquee: true,
+      label: "Label",
+      labelIcons: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        "data-testid": "label-icon"
+      }, "icon1")]
+    }));
+    expect(_react.screen.getByTestId('label-icon')).toBeInTheDocument();
+  });
+  test('should render `primaryBadge` string in the image overlay', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Card.CardBase, {
+      src: src,
+      primaryBadge: "Primary Badge"
+    }));
+    expect(_react.screen.getByText('Primary Badge')).toBeInTheDocument();
+  });
+  test('should render `secondaryBadge` string in the image overlay', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Card.CardBase, {
+      src: src,
+      secondaryBadge: "Secondary Badge"
+    }));
+    expect(_react.screen.getByText('Secondary Badge')).toBeInTheDocument();
+  });
+  test('should render `ProgressBar` in the image overlay when `progressBarOverlay` is true', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Card.CardBase, {
+      src: src,
+      showProgressBar: true,
+      progressBarOverlay: true,
+      progress: 0.5
+    }));
+    expect(_react.screen.getByRole('progressbar')).toBeInTheDocument();
+  });
 });

package/Checkbox/Checkbox.d.ts

@@ -1,9 +1,9 @@
 // Type definitions for limestone/Checkbox
 
 import { ToggleableProps as ui_Toggleable_ToggleableProps } from "@enact/ui/Toggleable";
-import { SkinnableProps as limestone_Skinnable_SkinnableProps } from "limestone/Skinnable";
+import { SkinnableProps as limestone_Skinnable_SkinnableProps } from "@enact/limestone/Skinnable";
 import { SpottableProps as spotlight_Spottable_SpottableProps } from "@enact/spotlight/Spottable";
-import { IconProps as limestone_Icon_IconProps } from "limestone/Icon";
+import { IconProps as limestone_Icon_IconProps } from "@enact/limestone/Icon";
 import * as React from "react";
 
 type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;

package/Checkbox/Checkbox.module.css

@@ -34,8 +34,8 @@ Animations properties
   --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);
+  --lime-press-motion-easing-function: var(--lime-EO-motion-easing-function);
+  --lime-release-motion-easing-function: var(--lime-EIO-motion-easing-function);
   /* ---------------------------------------
 	Keyframes names
 	------------------------------------------ */
@@ -76,9 +76,6 @@ Keyframes
   }
 }
 /* ---------------------------------------
-Motion Variables
------------------------------------------- */
-/* ---------------------------------------
 Motion Mixins
 ------------------------------------------ */
 .checkbox {

package/CheckboxItem/CheckboxItem.d.ts

@@ -2,7 +2,7 @@
 
 import { ToggleableProps as ui_Toggleable_ToggleableProps } from "@enact/ui/Toggleable";
 import * as React from "react";
-import { ItemProps as limestone_Item_ItemProps } from "limestone/Item";
+import { ItemProps as limestone_Item_ItemProps } from "@enact/limestone/Item";
 
 type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;
 type Merge<M, N> = Omit<M, Extract<keyof M, keyof N>> & N;
@@ -19,6 +19,13 @@ corresponding internal elements and states of this component.
  * *  `checkboxItem`  - The root class name
  */
   css?: object;
+  /**
+ * Enables the "formCheckbox" state.
+ * 
+ * In "formCheckbox" mode,  the spotlight is located on the Checkbox component and the Item does not receive
+visual feedback on focus
+ */
+  formCheckbox?: boolean;
   /**
    * The icon content.
    *