@enact/limestone 1.3.0 → 1.10.0

package/Card/Card.module.css

@@ -1,9 +1,93 @@
+/* ---------------------------------------
+Animations
+------------------------------------------ */
+:root {
+  /* Bounce
+	------------------------------------------ */
+  --lime-bounce-motion: var(--lime-bounce-animation-name) var(--lime-bounce-motion-duration) var(--lime-bounce-motion-easing-function);
+  --lime-check-motion: var(--lime-check-animation-name) var(--lime-check-motion-duration) forwards;
+}
+/* ---------------------------------------
+Animations properties
+------------------------------------------ */
+:root {
+  /* ---------------------------------------
+	Durations
+	------------------------------------------ */
+  --lime-motion-default-duration: 200ms;
+  --lime-motion-medium1-duration: 250ms;
+  --lime-motion-medium2-duration: 300ms;
+  --lime-motion-medium4-duration: 400ms;
+  --lime-motion-long2-duration: 500ms;
+  --lime-bounce-motion-duration: var(--lime-motion-medium2-duration);
+  --lime-check-motion-duration: var(--lime-motion-medium4-duration);
+  --lime-focus-in-motion-duration: var(--lime-motion-medium2-duration);
+  --lime-focus-out-motion-duration: var(--lime-motion-long2-duration);
+  --lime-press-motion-duration: var(--lime-motion-medium1-duration);
+  --lime-release-motion-duration: var(--lime-motion-medium2-duration);
+  /* ---------------------------------------
+	Easing functions
+	------------------------------------------ */
+  --lime-default-motion-easing-function: ease-out;
+  --lime-EIO-motion-easing-function: cubic-bezier(0.2, 0, 0.05, 1);
+  --lime-EO-motion-easing-function: cubic-bezier(0.1, 0.6, 0.15, 1);
+  --lime-bounce-motion-easing-function: var(--lime-default-motion-easing-function);
+  --lime-focus-in-motion-easing-function: var(--lime-EIO-motion-easing-function);
+  --lime-focus-out-motion-easing-function: var(--lime-EO-motion-easing-function);
+  --lime-press-motion-easing-function: var(--lime-EIO-motion-easing-function);
+  --lime-release-motion-easing-function: var(--lime-EO-motion-easing-function);
+  /* ---------------------------------------
+	Keyframes names
+	------------------------------------------ */
+  --lime-bounce-animation-name: bounce-motion;
+  --lime-check-animation-name: check-motion;
+  /* ---------------------------------------
+	Keyframes values
+	------------------------------------------ */
+  --lime-bounce-motion-offset-default-value: 0.125rem;
+}
+/* ---------------------------------------
+Keyframes
+------------------------------------------ */
+/* Bounce
+	------------------------------------------ */
+@keyframes bounce-motion {
+  0% {
+    transform: translateX(0);
+  }
+  50% {
+    transform: translateX(var(--lime-bounce-motion-offset-value, --lime-bounce-motion-offset-default-value));
+  }
+  80% {
+    transform: translateX(calc(var(--lime-bounce-motion-offset-value, --lime-bounce-motion-offset-default-value) / -2));
+  }
+  100% {
+    transform: translateX(0);
+  }
+}
+/* Check
+	------------------------------------------ */
+@keyframes check-motion {
+  0% {
+    transform: translateX(0);
+  }
+  100% {
+    transform: translateX(100%);
+  }
+}
+/* ---------------------------------------
+Motion Variables
+------------------------------------------ */
+/* ---------------------------------------
+Motion Mixins
+------------------------------------------ */
 .card {
   position: relative;
-  margin: 0 0.75rem 0.625rem 0.75rem;
+  margin: 0 var(--primitive-spacing-36) var(--primitive-spacing-30) var(--primitive-spacing-36);
 }
 .card .image {
   position: relative;
+  transition: transform var(--lime-focus-out-motion-duration) var(--lime-focus-out-motion-easing-function);
 }
 .card .selectionContainer {
   pointer-events: none;
@@ -26,28 +110,36 @@
   line-height: 1.875rem;
   z-index: 3;
 }
