@enact/limestone 1.10.1 → 1.10.2

package/internal/Picker/Picker.module.css

@@ -9,7 +9,7 @@
   font-family: "Limestone";
   font-weight: normal;
   font-size: var(--primitive-font-size-54);
-  line-height: 1.4em;
+  line-height: 1.34em;
   font-weight: var(--primitive-font-weight-semibold);
   max-width: 20rem;
 }
@@ -77,6 +77,7 @@
 }
 .picker .item {
   padding: 0 1rem;
+  position: relative;
 }
 .picker.small .sizingPlaceholder,
 .picker.small .item {
@@ -90,9 +91,6 @@
 .picker .viewManager > .item:nth-child(2) {
   top: -100%;
 }
-.picker .item {
-  position: relative;
-}
 .picker .incrementer,
 .picker .decrementer {
   cursor: pointer;
@@ -168,25 +166,6 @@
 .picker.joined.horizontal:not(.arrow) .item {
   pointer-events: none;
 }
-.picker.joined.horizontal:not(.arrow) .indicatorContainer {
-  margin: 0 auto;
-  line-height: 0;
-  white-space: nowrap;
-}
-.picker.joined.horizontal:not(.arrow) .indicatorContainer .indicator {
-  display: inline-block;
-  width: 0.5rem;
-  height: 0.5rem;
-  margin: var(--primitive-spacing-30) var(--primitive-spacing-12) 0;
-  border-radius: 0.5rem;
-  transform: scale(0.75);
-  vertical-align: middle;
-  will-change: transform;
-  transition: transform 200ms ease-out;
-}
-.picker.joined.horizontal:not(.arrow) .indicatorContainer .indicator.active {
-  transform: scale(1);
-}
 .picker.joined.horizontal.arrow::before,
 .picker.joined.vertical::before {
   border-radius: var(--semantic-radius-button);
@@ -225,10 +204,6 @@
   height: 2.29167rem;
   line-height: 2.29167rem;
 }
-.picker:global(.largeText).joined.horizontal:not(.arrow) .indicatorContainer .indicator {
-  width: calc(0.5rem * 1.2);
-  height: calc(0.5rem * 1.2);
-}
 .picker:global(.largeText).joined.vertical .valueWrapper {
   font-size: var(--primitive-font-size-80);
   height: 2.29167rem;
@@ -249,13 +224,6 @@
   will-change: box-shadow;
   background-color: var(--semantic-color-surface-default);
 }
-.picker:global(.neutral).joined.horizontal:not(.arrow) .indicator {
-  background-color: var(--semantic-color-on-surface-main);
-  opacity: 0.4;
-}
-.picker:global(.neutral).joined.horizontal:not(.arrow) .indicator.active {
-  opacity: 1;
-}
 .picker:global(.neutral).joined.horizontal.arrow::before,
 .picker:global(.neutral).joined.vertical::before {
   opacity: 0;
@@ -318,17 +286,17 @@
 :global(.spotlight-input-mouse):global(.spotlight-input-mouse) .picker:global(.neutral).joined:global(.spottable):focus .icon {
   color: var(--semantic-color-on-surface-main-focused);
 }
-:global(.spotlight-input-key):global(.spotlight-input-key) .picker:global(.neutral).joined:global(.spottable):focus .indicator,
-:global(.spotlight-input-key):global(.spotlight-input-mouse) .picker:global(.neutral).joined:global(.spottable):focus .indicator,
-:global(.spotlight-input-mouse):global(.spotlight-input-key) .picker:global(.neutral).joined:global(.spottable):focus .indicator,
-:global(.spotlight-input-mouse):global(.spotlight-input-mouse) .picker:global(.neutral).joined:global(.spottable):focus .indicator {
+:global(.spotlight-input-key):global(.spotlight-input-key) .picker:global(.neutral).joined:global(.spottable):focus .step,
+:global(.spotlight-input-key):global(.spotlight-input-mouse) .picker:global(.neutral).joined:global(.spottable):focus .step,
+:global(.spotlight-input-mouse):global(.spotlight-input-key) .picker:global(.neutral).joined:global(.spottable):focus .step,
+:global(.spotlight-input-mouse):global(.spotlight-input-mouse) .picker:global(.neutral).joined:global(.spottable):focus .step {
   background-color: var(--semantic-color-on-surface-main-focused);
   opacity: 0.4;
 }
-:global(.spotlight-input-key):global(.spotlight-input-key) .picker:global(.neutral).joined:global(.spottable):focus .indicator.active,
-:global(.spotlight-input-key):global(.spotlight-input-mouse) .picker:global(.neutral).joined:global(.spottable):focus .indicator.active,
-:global(.spotlight-input-mouse):global(.spotlight-input-key) .picker:global(.neutral).joined:global(.spottable):focus .indicator.active,
-:global(.spotlight-input-mouse):global(.spotlight-input-mouse) .picker:global(.neutral).joined:global(.spottable):focus .indicator.active {
+:global(.spotlight-input-key):global(.spotlight-input-key) .picker:global(.neutral).joined:global(.spottable):focus .step.current,
+:global(.spotlight-input-key):global(.spotlight-input-mouse) .picker:global(.neutral).joined:global(.spottable):focus .step.current,
+:global(.spotlight-input-mouse):global(.spotlight-input-key) .picker:global(.neutral).joined:global(.spottable):focus .step.current,
+:global(.spotlight-input-mouse):global(.spotlight-input-mouse) .picker:global(.neutral).joined:global(.spottable):focus .step.current {
   opacity: 1;
 }
 :global(.spotlight-input-key):global(.spotlight-input-touch) .picker:global(.neutral).joined:global(.spottable):active,
@@ -369,13 +337,13 @@
 :global(.spotlight-input-mouse):global(.spotlight-input-touch) .picker:global(.neutral).joined:global(.spottable):active .icon {
   color: var(--semantic-color-on-surface-main-focused);
 }
-:global(.spotlight-input-key):global(.spotlight-input-touch) .picker:global(.neutral).joined:global(.spottable):active .indicator,
-:global(.spotlight-input-mouse):global(.spotlight-input-touch) .picker:global(.neutral).joined:global(.spottable):active .indicator {
+:global(.spotlight-input-key):global(.spotlight-input-touch) .picker:global(.neutral).joined:global(.spottable):active .step,
+:global(.spotlight-input-mouse):global(.spotlight-input-touch) .picker:global(.neutral).joined:global(.spottable):active .step {
   background-color: var(--semantic-color-on-surface-main-focused);
   opacity: 0.4;
 }
-:global(.spotlight-input-key):global(.spotlight-input-touch) .picker:global(.neutral).joined:global(.spottable):active .indicator.active,
-:global(.spotlight-input-mouse):global(.spotlight-input-touch) .picker:global(.neutral).joined:global(.spottable):active .indicator.active {
+:global(.spotlight-input-key):global(.spotlight-input-touch) .picker:global(.neutral).joined:global(.spottable):active .step.current,
+:global(.spotlight-input-mouse):global(.spotlight-input-touch) .picker:global(.neutral).joined:global(.spottable):active .step.current {
   opacity: 1;
 }
 :global(.spotlight-input-mouse):global(.spotlight-input-key) :global(.noAnimation) .picker:global(.neutral).joined:global(.spottable):focus.horizontal.arrow::before,
@@ -403,13 +371,6 @@
   will-change: box-shadow;
   background-color: var(--semantic-color-surface-default);
 }
-:global(.enact-a11y-high-contrast) .picker:global(.neutral):global(.highContrast).joined.horizontal:not(.arrow) .indicator {
-  background-color: var(--semantic-color-on-surface-main);
-  opacity: 0.4;
-}
-:global(.enact-a11y-high-contrast) .picker:global(.neutral):global(.highContrast).joined.horizontal:not(.arrow) .indicator.active {
-  opacity: 1;
-}
 :global(.enact-a11y-high-contrast) .picker:global(.neutral):global(.highContrast).joined.horizontal.arrow::before,
 :global(.enact-a11y-high-contrast) .picker:global(.neutral):global(.highContrast).joined.vertical::before {
   opacity: 0;
@@ -472,17 +433,17 @@
 :global(.spotlight-input-mouse):global(.spotlight-input-mouse) :global(.enact-a11y-high-contrast) .picker:global(.neutral):global(.highContrast).joined:global(.spottable):focus .icon {
   color: var(--semantic-color-on-surface-main-focused);
 }
-:global(.spotlight-input-key):global(.spotlight-input-key) :global(.enact-a11y-high-contrast) .picker:global(.neutral):global(.highContrast).joined:global(.spottable):focus .indicator,
-:global(.spotlight-input-key):global(.spotlight-input-mouse) :global(.enact-a11y-high-contrast) .picker:global(.neutral):global(.highContrast).joined:global(.spottable):focus .indicator,
-:global(.spotlight-input-mouse):global(.spotlight-input-key) :global(.enact-a11y-high-contrast) .picker:global(.neutral):global(.highContrast).joined:global(.spottable):focus .indicator,
-:global(.spotlight-input-mouse):global(.spotlight-input-mouse) :global(.enact-a11y-high-contrast) .picker:global(.neutral):global(.highContrast).joined:global(.spottable):focus .indicator {
+:global(.spotlight-input-key):global(.spotlight-input-key) :global(.enact-a11y-high-contrast) .picker:global(.neutral):global(.highContrast).joined:global(.spottable):focus .step,
+:global(.spotlight-input-key):global(.spotlight-input-mouse) :global(.enact-a11y-high-contrast) .picker:global(.neutral):global(.highContrast).joined:global(.spottable):focus .step,
+:global(.spotlight-input-mouse):global(.spotlight-input-key) :global(.enact-a11y-high-contrast) .picker:global(.neutral):global(.highContrast).joined:global(.spottable):focus .step,
+:global(.spotlight-input-mouse):global(.spotlight-input-mouse) :global(.enact-a11y-high-contrast) .picker:global(.neutral):global(.highContrast).joined:global(.spottable):focus .step {
   background-color: var(--semantic-color-on-surface-main-focused);
   opacity: 0.4;
 }
-:global(.spotlight-input-key):global(.spotlight-input-key) :global(.enact-a11y-high-contrast) .picker:global(.neutral):global(.highContrast).joined:global(.spottable):focus .indicator.active,
-:global(.spotlight-input-key):global(.spotlight-input-mouse) :global(.enact-a11y-high-contrast) .picker:global(.neutral):global(.highContrast).joined:global(.spottable):focus .indicator.active,
-:global(.spotlight-input-mouse):global(.spotlight-input-key) :global(.enact-a11y-high-contrast) .picker:global(.neutral):global(.highContrast).joined:global(.spottable):focus .indicator.active,
-:global(.spotlight-input-mouse):global(.spotlight-input-mouse) :global(.enact-a11y-high-contrast) .picker:global(.neutral):global(.highContrast).joined:global(.spottable):focus .indicator.active {
+:global(.spotlight-input-key):global(.spotlight-input-key) :global(.enact-a11y-high-contrast) .picker:global(.neutral):global(.highContrast).joined:global(.spottable):focus .step.current,
+:global(.spotlight-input-key):global(.spotlight-input-mouse) :global(.enact-a11y-high-contrast) .picker:global(.neutral):global(.highContrast).joined:global(.spottable):focus .step.current,
+:global(.spotlight-input-mouse):global(.spotlight-input-key) :global(.enact-a11y-high-contrast) .picker:global(.neutral):global(.highContrast).joined:global(.spottable):focus .step.current,
+:global(.spotlight-input-mouse):global(.spotlight-input-mouse) :global(.enact-a11y-high-contrast) .picker:global(.neutral):global(.highContrast).joined:global(.spottable):focus .step.current {
   opacity: 1;
 }
 :global(.spotlight-input-key):global(.spotlight-input-touch) :global(.enact-a11y-high-contrast) .picker:global(.neutral):global(.highContrast).joined:global(.spottable):active,
@@ -523,13 +484,13 @@
 :global(.spotlight-input-mouse):global(.spotlight-input-touch) :global(.enact-a11y-high-contrast) .picker:global(.neutral):global(.highContrast).joined:global(.spottable):active .icon {
   color: var(--semantic-color-on-surface-main-focused);
 }
-:global(.spotlight-input-key):global(.spotlight-input-touch) :global(.enact-a11y-high-contrast) .picker:global(.neutral):global(.highContrast).joined:global(.spottable):active .indicator,
-:global(.spotlight-input-mouse):global(.spotlight-input-touch) :global(.enact-a11y-high-contrast) .picker:global(.neutral):global(.highContrast).joined:global(.spottable):active .indicator {
+:global(.spotlight-input-key):global(.spotlight-input-touch) :global(.enact-a11y-high-contrast) .picker:global(.neutral):global(.highContrast).joined:global(.spottable):active .step,
+:global(.spotlight-input-mouse):global(.spotlight-input-touch) :global(.enact-a11y-high-contrast) .picker:global(.neutral):global(.highContrast).joined:global(.spottable):active .step {
   background-color: var(--semantic-color-on-surface-main-focused);
   opacity: 0.4;
 }
-:global(.spotlight-input-key):global(.spotlight-input-touch) :global(.enact-a11y-high-contrast) .picker:global(.neutral):global(.highContrast).joined:global(.spottable):active .indicator.active,
-:global(.spotlight-input-mouse):global(.spotlight-input-touch) :global(.enact-a11y-high-contrast) .picker:global(.neutral):global(.highContrast).joined:global(.spottable):active .indicator.active {
+:global(.spotlight-input-key):global(.spotlight-input-touch) :global(.enact-a11y-high-contrast) .picker:global(.neutral):global(.highContrast).joined:global(.spottable):active .step.current,
+:global(.spotlight-input-mouse):global(.spotlight-input-touch) :global(.enact-a11y-high-contrast) .picker:global(.neutral):global(.highContrast).joined:global(.spottable):active .step.current {
   opacity: 1;
 }
 :global(.spotlight-input-mouse):global(.spotlight-input-key) :global(.noAnimation) :global(.enact-a11y-high-contrast) .picker:global(.neutral):global(.highContrast).joined:global(.spottable):focus.horizontal.arrow::before,
@@ -557,13 +518,6 @@
   will-change: box-shadow;
   background-color: var(--semantic-color-surface-default);
 }
-.picker:global(.light).joined.horizontal:not(.arrow) .indicator {
-  background-color: var(--semantic-color-on-surface-main);
-  opacity: 0.4;
-}
-.picker:global(.light).joined.horizontal:not(.arrow) .indicator.active {
-  opacity: 1;
-}
 .picker:global(.light).joined.horizontal.arrow::before,
 .picker:global(.light).joined.vertical::before {
   opacity: 0;
@@ -626,17 +580,17 @@
 :global(.spotlight-input-mouse):global(.spotlight-input-mouse) .picker:global(.light).joined:global(.spottable):focus .icon {
   color: var(--semantic-color-on-surface-main-focused);
 }
-:global(.spotlight-input-key):global(.spotlight-input-key) .picker:global(.light).joined:global(.spottable):focus .indicator,
-:global(.spotlight-input-key):global(.spotlight-input-mouse) .picker:global(.light).joined:global(.spottable):focus .indicator,
-:global(.spotlight-input-mouse):global(.spotlight-input-key) .picker:global(.light).joined:global(.spottable):focus .indicator,
-:global(.spotlight-input-mouse):global(.spotlight-input-mouse) .picker:global(.light).joined:global(.spottable):focus .indicator {
+:global(.spotlight-input-key):global(.spotlight-input-key) .picker:global(.light).joined:global(.spottable):focus .step,
+:global(.spotlight-input-key):global(.spotlight-input-mouse) .picker:global(.light).joined:global(.spottable):focus .step,
+:global(.spotlight-input-mouse):global(.spotlight-input-key) .picker:global(.light).joined:global(.spottable):focus .step,
+:global(.spotlight-input-mouse):global(.spotlight-input-mouse) .picker:global(.light).joined:global(.spottable):focus .step {
   background-color: var(--semantic-color-on-surface-main-focused);
   opacity: 0.4;
 }
-:global(.spotlight-input-key):global(.spotlight-input-key) .picker:global(.light).joined:global(.spottable):focus .indicator.active,
-:global(.spotlight-input-key):global(.spotlight-input-mouse) .picker:global(.light).joined:global(.spottable):focus .indicator.active,
-:global(.spotlight-input-mouse):global(.spotlight-input-key) .picker:global(.light).joined:global(.spottable):focus .indicator.active,
-:global(.spotlight-input-mouse):global(.spotlight-input-mouse) .picker:global(.light).joined:global(.spottable):focus .indicator.active {
+:global(.spotlight-input-key):global(.spotlight-input-key) .picker:global(.light).joined:global(.spottable):focus .step.current,
+:global(.spotlight-input-key):global(.spotlight-input-mouse) .picker:global(.light).joined:global(.spottable):focus .step.current,
+:global(.spotlight-input-mouse):global(.spotlight-input-key) .picker:global(.light).joined:global(.spottable):focus .step.current,
+:global(.spotlight-input-mouse):global(.spotlight-input-mouse) .picker:global(.light).joined:global(.spottable):focus .step.current {
   opacity: 1;
 }
 :global(.spotlight-input-key):global(.spotlight-input-touch) .picker:global(.light).joined:global(.spottable):active,
@@ -677,13 +631,13 @@
 :global(.spotlight-input-mouse):global(.spotlight-input-touch) .picker:global(.light).joined:global(.spottable):active .icon {
   color: var(--semantic-color-on-surface-main-focused);
 }
-:global(.spotlight-input-key):global(.spotlight-input-touch) .picker:global(.light).joined:global(.spottable):active .indicator,
-:global(.spotlight-input-mouse):global(.spotlight-input-touch) .picker:global(.light).joined:global(.spottable):active .indicator {
+:global(.spotlight-input-key):global(.spotlight-input-touch) .picker:global(.light).joined:global(.spottable):active .step,
+:global(.spotlight-input-mouse):global(.spotlight-input-touch) .picker:global(.light).joined:global(.spottable):active .step {
   background-color: var(--semantic-color-on-surface-main-focused);
   opacity: 0.4;
 }
-:global(.spotlight-input-key):global(.spotlight-input-touch) .picker:global(.light).joined:global(.spottable):active .indicator.active,
-:global(.spotlight-input-mouse):global(.spotlight-input-touch) .picker:global(.light).joined:global(.spottable):active .indicator.active {
+:global(.spotlight-input-key):global(.spotlight-input-touch) .picker:global(.light).joined:global(.spottable):active .step.current,
+:global(.spotlight-input-mouse):global(.spotlight-input-touch) .picker:global(.light).joined:global(.spottable):active .step.current {
   opacity: 1;
 }
 :global(.spotlight-input-mouse):global(.spotlight-input-key) :global(.noAnimation) .picker:global(.light).joined:global(.spottable):focus.horizontal.arrow::before,
@@ -714,13 +668,6 @@
   will-change: box-shadow;
   background-color: var(--semantic-color-surface-default);
 }
-.picker:global(.game).joined.horizontal:not(.arrow) .indicator {
-  background-color: var(--semantic-color-on-surface-main);
-  opacity: 0.4;
-}
-.picker:global(.game).joined.horizontal:not(.arrow) .indicator.active {
-  opacity: 1;
-}
 .picker:global(.game).joined.horizontal.arrow::before,
 .picker:global(.game).joined.vertical::before {
   opacity: 0;
@@ -783,17 +730,17 @@
 :global(.spotlight-input-mouse):global(.spotlight-input-mouse) .picker:global(.game).joined:global(.spottable):focus .icon {
   color: var(--semantic-color-on-surface-main-focused);
 }
-:global(.spotlight-input-key):global(.spotlight-input-key) .picker:global(.game).joined:global(.spottable):focus .indicator,
-:global(.spotlight-input-key):global(.spotlight-input-mouse) .picker:global(.game).joined:global(.spottable):focus .indicator,
-:global(.spotlight-input-mouse):global(.spotlight-input-key) .picker:global(.game).joined:global(.spottable):focus .indicator,
-:global(.spotlight-input-mouse):global(.spotlight-input-mouse) .picker:global(.game).joined:global(.spottable):focus .indicator {
+:global(.spotlight-input-key):global(.spotlight-input-key) .picker:global(.game).joined:global(.spottable):focus .step,
+:global(.spotlight-input-key):global(.spotlight-input-mouse) .picker:global(.game).joined:global(.spottable):focus .step,
+:global(.spotlight-input-mouse):global(.spotlight-input-key) .picker:global(.game).joined:global(.spottable):focus .step,
+:global(.spotlight-input-mouse):global(.spotlight-input-mouse) .picker:global(.game).joined:global(.spottable):focus .step {
   background-color: var(--semantic-color-on-surface-main-focused);
   opacity: 0.4;
 }
-:global(.spotlight-input-key):global(.spotlight-input-key) .picker:global(.game).joined:global(.spottable):focus .indicator.active,
-:global(.spotlight-input-key):global(.spotlight-input-mouse) .picker:global(.game).joined:global(.spottable):focus .indicator.active,
-:global(.spotlight-input-mouse):global(.spotlight-input-key) .picker:global(.game).joined:global(.spottable):focus .indicator.active,
-:global(.spotlight-input-mouse):global(.spotlight-input-mouse) .picker:global(.game).joined:global(.spottable):focus .indicator.active {
+:global(.spotlight-input-key):global(.spotlight-input-key) .picker:global(.game).joined:global(.spottable):focus .step.current,
+:global(.spotlight-input-key):global(.spotlight-input-mouse) .picker:global(.game).joined:global(.spottable):focus .step.current,
+:global(.spotlight-input-mouse):global(.spotlight-input-key) .picker:global(.game).joined:global(.spottable):focus .step.current,
+:global(.spotlight-input-mouse):global(.spotlight-input-mouse) .picker:global(.game).joined:global(.spottable):focus .step.current {
   opacity: 1;
 }
 :global(.spotlight-input-key):global(.spotlight-input-touch) .picker:global(.game).joined:global(.spottable):active,
@@ -834,13 +781,13 @@
 :global(.spotlight-input-mouse):global(.spotlight-input-touch) .picker:global(.game).joined:global(.spottable):active .icon {
   color: var(--semantic-color-on-surface-main-focused);
 }
-:global(.spotlight-input-key):global(.spotlight-input-touch) .picker:global(.game).joined:global(.spottable):active .indicator,
-:global(.spotlight-input-mouse):global(.spotlight-input-touch) .picker:global(.game).joined:global(.spottable):active .indicator {
+:global(.spotlight-input-key):global(.spotlight-input-touch) .picker:global(.game).joined:global(.spottable):active .step,
+:global(.spotlight-input-mouse):global(.spotlight-input-touch) .picker:global(.game).joined:global(.spottable):active .step {
   background-color: var(--semantic-color-on-surface-main-focused);
   opacity: 0.4;
 }
-:global(.spotlight-input-key):global(.spotlight-input-touch) .picker:global(.game).joined:global(.spottable):active .indicator.active,
-:global(.spotlight-input-mouse):global(.spotlight-input-touch) .picker:global(.game).joined:global(.spottable):active .indicator.active {
+:global(.spotlight-input-key):global(.spotlight-input-touch) .picker:global(.game).joined:global(.spottable):active .step.current,
+:global(.spotlight-input-mouse):global(.spotlight-input-touch) .picker:global(.game).joined:global(.spottable):active .step.current {
   opacity: 1;
 }
 :global(.spotlight-input-mouse):global(.spotlight-input-key) :global(.noAnimation) .picker:global(.game).joined:global(.spottable):focus.horizontal.arrow::before,
@@ -870,13 +817,6 @@
   will-change: box-shadow;
   background-color: var(--semantic-color-surface-default);
 }
-:global(.green) .picker:global(.game).joined.horizontal:not(.arrow) .indicator {
-  background-color: var(--semantic-color-on-surface-main);
-  opacity: 0.4;
-}
-:global(.green) .picker:global(.game).joined.horizontal:not(.arrow) .indicator.active {
-  opacity: 1;
-}
 :global(.green) .picker:global(.game).joined.horizontal.arrow::before,
 :global(.green) .picker:global(.game).joined.vertical::before {
   opacity: 0;
@@ -939,17 +879,17 @@
 :global(.spotlight-input-mouse):global(.spotlight-input-mouse) :global(.green) .picker:global(.game).joined:global(.spottable):focus .icon {
   color: var(--semantic-color-on-surface-main-focused);
 }
-:global(.spotlight-input-key):global(.spotlight-input-key) :global(.green) .picker:global(.game).joined:global(.spottable):focus .indicator,
-:global(.spotlight-input-key):global(.spotlight-input-mouse) :global(.green) .picker:global(.game).joined:global(.spottable):focus .indicator,
-:global(.spotlight-input-mouse):global(.spotlight-input-key) :global(.green) .picker:global(.game).joined:global(.spottable):focus .indicator,
-:global(.spotlight-input-mouse):global(.spotlight-input-mouse) :global(.green) .picker:global(.game).joined:global(.spottable):focus .indicator {
+:global(.spotlight-input-key):global(.spotlight-input-key) :global(.green) .picker:global(.game).joined:global(.spottable):focus .step,
+:global(.spotlight-input-key):global(.spotlight-input-mouse) :global(.green) .picker:global(.game).joined:global(.spottable):focus .step,
+:global(.spotlight-input-mouse):global(.spotlight-input-key) :global(.green) .picker:global(.game).joined:global(.spottable):focus .step,
+:global(.spotlight-input-mouse):global(.spotlight-input-mouse) :global(.green) .picker:global(.game).joined:global(.spottable):focus .step {
   background-color: var(--semantic-color-on-surface-main-focused);
   opacity: 0.4;
 }
-:global(.spotlight-input-key):global(.spotlight-input-key) :global(.green) .picker:global(.game).joined:global(.spottable):focus .indicator.active,
-:global(.spotlight-input-key):global(.spotlight-input-mouse) :global(.green) .picker:global(.game).joined:global(.spottable):focus .indicator.active,
-:global(.spotlight-input-mouse):global(.spotlight-input-key) :global(.green) .picker:global(.game).joined:global(.spottable):focus .indicator.active,
-:global(.spotlight-input-mouse):global(.spotlight-input-mouse) :global(.green) .picker:global(.game).joined:global(.spottable):focus .indicator.active {
+:global(.spotlight-input-key):global(.spotlight-input-key) :global(.green) .picker:global(.game).joined:global(.spottable):focus .step.current,
+:global(.spotlight-input-key):global(.spotlight-input-mouse) :global(.green) .picker:global(.game).joined:global(.spottable):focus .step.current,
+:global(.spotlight-input-mouse):global(.spotlight-input-key) :global(.green) .picker:global(.game).joined:global(.spottable):focus .step.current,
+:global(.spotlight-input-mouse):global(.spotlight-input-mouse) :global(.green) .picker:global(.game).joined:global(.spottable):focus .step.current {
   opacity: 1;
 }
 :global(.spotlight-input-key):global(.spotlight-input-touch) :global(.green) .picker:global(.game).joined:global(.spottable):active,
@@ -990,13 +930,13 @@
 :global(.spotlight-input-mouse):global(.spotlight-input-touch) :global(.green) .picker:global(.game).joined:global(.spottable):active .icon {
   color: var(--semantic-color-on-surface-main-focused);
 }
-:global(.spotlight-input-key):global(.spotlight-input-touch) :global(.green) .picker:global(.game).joined:global(.spottable):active .indicator,
-:global(.spotlight-input-mouse):global(.spotlight-input-touch) :global(.green) .picker:global(.game).joined:global(.spottable):active .indicator {
+:global(.spotlight-input-key):global(.spotlight-input-touch) :global(.green) .picker:global(.game).joined:global(.spottable):active .step,
+:global(.spotlight-input-mouse):global(.spotlight-input-touch) :global(.green) .picker:global(.game).joined:global(.spottable):active .step {
   background-color: var(--semantic-color-on-surface-main-focused);
   opacity: 0.4;
 }
-:global(.spotlight-input-key):global(.spotlight-input-touch) :global(.green) .picker:global(.game).joined:global(.spottable):active .indicator.active,
-:global(.spotlight-input-mouse):global(.spotlight-input-touch) :global(.green) .picker:global(.game).joined:global(.spottable):active .indicator.active {
+:global(.spotlight-input-key):global(.spotlight-input-touch) :global(.green) .picker:global(.game).joined:global(.spottable):active .step.current,
+:global(.spotlight-input-mouse):global(.spotlight-input-touch) :global(.green) .picker:global(.game).joined:global(.spottable):active .step.current {
   opacity: 1;
 }
 :global(.spotlight-input-mouse):global(.spotlight-input-key) :global(.noAnimation) :global(.green) .picker:global(.game).joined:global(.spottable):focus.horizontal.arrow::before,
@@ -1026,13 +966,6 @@
   will-change: box-shadow;
   background-color: var(--semantic-color-surface-default);
 }
-:global(.orange) .picker:global(.game).joined.horizontal:not(.arrow) .indicator {
-  background-color: var(--semantic-color-on-surface-main);
-  opacity: 0.4;
-}
-:global(.orange) .picker:global(.game).joined.horizontal:not(.arrow) .indicator.active {
-  opacity: 1;
-}
 :global(.orange) .picker:global(.game).joined.horizontal.arrow::before,
 :global(.orange) .picker:global(.game).joined.vertical::before {
   opacity: 0;
@@ -1095,17 +1028,17 @@
 :global(.spotlight-input-mouse):global(.spotlight-input-mouse) :global(.orange) .picker:global(.game).joined:global(.spottable):focus .icon {
   color: var(--semantic-color-on-surface-main-focused);
 }
-:global(.spotlight-input-key):global(.spotlight-input-key) :global(.orange) .picker:global(.game).joined:global(.spottable):focus .indicator,
-:global(.spotlight-input-key):global(.spotlight-input-mouse) :global(.orange) .picker:global(.game).joined:global(.spottable):focus .indicator,
-:global(.spotlight-input-mouse):global(.spotlight-input-key) :global(.orange) .picker:global(.game).joined:global(.spottable):focus .indicator,
-:global(.spotlight-input-mouse):global(.spotlight-input-mouse) :global(.orange) .picker:global(.game).joined:global(.spottable):focus .indicator {
+:global(.spotlight-input-key):global(.spotlight-input-key) :global(.orange) .picker:global(.game).joined:global(.spottable):focus .step,
+:global(.spotlight-input-key):global(.spotlight-input-mouse) :global(.orange) .picker:global(.game).joined:global(.spottable):focus .step,
+:global(.spotlight-input-mouse):global(.spotlight-input-key) :global(.orange) .picker:global(.game).joined:global(.spottable):focus .step,
+:global(.spotlight-input-mouse):global(.spotlight-input-mouse) :global(.orange) .picker:global(.game).joined:global(.spottable):focus .step {
   background-color: var(--semantic-color-on-surface-main-focused);
   opacity: 0.4;
 }
-:global(.spotlight-input-key):global(.spotlight-input-key) :global(.orange) .picker:global(.game).joined:global(.spottable):focus .indicator.active,
-:global(.spotlight-input-key):global(.spotlight-input-mouse) :global(.orange) .picker:global(.game).joined:global(.spottable):focus .indicator.active,
-:global(.spotlight-input-mouse):global(.spotlight-input-key) :global(.orange) .picker:global(.game).joined:global(.spottable):focus .indicator.active,
-:global(.spotlight-input-mouse):global(.spotlight-input-mouse) :global(.orange) .picker:global(.game).joined:global(.spottable):focus .indicator.active {
+:global(.spotlight-input-key):global(.spotlight-input-key) :global(.orange) .picker:global(.game).joined:global(.spottable):focus .step.current,
+:global(.spotlight-input-key):global(.spotlight-input-mouse) :global(.orange) .picker:global(.game).joined:global(.spottable):focus .step.current,
+:global(.spotlight-input-mouse):global(.spotlight-input-key) :global(.orange) .picker:global(.game).joined:global(.spottable):focus .step.current,
+:global(.spotlight-input-mouse):global(.spotlight-input-mouse) :global(.orange) .picker:global(.game).joined:global(.spottable):focus .step.current {
   opacity: 1;
 }
 :global(.spotlight-input-key):global(.spotlight-input-touch) :global(.orange) .picker:global(.game).joined:global(.spottable):active,
@@ -1146,13 +1079,13 @@
 :global(.spotlight-input-mouse):global(.spotlight-input-touch) :global(.orange) .picker:global(.game).joined:global(.spottable):active .icon {
   color: var(--semantic-color-on-surface-main-focused);
 }
-:global(.spotlight-input-key):global(.spotlight-input-touch) :global(.orange) .picker:global(.game).joined:global(.spottable):active .indicator,
-:global(.spotlight-input-mouse):global(.spotlight-input-touch) :global(.orange) .picker:global(.game).joined:global(.spottable):active .indicator {
+:global(.spotlight-input-key):global(.spotlight-input-touch) :global(.orange) .picker:global(.game).joined:global(.spottable):active .step,
+:global(.spotlight-input-mouse):global(.spotlight-input-touch) :global(.orange) .picker:global(.game).joined:global(.spottable):active .step {
   background-color: var(--semantic-color-on-surface-main-focused);
   opacity: 0.4;
 }
-:global(.spotlight-input-key):global(.spotlight-input-touch) :global(.orange) .picker:global(.game).joined:global(.spottable):active .indicator.active,
-:global(.spotlight-input-mouse):global(.spotlight-input-touch) :global(.orange) .picker:global(.game).joined:global(.spottable):active .indicator.active {
+:global(.spotlight-input-key):global(.spotlight-input-touch) :global(.orange) .picker:global(.game).joined:global(.spottable):active .step.current,
+:global(.spotlight-input-mouse):global(.spotlight-input-touch) :global(.orange) .picker:global(.game).joined:global(.spottable):active .step.current {
   opacity: 1;
 }
 :global(.spotlight-input-mouse):global(.spotlight-input-key) :global(.noAnimation) :global(.orange) .picker:global(.game).joined:global(.spottable):focus.horizontal.arrow::before,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@enact/limestone",
-  "version": "1.10.1",
+  "version": "1.10.2",
   "description": "Large-screen/TV support library for Enact, containing a variety of UI components.",
   "repository": {
     "type": "git",
@@ -39,11 +39,11 @@
     "screenTypes": "ThemeDecorator/screenTypes.json"
   },
   "dependencies": {
-    "@enact/core": "^5.5.1",
-    "@enact/i18n": "^5.5.1",
-    "@enact/spotlight": "^5.5.1",
-    "@enact/ui": "^5.5.1",
-    "@enact/webos": "^5.5.1",
+    "@enact/core": "^5.5.2",
+    "@enact/i18n": "^5.5.2",
+    "@enact/spotlight": "^5.5.2",
+    "@enact/ui": "^5.5.2",
+    "@enact/webos": "^5.5.2",
     "@enovaui/core-tokens": "^2.0.0",
     "@enovaui/webos-tokens": "^2.0.0",
     "classnames": "^2.5.1",
@@ -51,8 +51,8 @@
     "invariant": "^2.2.4",
     "prop-types": "^15.8.1",
     "ramda": "^0.32.0",
-    "react": "^19.2.6",
-    "react-dom": "^19.2.6",
+    "react": "^19.2.7",
+    "react-dom": "^19.2.7",
     "warning": "^4.0.3"
   },
   "peerDependencies": {
@@ -60,13 +60,10 @@
   },
   "overrides": {
     "autolinker": "^4.0.0",
-    "vue-template-compiler": "@vue/compiler-sfc@3.4.31",
-    "prop-types": {
-      "react-is": "^19.2.3"
-    }
+    "vue-template-compiler": "@vue/compiler-sfc@3.4.31"
   },
   "devDependencies": {
-    "@enact/docs-utils": "^0.4.17",
-    "@enact/ui-test-utils": "^4.0.2"
+    "@enact/docs-utils": "^0.5.0",
+    "@enact/ui-test-utils": "^4.0.4"
   }
 }

package/styles/color-mixins.less

@@ -10,64 +10,16 @@
 // Focus Shadow and background setup
 // ---------------------------------------
 .lime-bg-colors (@bg) {
-	//// Relocate the bg styling to a pseudo-element
-	// &::after {
-		@bg();
-	// }
+	@bg();
 }
-// .lime-shadow-colors (@shadow) {
-// 	// &::before {
-// 		@shadow();
-// 	// }
-// }
 
 // Establish rules assignment for before focus has happened
 .lime-spotlight-resting-bg-colors (@opacity: 0, @bg: {}, @shadow: {}) {
-	// These lines are really long, and occasionally repeated. Defining here as shorthand.
-	// @transition-opacity: opacity @lime-spotlight-focus-animation-duration ease-out;
-	// @transition-transform: transform @lime-spotlight-focus-animation-duration ease-out;
-	// @transition-filter: filter @lime-spotlight-focus-animation-duration ease-out;
-
 	opacity: @opacity;
-	// transition+: @transition-opacity;
-	// will-change+: opacity;
-
-	// Prep common aspects
-	// @pseudo-element-setup: {
-	// 	content: "";
-	// 	position: absolute;
-	// 	.position(0);
-	// 	border-radius: inherit;
-	// };
-
-	// // Shadow
-	// .lime-shadow-colors({
-	// 	@pseudo-element-setup();
-	// 	background-color: @lime-spotlight-bg-color;
-	// 	opacity: 0;
-
-	// 	// filter+: drop-shadow(@lime-spotlight-focus-shadow);
-	// 	box-shadow: @lime-spotlight-focus-shadow;
-
-	// 	//// Include a transform on the shadow for a better effect
-	// 	// transform+_: scale(0.9, 0.5); // Hard-coded values, not part of the design. This transform is responsible for tucking the shadow up inside the background so it can transition out.
-	// 	// transition+: @transition-opacity, @transition-transform;
-	// 	// will-change+: opacity, transition;
-
-	// 	//// Simple opacity change to the shadow (fade-in)
-	// 	transition+: @transition-opacity;
-	// 	will-change+: opacity;
-	// 	will-change+: box-shadow;
-
-	// 	@shadow();
-	// });
 
 	// Background coloration
 	.lime-bg-colors({
-		// @pseudo-element-setup();
-
 		background-color: @lime-spotlight-bg-color;
-		// transition+: @transition-filter;
 		will-change+: box-shadow;
 
 		@bg();
@@ -78,26 +30,18 @@
 // Establish rules assignment for after focus has happened
 .lime-spotlight-focus-bg-colors (@bg: {}, @shadow: {}) {
 	opacity: 1;
+
+	// Background coloration
 	.lime-bg-colors({
 		background-color: @lime-spotlight-bg-color;
 		box-shadow: @lime-spotlight-focus-shadow;
+
 		@bg();
 		@shadow();
 	});
 }
 
-// // Just the spotlight shadow (merge-safe)
-// .lime-spotlight-focus-shadow-colors (@shadow: {}) {
-// 	.lime-shadow-colors({
-// 		transform: scale(1);
-// 		opacity: 1;
-// 		box-shadow: @lime-spotlight-focus-shadow;
-// 		@shadow();
-// 	});
-// }
-
 .lime-spotlight-focus-text-colors () {
-	// font-weight: @lime-spotlight-font-weight;
 	color: @lime-spotlight-text-color;
 }
 

package/styles/colors-game.less

@@ -38,8 +38,8 @@
 
 // Button
 // --------------------------------------
-@lime-button-outline-border: fade(@lime-game-skin-color-01, 50%);
-@lime-button-icononly-bg-focused: fade(@lime-game-skin-color-02, 50%);
+@lime-button-outline-border-color: fade(@lime-game-skin-color-01, 50%);
+@lime-button-icononly-bg-focused-color: fade(@lime-game-skin-color-02, 50%);
 
 // Heading
 // ---------------------------------------
@@ -48,9 +48,9 @@
 // Item
 // ---------------------------------------
 @lime-item-focus-background: linear-gradient(270deg, @lime-game-skin-item-focus-bg-gradient-1, @lime-game-skin-item-focus-bg-gradient-2);
-@lime-item-focus-label-color: #abaeb3;
+@lime-item-label-sub-focused-color: #abaeb3;
 
 // RadioItem
 // ---------------------------------------
-@lime-radioitem-icon-bg-selected: @lime-game-skin-color-02;
-@lime-radioitem-icon-border-selected: @lime-game-skin-color-02;
+@lime-radioitem-container-selected-color: @lime-game-skin-color-02;
+@lime-radioitem-border-selected-color: @lime-game-skin-color-02;

package/styles/colors.less

@@ -133,16 +133,14 @@
 @lime-checkbox-border-selected-focused-color: @lime-checkbox-border-selected-color;
 @lime-checkbox-border-selected-disabled-color: @lime-checkbox-border-selected-color;
 @lime-checkbox-border-selected-disabled-focused-color: @lime-checkbox-border-selected-color;
-@lime-checkbox-border-disabled-color: @lime-checkbox-border-color;
-@lime-checkbox-border-disabled-focused-color: @lime-checkbox-border-focused-color;
 @lime-checkbox-border-indeterminate-color: var(--semantic-color-stroke-selection-inactive);
 @lime-checkbox-border-indeterminate-focused-color: var(--semantic-color-stroke-selection-inactive-focused);
-@lime-checkbox-border-indeterminate-disabled-color: @lime-checkbox-border-indeterminate-color;
-@lime-checkbox-border-indeterminate-disabled-focused-color: @lime-checkbox-border-indeterminate-focused-color;
 
 // CheckboxItem
 // ---------------------------------------
 @lime-checkboxitem-item-container-selected-color: transparent;
+@lime-checkboxitem-form-label-main-focused-color: var(--semantic-color-on-background-main);
+@lime-checkboxitem-form-label-main-disabled-focused-color: inherit;
 
 // ContextualPopup
 // ---------------------------------------
@@ -266,6 +264,7 @@
 @lime-item-label-sub-selected-color: var(--semantic-color-on-background-sub);
 @lime-item-container-selected-color: ~"color(from" var(--semantic-color-surface-default-translucent) ~"srgb r g b / 0.1)";
 @lime-item-container-disabled-focused-color: var(--semantic-color-surface-default-disabled-focused);
+@lime-item-focus-background: '';
 
 // KeyGuide
 // ---------------------------------------
@@ -327,7 +326,7 @@
 // ---------------------------------------
 @lime-progressbar-track-color: ~"color(from" var(--semantic-color-surface-default-track) ~"srgb r g b / 0.7)";
 @lime-progressbar-track-buffer-color: ~"color(from" var(--semantic-color-surface-white) ~"srgb r g b / 0.5)";
-@lime-progressbar-track-active-color: var(--semantic-color-surface-accent);
+@lime-progressbar-track-active-color: var(--semantic-color-surface-white);
 @lime-progressbar-track-active-focused-color: var(--semantic-color-surface-default-focused);
 
 // ProgressButton
@@ -371,13 +370,13 @@
 @lime-slider-min-max-color: var(--semantic-color-on-background-sub);
 @lime-slider-track-color: ~"color(from" var(--semantic-color-surface-default-track) ~"srgb r g b / 0.7)";
 @lime-slider-track-buffer-color: ~"color(from" var(--semantic-color-surface-white) ~"srgb r g b / 0.5)";
-@lime-slider-track-active-color: var(--semantic-color-surface-accent);
-@lime-slider-track-active-focused-color: var(--semantic-color-surface-accent);
-@lime-slider-handle-color: var(--semantic-color-surface-default-handle);
-@lime-slider-handle-colorPicker-focused-color: var(--semantic-color-surface-white);
+@lime-slider-track-active-color: var(--semantic-color-surface-white);
+@lime-slider-track-active-focused-color: var(--semantic-color-surface-white);
+@lime-slider-handle-color: var(--semantic-color-surface-white);
+@lime-slider-handle-colorPicker-outline-color: var(--semantic-color-surface-white);
 @lime-slider-handle-border-color: transparent;
 @lime-slider-handle-focused-border-color: @lime-slider-handle-border-color;
-@lime-slider-handle-focused-color: var(--semantic-color-surface-default-focused);
+@lime-slider-handle-focused-color: var(--semantic-color-surface-white);
 @lime-slider-handle-disabled-color: transparent;
 @lime-slider-handle-focused-shadow: 0 24px 36px @lime-shadow-color;
 @lime-slider-disabled-bar-opacity: 0.3;