+.card:not(.isCheckIcon) .selectionContainer .selectionIcon {
+  --icon-size: 2.5rem;
+  width: 3rem;
+  height: 3rem;
+  line-height: 3rem;
+}
 .card .primaryBadge,
 .card .secondaryBadge {
   position: absolute;
   width: 2.25rem;
   height: 2.25rem;
   margin: 0;
-  top: 0.5rem;
+  top: var(--primitive-spacing-24);
 }
 .card .primaryBadge {
-  left: 0.5rem;
+  left: var(--primitive-spacing-24);
 }
 .card .secondaryBadge {
-  right: 0.5rem;
+  right: var(--primitive-spacing-24);
+}
+.card .caption,
+.card .label {
+  overflow-wrap: break-word;
 }
 .card .caption {
-  height: 1.75rem;
   font-size: var(--primitive-font-size-60);
   line-height: 1.75rem;
   font-weight: var(--primitive-font-weight-semibold);
 }
 .card .label {
-  height: 1.25rem;
   font-size: var(--primitive-font-size-48);
   line-height: 1.25rem;
   font-weight: var(--primitive-font-weight-regular);
@@ -62,44 +154,45 @@
   z-index: 1;
 }
 .card.roundedImage {
-  border-radius: 0.75rem;
+  border-radius: var(--semantic-radius-container);
 }
 .card.roundedImage.selected::before {
-  border-radius: 0.75rem;
+  border-radius: var(--semantic-radius-container);
 }
 .card.roundedImage.selected .image::after {
-  border-radius: 0.75rem;
+  border-radius: var(--semantic-radius-container);
 }
 .card.roundedImage.selected.vertical.hasContainer .image::after {
   border-bottom-left-radius: unset;
   border-bottom-right-radius: unset;
 }
 .card.roundedImage.selected.horizontal .image::after {
-  border-radius: 0.75rem;
+  border-radius: var(--semantic-radius-container);
   border-top-right-radius: unset;
   border-bottom-right-radius: unset;
 }
 .card.roundedImage.vertical .selectionContainer,
 .card.roundedImage.vertical .image {
-  border-radius: 0.75rem;
+  border-radius: var(--semantic-radius-container);
 }
 .card.roundedImage.vertical.hasContainer .image {
   border-bottom-left-radius: unset;
   border-bottom-right-radius: unset;
 }
 .card.roundedImage.horizontal .image {
-  border-top-left-radius: 0.75rem;
-  border-bottom-left-radius: 0.75rem;
+  border-top-left-radius: var(--semantic-radius-container);
+  border-bottom-left-radius: var(--semantic-radius-container);
 }
 .card.vertical {
   width: var(--card-image-width);
   height: auto;
+  transition: transform var(--lime-focus-out-motion-duration) var(--lime-focus-out-motion-easing-function);
 }
 .card.vertical .captions {
-  padding: 0.75rem 0;
+  padding: var(--primitive-spacing-36) 0;
   display: flex;
   align-items: center;
-  gap: 1rem;
+  gap: var(--primitive-spacing-48);
   align-self: stretch;
 }
 .card.vertical .image {
@@ -111,13 +204,24 @@
   margin: 0;
 }
 .card.vertical.captionOverlay .captions {
-  padding: 1rem;
+  padding: var(--primitive-spacing-36) var(--primitive-spacing-48);
+}
+.card.vertical.captionOverlay.splitCaption .caption {
+  width: calc(var(--card-image-width) - (var(--primitive-spacing-48) + var(--primitive-spacing-48)));
+}
+.card.vertical.captionOverlay.splitCaption .label {
+  font-size: var(--primitive-font-size-60);
+  font-weight: var(--primitive-font-weight-semibold);
+  padding: 0 var(--primitive-spacing-48);
+}
+.card.vertical.captionOverlay.splitCaption .label:first-child {
+  padding-top: var(--primitive-spacing-18);
 }
 .card.vertical.captionOverlayOnFocus .captions {
   visibility: hidden;
 }
 .card.vertical.hasContainer .captions {
-  padding: 0.75rem 1rem;
+  padding: var(--primitive-spacing-36) var(--primitive-spacing-48);
 }
 .card.vertical:not(.hasContainer) .image {
   z-index: 1;
@@ -128,9 +232,10 @@
 .card.horizontal {
   width: 27.5rem;
   height: 7rem;
+  transition: transform var(--lime-focus-out-motion-duration) var(--lime-focus-out-motion-easing-function);
 }
 .card.horizontal .captions {
-  padding: 1rem;
+  padding: var(--primitive-spacing-48);
 }
 .card.horizontal .image {
   width: var(--card-image-width);
@@ -138,18 +243,11 @@
 :global(.spotlight-input-key) .card:global(.spottable):focus.hasContainer,
 :global(.spotlight-input-mouse) .card:global(.spottable):focus.hasContainer {
   transform: scale(1.1);
-  transition: transform 200ms ease-in-out;
+  transition: transform var(--lime-focus-in-motion-duration) var(--lime-focus-in-motion-easing-function);
 }
 :global(.spotlight-input-key) .card:global(.spottable):focus.hasContainer.roundedImage::before,
 :global(.spotlight-input-mouse) .card:global(.spottable):focus.hasContainer.roundedImage::before {
-  border-radius: 0.75rem;
-}
-:global(.spotlight-input-key) .card:global(.spottable):focus.vertical:not(.captionOverlay):not(.hasContainer) .image,
-:global(.spotlight-input-mouse) .card:global(.spottable):focus.vertical:not(.captionOverlay):not(.hasContainer) .image,
-:global(.spotlight-input-key) .card:global(.spottable):focus.vertical.captionOverlay,
-:global(.spotlight-input-mouse) .card:global(.spottable):focus.vertical.captionOverlay {
-  transform: scale(1.1);
-  transition: transform 200ms ease-in-out;
+  border-radius: var(--semantic-radius-container);
 }
 :global(.spotlight-input-key) .card:global(.spottable):focus.vertical.captionOverlayOnFocus .captions,
 :global(.spotlight-input-mouse) .card:global(.spottable):focus.vertical.captionOverlayOnFocus .captions {
@@ -161,15 +259,10 @@
 }
 :global(.spotlight-input-touch) .card:global(.spottable):active.hasContainer {
   transform: scale(1.1);
-  transition: transform 200ms ease-in-out;
+  transition: transform var(--lime-focus-in-motion-duration) var(--lime-focus-in-motion-easing-function);
 }
 :global(.spotlight-input-touch) .card:global(.spottable):active.hasContainer.roundedImage::before {
-  border-radius: 0.75rem;
-}
-:global(.spotlight-input-touch) .card:global(.spottable):active.vertical:not(.captionOverlay):not(.hasContainer) .image,
-:global(.spotlight-input-touch) .card:global(.spottable):active.vertical.captionOverlay {
-  transform: scale(1.1);
-  transition: transform 200ms ease-in-out;
+  border-radius: var(--semantic-radius-container);
 }
 :global(.spotlight-input-touch) .card:global(.spottable):active.vertical.captionOverlayOnFocus .captions {
   visibility: visible;
@@ -177,14 +270,88 @@
 :global(.spotlight-input-touch) .card:global(.spottable):active.vertical:not(.hasContainer) .selectionContainer {
   z-index: 5;
 }
+: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,
+:global(.spotlight-input-mouse) .card:not([disabled]):global(.spottable):focus.hasContainer:active {
+  transform: scale(1.05);
+  transition: transform var(--lime-press-motion-duration) var(--lime-press-motion-easing-function);
+}
+:global(.spotlight-input-key) .card:not([disabled]):global(.spottable):focus.hasContainer:not(.pressed),
+:global(.spotlight-input-mouse) .card:not([disabled]):global(.spottable):focus.hasContainer:not(.pressed) {
+  transform: scale(1.1);
+  transition: transform var(--lime-release-motion-duration) var(--lime-release-motion-easing-function);
+}
+:global(.spotlight-input-touch) .card:not([disabled]):global(.spottable):active.hasContainer.pressed,
+:global(.spotlight-input-touch) .card:not([disabled]):global(.spottable):active.hasContainer:active {
+  transform: scale(1.05);
+  transition: transform var(--lime-press-motion-duration) var(--lime-press-motion-easing-function);
+}
+:global(.spotlight-input-touch) .card:not([disabled]):global(.spottable):active.hasContainer:not(.pressed) {
+  transform: scale(1.1);
+  transition: transform var(--lime-release-motion-duration) var(--lime-release-motion-easing-function);
+}
+:global(.spotlight-input-key) .card:not(:global(.focusRing)):global(.spottable):focus.vertical:not(.captionOverlay):not(.hasContainer) .image,
+:global(.spotlight-input-mouse) .card:not(:global(.focusRing)):global(.spottable):focus.vertical:not(.captionOverlay):not(.hasContainer) .image,
+:global(.spotlight-input-key) .card:not(:global(.focusRing)):global(.spottable):focus.vertical.captionOverlay,
+:global(.spotlight-input-mouse) .card:not(:global(.focusRing)):global(.spottable):focus.vertical.captionOverlay {
+  transform: scale(1.1);
+  transition: transform var(--lime-focus-in-motion-duration) var(--lime-focus-in-motion-easing-function);
+}
+:global(.spotlight-input-touch) .card:not(:global(.focusRing)):global(.spottable):active.vertical:not(.captionOverlay):not(.hasContainer) .image,
+:global(.spotlight-input-touch) .card:not(:global(.focusRing)):global(.spottable):active.vertical.captionOverlay {
+  transform: scale(1.1);
+  transition: transform var(--lime-focus-in-motion-duration) var(--lime-focus-in-motion-easing-function);
+}
+:global(.spotlight-input-key) .card:not(:global(.focusRing)):not([disabled]):global(.spottable):focus.vertical.captionOverlay.pressed,
+:global(.spotlight-input-mouse) .card:not(:global(.focusRing)):not([disabled]):global(.spottable):focus.vertical.captionOverlay.pressed,
+:global(.spotlight-input-key) .card:not(:global(.focusRing)):not([disabled]):global(.spottable):focus.vertical.captionOverlay:active,
+:global(.spotlight-input-mouse) .card:not(:global(.focusRing)):not([disabled]):global(.spottable):focus.vertical.captionOverlay:active {
+  transform: scale(1.05);
+  transition: transform var(--lime-press-motion-duration) var(--lime-press-motion-easing-function);
+}
+:global(.spotlight-input-key) .card:not(:global(.focusRing)):not([disabled]):global(.spottable):focus.vertical.captionOverlay:not(.pressed),
+:global(.spotlight-input-mouse) .card:not(:global(.focusRing)):not([disabled]):global(.spottable):focus.vertical.captionOverlay:not(.pressed) {
+  transform: scale(1.1);
+  transition: transform var(--lime-release-motion-duration) var(--lime-release-motion-easing-function);
+}
+:global(.spotlight-input-key) .card:not(:global(.focusRing)):not([disabled]):global(.spottable):focus.vertical:not(.captionOverlay):not(.hasContainer).pressed .image,
+:global(.spotlight-input-mouse) .card:not(:global(.focusRing)):not([disabled]):global(.spottable):focus.vertical:not(.captionOverlay):not(.hasContainer).pressed .image {
+  transform: scale(1.05);
+  transition: transform var(--lime-press-motion-duration) var(--lime-press-motion-easing-function);
+}
+:global(.spotlight-input-key) .card:not(:global(.focusRing)):not([disabled]):global(.spottable):focus.vertical:not(.captionOverlay):not(.hasContainer):not(.pressed) .image,
+:global(.spotlight-input-mouse) .card:not(:global(.focusRing)):not([disabled]):global(.spottable):focus.vertical:not(.captionOverlay):not(.hasContainer):not(.pressed) .image {
+  transform: scale(1.1);
+  transition: transform var(--lime-release-motion-duration) var(--lime-release-motion-easing-function);
+}
+:global(.spotlight-input-touch) .card:not(:global(.focusRing)):not([disabled]):global(.spottable):active.vertical.captionOverlay.pressed,
+:global(.spotlight-input-touch) .card:not(:global(.focusRing)):not([disabled]):global(.spottable):active.vertical.captionOverlay:active {
+  transform: scale(1.05);
+  transition: transform var(--lime-press-motion-duration) var(--lime-press-motion-easing-function);
+}
+:global(.spotlight-input-touch) .card:not(:global(.focusRing)):not([disabled]):global(.spottable):active.vertical.captionOverlay:not(.pressed) {
+  transform: scale(1.1);
+  transition: transform var(--lime-release-motion-duration) var(--lime-release-motion-easing-function);
+}
+:global(.spotlight-input-touch) .card:not(:global(.focusRing)):not([disabled]):global(.spottable):active.vertical:not(.captionOverlay):not(.hasContainer).pressed .image {
+  transform: scale(1.05);
+  transition: transform var(--lime-press-motion-duration) var(--lime-press-motion-easing-function);
+}
+:global(.spotlight-input-touch) .card:not(:global(.focusRing)):not([disabled]):global(.spottable):active.vertical:not(.captionOverlay):not(.hasContainer):not(.pressed) .image {
+  transform: scale(1.1);
+  transition: transform var(--lime-release-motion-duration) var(--lime-release-motion-easing-function);
+}
 .card:global(.neutral) .selectionContainer {
   border-color: transparent;
 }
 .card:global(.neutral) .selectionContainer .selectionIcon {
   color: transparent;
 }
+.card:global(.neutral).isCheckIcon.selected .selectionIcon {
+  background-color: var(--semantic-color-surface-highlight);
+}
 .card:global(.neutral).selected .selectionIcon {
-  background-color: var(--semantic-color-surface-accent);
   color: var(--semantic-color-on-surface-main-selected);
 }
 .card:global(.neutral).hasContainer {
@@ -214,6 +381,10 @@
 .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.roundedImage .captions {
+  border-bottom-left-radius: var(--semantic-radius-container);
+  border-bottom-right-radius: var(--semantic-radius-container);
+}
 .card:global(.neutral).vertical.captionOverlay.selected:not(:focus)::before {
   content: '';
   position: absolute;
@@ -237,6 +408,9 @@
   border-radius: inherit;
   z-index: 5;
 }
+.card:global(.neutral).vertical.captionOverlay.splitCaption .label {
+  color: var(--semantic-color-on-background-main);
+}
 :global(.spotlight-input-key) .card:global(.neutral).vertical:not(.hasContainer):global(.spottable):focus:global(.focusRing),
 :global(.spotlight-input-mouse) .card:global(.neutral).vertical:not(.hasContainer):global(.spottable):focus:global(.focusRing) {
   transform: none;
@@ -273,8 +447,8 @@
 :global(.spotlight-input-mouse) .card:global(.neutral):global(.spottable):focus .selectionIcon {
   color: transparent;
 }
-:global(.spotlight-input-key) .card:global(.neutral):global(.spottable):focus.captionOverlay::before,
-:global(.spotlight-input-mouse) .card:global(.neutral):global(.spottable):focus.captionOverlay::before {
+:global(.spotlight-input-key) .card:global(.neutral):global(.spottable):focus.captionOverlay:not(:global(.focusRing))::before,
+:global(.spotlight-input-mouse) .card:global(.neutral):global(.spottable):focus.captionOverlay:not(:global(.focusRing))::before {
   content: '';
   position: absolute;
   top: 0;
@@ -322,7 +496,7 @@
 :global(.spotlight-input-touch) .card:global(.neutral):global(.spottable):active .selectionIcon {
   color: transparent;
 }
-:global(.spotlight-input-touch) .card:global(.neutral):global(.spottable):active.captionOverlay::before {
+:global(.spotlight-input-touch) .card:global(.neutral):global(.spottable):active.captionOverlay:not(:global(.focusRing))::before {
   content: '';
   position: absolute;
   top: 0;
@@ -367,8 +541,10 @@
 :global(.enact-a11y-high-contrast) .card:global(.neutral):global(.highContrast) .selectionContainer .selectionIcon {
   color: transparent;
 }
+:global(.enact-a11y-high-contrast) .card:global(.neutral):global(.highContrast).isCheckIcon.selected .selectionIcon {
+  background-color: var(--semantic-color-surface-highlight);
+}
 :global(.enact-a11y-high-contrast) .card:global(.neutral):global(.highContrast).selected .selectionIcon {
-  background-color: var(--semantic-color-surface-accent);
   color: var(--semantic-color-on-surface-main-selected);
 }
 :global(.enact-a11y-high-contrast) .card:global(.neutral):global(.highContrast).hasContainer {
@@ -398,6 +574,10 @@
 :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.roundedImage .captions {
+  border-bottom-left-radius: var(--semantic-radius-container);
+  border-bottom-right-radius: var(--semantic-radius-container);
+}
 :global(.enact-a11y-high-contrast) .card:global(.neutral):global(.highContrast).vertical.captionOverlay.selected:not(:focus)::before {
   content: '';
   position: absolute;
@@ -421,6 +601,9 @@
   border-radius: inherit;
   z-index: 5;
 }
+:global(.enact-a11y-high-contrast) .card:global(.neutral):global(.highContrast).vertical.captionOverlay.splitCaption .label {
+  color: var(--semantic-color-on-background-main);
+}
 :global(.spotlight-input-key) :global(.enact-a11y-high-contrast) .card:global(.neutral):global(.highContrast).vertical:not(.hasContainer):global(.spottable):focus:global(.focusRing),
 :global(.spotlight-input-mouse) :global(.enact-a11y-high-contrast) .card:global(.neutral):global(.highContrast).vertical:not(.hasContainer):global(.spottable):focus:global(.focusRing) {
   transform: none;
@@ -457,8 +640,8 @@
 :global(.spotlight-input-mouse) :global(.enact-a11y-high-contrast) .card:global(.neutral):global(.highContrast):global(.spottable):focus .selectionIcon {
   color: transparent;
 }
-:global(.spotlight-input-key) :global(.enact-a11y-high-contrast) .card:global(.neutral):global(.highContrast):global(.spottable):focus.captionOverlay::before,
-:global(.spotlight-input-mouse) :global(.enact-a11y-high-contrast) .card:global(.neutral):global(.highContrast):global(.spottable):focus.captionOverlay::before {
+:global(.spotlight-input-key) :global(.enact-a11y-high-contrast) .card:global(.neutral):global(.highContrast):global(.spottable):focus.captionOverlay:not(:global(.focusRing))::before,
+:global(.spotlight-input-mouse) :global(.enact-a11y-high-contrast) .card:global(.neutral):global(.highContrast):global(.spottable):focus.captionOverlay:not(:global(.focusRing))::before {
   content: '';
   position: absolute;
   top: 0;
@@ -506,7 +689,7 @@
 :global(.spotlight-input-touch) :global(.enact-a11y-high-contrast) .card:global(.neutral):global(.highContrast):global(.spottable):active .selectionIcon {
   color: transparent;
 }
-:global(.spotlight-input-touch) :global(.enact-a11y-high-contrast) .card:global(.neutral):global(.highContrast):global(.spottable):active.captionOverlay::before {
+:global(.spotlight-input-touch) :global(.enact-a11y-high-contrast) .card:global(.neutral):global(.highContrast):global(.spottable):active.captionOverlay:not(:global(.focusRing))::before {
   content: '';
   position: absolute;
   top: 0;
@@ -551,8 +734,10 @@
 .card:global(.light) .selectionContainer .selectionIcon {
   color: transparent;
 }
+.card:global(.light).isCheckIcon.selected .selectionIcon {
+  background-color: var(--semantic-color-surface-highlight);
+}
 .card:global(.light).selected .selectionIcon {
-  background-color: var(--semantic-color-surface-accent);
   color: var(--semantic-color-on-surface-main-selected);
 }
 .card:global(.light).hasContainer {
@@ -582,6 +767,10 @@
 .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.roundedImage .captions {
+  border-bottom-left-radius: var(--semantic-radius-container);
+  border-bottom-right-radius: var(--semantic-radius-container);
+}
 .card:global(.light).vertical.captionOverlay.selected:not(:focus)::before {
   content: '';
   position: absolute;
@@ -605,6 +794,9 @@
   border-radius: inherit;
   z-index: 5;
 }
+.card:global(.light).vertical.captionOverlay.splitCaption .label {
+  color: var(--semantic-color-on-background-main);
+}
 :global(.spotlight-input-key) .card:global(.light).vertical:not(.hasContainer):global(.spottable):focus:global(.focusRing),
 :global(.spotlight-input-mouse) .card:global(.light).vertical:not(.hasContainer):global(.spottable):focus:global(.focusRing) {
   transform: none;
@@ -641,8 +833,8 @@
 :global(.spotlight-input-mouse) .card:global(.light):global(.spottable):focus .selectionIcon {
   color: transparent;
 }
-:global(.spotlight-input-key) .card:global(.light):global(.spottable):focus.captionOverlay::before,
-:global(.spotlight-input-mouse) .card:global(.light):global(.spottable):focus.captionOverlay::before {
+:global(.spotlight-input-key) .card:global(.light):global(.spottable):focus.captionOverlay:not(:global(.focusRing))::before,
+:global(.spotlight-input-mouse) .card:global(.light):global(.spottable):focus.captionOverlay:not(:global(.focusRing))::before {
   content: '';
   position: absolute;
   top: 0;
@@ -690,7 +882,7 @@
 :global(.spotlight-input-touch) .card:global(.light):global(.spottable):active .selectionIcon {
   color: transparent;
 }
-:global(.spotlight-input-touch) .card:global(.light):global(.spottable):active.captionOverlay::before {
+:global(.spotlight-input-touch) .card:global(.light):global(.spottable):active.captionOverlay:not(:global(.focusRing))::before {
   content: '';
   position: absolute;
   top: 0;
@@ -740,8 +932,10 @@
 .card:global(.game) .selectionContainer .selectionIcon {
   color: transparent;
 }
+.card:global(.game).isCheckIcon.selected .selectionIcon {
+  background-color: var(--semantic-color-surface-highlight);
+}
 .card:global(.game).selected .selectionIcon {
-  background-color: var(--semantic-color-surface-accent);
   color: var(--semantic-color-on-surface-main-selected);
 }
 .card:global(.game).hasContainer {
@@ -771,6 +965,10 @@
 .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.roundedImage .captions {
+  border-bottom-left-radius: var(--semantic-radius-container);
+  border-bottom-right-radius: var(--semantic-radius-container);
+}
 .card:global(.game).vertical.captionOverlay.selected:not(:focus)::before {
   content: '';
   position: absolute;
@@ -794,6 +992,9 @@
   border-radius: inherit;
   z-index: 5;
 }
+.card:global(.game).vertical.captionOverlay.splitCaption .label {
+  color: var(--semantic-color-on-background-main);
+}
 :global(.spotlight-input-key) .card:global(.game).vertical:not(.hasContainer):global(.spottable):focus:global(.focusRing),
 :global(.spotlight-input-mouse) .card:global(.game).vertical:not(.hasContainer):global(.spottable):focus:global(.focusRing) {
   transform: none;
@@ -830,8 +1031,8 @@
 :global(.spotlight-input-mouse) .card:global(.game):global(.spottable):focus .selectionIcon {
   color: transparent;
 }
-:global(.spotlight-input-key) .card:global(.game):global(.spottable):focus.captionOverlay::before,
-:global(.spotlight-input-mouse) .card:global(.game):global(.spottable):focus.captionOverlay::before {
+:global(.spotlight-input-key) .card:global(.game):global(.spottable):focus.captionOverlay:not(:global(.focusRing))::before,
+:global(.spotlight-input-mouse) .card:global(.game):global(.spottable):focus.captionOverlay:not(:global(.focusRing))::before {
   content: '';
   position: absolute;
   top: 0;
@@ -879,7 +1080,7 @@
 :global(.spotlight-input-touch) .card:global(.game):global(.spottable):active .selectionIcon {
   color: transparent;
 }
-:global(.spotlight-input-touch) .card:global(.game):global(.spottable):active.captionOverlay::before {
+:global(.spotlight-input-touch) .card:global(.game):global(.spottable):active.captionOverlay:not(:global(.focusRing))::before {
   content: '';
   position: absolute;
   top: 0;
@@ -928,8 +1129,10 @@
 :global(.green) .card:global(.game) .selectionContainer .selectionIcon {
   color: transparent;
 }
+:global(.green) .card:global(.game).isCheckIcon.selected .selectionIcon {
+  background-color: var(--semantic-color-surface-highlight);
+}
 :global(.green) .card:global(.game).selected .selectionIcon {
-  background-color: var(--semantic-color-surface-accent);
   color: var(--semantic-color-on-surface-main-selected);
 }
 :global(.green) .card:global(.game).hasContainer {
@@ -959,6 +1162,10 @@
 :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.roundedImage .captions {
+  border-bottom-left-radius: var(--semantic-radius-container);
+  border-bottom-right-radius: var(--semantic-radius-container);
+}
 :global(.green) .card:global(.game).vertical.captionOverlay.selected:not(:focus)::before {
   content: '';
   position: absolute;
@@ -982,6 +1189,9 @@
   border-radius: inherit;
   z-index: 5;
 }
+:global(.green) .card:global(.game).vertical.captionOverlay.splitCaption .label {
+  color: var(--semantic-color-on-background-main);
+}
 :global(.spotlight-input-key) :global(.green) .card:global(.game).vertical:not(.hasContainer):global(.spottable):focus:global(.focusRing),
 :global(.spotlight-input-mouse) :global(.green) .card:global(.game).vertical:not(.hasContainer):global(.spottable):focus:global(.focusRing) {
   transform: none;
@@ -1018,8 +1228,8 @@
 :global(.spotlight-input-mouse) :global(.green) .card:global(.game):global(.spottable):focus .selectionIcon {
   color: transparent;
 }
-:global(.spotlight-input-key) :global(.green) .card:global(.game):global(.spottable):focus.captionOverlay::before,
-:global(.spotlight-input-mouse) :global(.green) .card:global(.game):global(.spottable):focus.captionOverlay::before {
+:global(.spotlight-input-key) :global(.green) .card:global(.game):global(.spottable):focus.captionOverlay:not(:global(.focusRing))::before,
+:global(.spotlight-input-mouse) :global(.green) .card:global(.game):global(.spottable):focus.captionOverlay:not(:global(.focusRing))::before {
   content: '';
   position: absolute;
   top: 0;
@@ -1067,7 +1277,7 @@
 :global(.spotlight-input-touch) :global(.green) .card:global(.game):global(.spottable):active .selectionIcon {
   color: transparent;
 }
-:global(.spotlight-input-touch) :global(.green) .card:global(.game):global(.spottable):active.captionOverlay::before {
+:global(.spotlight-input-touch) :global(.green) .card:global(.game):global(.spottable):active.captionOverlay:not(:global(.focusRing))::before {
   content: '';
   position: absolute;
   top: 0;
@@ -1116,8 +1326,10 @@
 :global(.orange) .card:global(.game) .selectionContainer .selectionIcon {
   color: transparent;
 }
+:global(.orange) .card:global(.game).isCheckIcon.selected .selectionIcon {
+  background-color: var(--semantic-color-surface-highlight);
+}
 :global(.orange) .card:global(.game).selected .selectionIcon {
-  background-color: var(--semantic-color-surface-accent);
   color: var(--semantic-color-on-surface-main-selected);
 }
 :global(.orange) .card:global(.game).hasContainer {
@@ -1147,6 +1359,10 @@
 :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.roundedImage .captions {
+  border-bottom-left-radius: var(--semantic-radius-container);
+  border-bottom-right-radius: var(--semantic-radius-container);
+}
 :global(.orange) .card:global(.game).vertical.captionOverlay.selected:not(:focus)::before {
   content: '';
   position: absolute;
@@ -1170,6 +1386,9 @@
   border-radius: inherit;
   z-index: 5;
 }
+:global(.orange) .card:global(.game).vertical.captionOverlay.splitCaption .label {
+  color: var(--semantic-color-on-background-main);
+}
 :global(.spotlight-input-key) :global(.orange) .card:global(.game).vertical:not(.hasContainer):global(.spottable):focus:global(.focusRing),
 :global(.spotlight-input-mouse) :global(.orange) .card:global(.game).vertical:not(.hasContainer):global(.spottable):focus:global(.focusRing) {
   transform: none;
@@ -1206,8 +1425,8 @@
 :global(.spotlight-input-mouse) :global(.orange) .card:global(.game):global(.spottable):focus .selectionIcon {
   color: transparent;
 }
-:global(.spotlight-input-key) :global(.orange) .card:global(.game):global(.spottable):focus.captionOverlay::before,
-:global(.spotlight-input-mouse) :global(.orange) .card:global(.game):global(.spottable):focus.captionOverlay::before {
+:global(.spotlight-input-key) :global(.orange) .card:global(.game):global(.spottable):focus.captionOverlay:not(:global(.focusRing))::before,
+:global(.spotlight-input-mouse) :global(.orange) .card:global(.game):global(.spottable):focus.captionOverlay:not(:global(.focusRing))::before {
   content: '';
   position: absolute;
   top: 0;
@@ -1255,7 +1474,7 @@
 :global(.spotlight-input-touch) :global(.orange) .card:global(.game):global(.spottable):active .selectionIcon {
   color: transparent;
 }
-:global(.spotlight-input-touch) :global(.orange) .card:global(.game):global(.spottable):active.captionOverlay::before {
+:global(.spotlight-input-touch) :global(.orange) .card:global(.game):global(.spottable):active.captionOverlay:not(:global(.focusRing))::before {
   content: '';
   position: absolute;
   top: 0;