@enact/limestone 1.10.1 → 1.10.2

package/Item/Item.module.css

@@ -2,16 +2,13 @@
   font-size: var(--primitive-font-size-60);
   padding: var(--primitive-spacing-36) var(--primitive-spacing-48);
   font-weight: var(--primitive-font-weight-semibold);
-  line-height: 1.4em;
+  line-height: 1.34em;
   height: 3.25rem;
   display: flex;
   position: relative;
   color: inherit;
   margin: 0 var(--primitive-spacing-36) var(--primitive-spacing-30) var(--primitive-spacing-36);
 }
-.item.selected {
-  /* Available for customization */
-}
 :global(.enact-locale-km) .item {
   line-height: 1.5em;
 }
@@ -24,13 +21,16 @@
 :global(.enact-locale-vi) .item {
   line-height: 1.5em;
 }
+.item.selected {
+  /* Available for customization */
+}
 .item .bg {
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
-  border-radius: var(--semantic-radius-container);
+  border-radius: var(--semantic-radius-button);
 }
 .item .slotAfter,
 .item .slotBefore {
@@ -105,7 +105,7 @@
 }
 .item:global(.largeText) {
   font-size: var(--primitive-font-size-72);
-  line-height: 1.4em;
+  line-height: 1.34em;
 }
 :global(.enact-locale-km) .item:global(.largeText) {
   line-height: 1.5em;
@@ -130,7 +130,7 @@
   font-size: var(--primitive-font-size-60);
   font-weight: var(--primitive-font-weight-semibold);
   height: 2.625rem;
-  line-height: 1.4em;
+  line-height: 1.34em;
 }
 :global(.enact-locale-km) .item.small {
   line-height: 1.5em;
@@ -150,7 +150,7 @@
 .item.small .label {
   font-size: var(--primitive-font-size-48);
   font-weight: var(--primitive-font-weight-regular);
-  line-height: 1.4em;
+  line-height: 1.34em;
 }
 :global(.enact-locale-km) .item.small {
   font-size: var(--primitive-font-size-60);
@@ -166,7 +166,7 @@
 }
 .item.small:global(.largeText) {
   font-size: var(--primitive-font-size-72);
-  line-height: 1.4em;
+  line-height: 1.34em;
 }
 :global(.enact-locale-km) .item.small:global(.largeText) {
   line-height: 1.5em;
@@ -210,6 +210,7 @@
   opacity: 1;
   background-color: var(--semantic-color-surface-default-focused);
   box-shadow: 0 0.5rem 0.75rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
+  background: 'undefined';
 }
 :global(.spotlight-input-key) .item:global(.neutral):global(.spottable):focus .label,
 :global(.spotlight-input-mouse) .item:global(.neutral):global(.spottable):focus .label {
@@ -222,6 +223,7 @@
   opacity: 1;
   background-color: var(--semantic-color-surface-default-focused);
   box-shadow: 0 0.5rem 0.75rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
+  background: 'undefined';
 }
 :global(.spotlight-input-touch) .item:global(.neutral):global(.spottable):active .label {
   color: var(--semantic-color-on-surface-sub-focused);
@@ -288,6 +290,7 @@
   opacity: 1;
   background-color: var(--semantic-color-surface-default-focused);
   box-shadow: 0 0.5rem 0.75rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
+  background: 'undefined';
 }
 :global(.spotlight-input-key) :global(.enact-a11y-high-contrast) .item:global(.neutral):global(.highContrast):global(.spottable):focus .label,
 :global(.spotlight-input-mouse) :global(.enact-a11y-high-contrast) .item:global(.neutral):global(.highContrast):global(.spottable):focus .label {
@@ -300,6 +303,7 @@
   opacity: 1;
   background-color: var(--semantic-color-surface-default-focused);
   box-shadow: 0 0.5rem 0.75rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
+  background: 'undefined';
 }
 :global(.spotlight-input-touch) :global(.enact-a11y-high-contrast) .item:global(.neutral):global(.highContrast):global(.spottable):active .label {
   color: var(--semantic-color-on-surface-sub-focused);
@@ -366,6 +370,7 @@
   opacity: 1;
   background-color: var(--semantic-color-surface-default-focused);
   box-shadow: 0 0.5rem 0.75rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
+  background: 'undefined';
 }
 :global(.spotlight-input-key) .item:global(.light):global(.spottable):focus .label,
 :global(.spotlight-input-mouse) .item:global(.light):global(.spottable):focus .label {
@@ -378,6 +383,7 @@
   opacity: 1;
   background-color: var(--semantic-color-surface-default-focused);
   box-shadow: 0 0.5rem 0.75rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
+  background: 'undefined';
 }
 :global(.spotlight-input-touch) .item:global(.light):global(.spottable):active .label {
   color: var(--semantic-color-on-surface-sub-focused);
@@ -449,10 +455,11 @@
   opacity: 1;
   background-color: var(--semantic-color-surface-default-focused);
   box-shadow: 0 0.5rem 0.75rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
+  background: linear-gradient(270deg, rgba(96, 48, 145, 0), #6d2fa1);
 }
 :global(.spotlight-input-key) .item:global(.game):global(.spottable):focus .label,
 :global(.spotlight-input-mouse) .item:global(.game):global(.spottable):focus .label {
-  color: var(--semantic-color-on-surface-sub-focused);
+  color: #abaeb3;
 }
 :global(.spotlight-input-touch) .item:global(.game):global(.spottable):active {
   color: var(--semantic-color-on-surface-main-focused);
@@ -461,9 +468,10 @@
   opacity: 1;
   background-color: var(--semantic-color-surface-default-focused);
   box-shadow: 0 0.5rem 0.75rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
+  background: linear-gradient(270deg, rgba(96, 48, 145, 0), #6d2fa1);
 }
 :global(.spotlight-input-touch) .item:global(.game):global(.spottable):active .label {
-  color: var(--semantic-color-on-surface-sub-focused);
+  color: #abaeb3;
 }
 :global(.spotlight-input-key) :global(.noAnimation) .item:global(.game):global(.spottable):focus .bg,
 :global(.spotlight-input-mouse) :global(.noAnimation) .item:global(.game):global(.spottable):focus .bg {
@@ -531,10 +539,11 @@
   opacity: 1;
   background-color: var(--semantic-color-surface-default-focused);
   box-shadow: 0 0.5rem 0.75rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
+  background: linear-gradient(270deg, rgba(0, 255, 188, 0), rgba(0, 255, 194, 0.47));
 }
 :global(.spotlight-input-key) :global(.green) .item:global(.game):global(.spottable):focus .label,
 :global(.spotlight-input-mouse) :global(.green) .item:global(.game):global(.spottable):focus .label {
-  color: var(--semantic-color-on-surface-sub-focused);
+  color: #abaeb3;
 }
 :global(.spotlight-input-touch) :global(.green) .item:global(.game):global(.spottable):active {
   color: var(--semantic-color-on-surface-main-focused);
@@ -543,9 +552,10 @@
   opacity: 1;
   background-color: var(--semantic-color-surface-default-focused);
   box-shadow: 0 0.5rem 0.75rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
+  background: linear-gradient(270deg, rgba(0, 255, 188, 0), rgba(0, 255, 194, 0.47));
 }
 :global(.spotlight-input-touch) :global(.green) .item:global(.game):global(.spottable):active .label {
-  color: var(--semantic-color-on-surface-sub-focused);
+  color: #abaeb3;
 }
 :global(.spotlight-input-key) :global(.noAnimation) :global(.green) .item:global(.game):global(.spottable):focus .bg,
 :global(.spotlight-input-mouse) :global(.noAnimation) :global(.green) .item:global(.game):global(.spottable):focus .bg {
@@ -613,10 +623,11 @@
   opacity: 1;
   background-color: var(--semantic-color-surface-default-focused);
   box-shadow: 0 0.5rem 0.75rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
+  background: linear-gradient(270deg, rgba(86, 41, 7, 0), #a85c37);
 }
 :global(.spotlight-input-key) :global(.orange) .item:global(.game):global(.spottable):focus .label,
 :global(.spotlight-input-mouse) :global(.orange) .item:global(.game):global(.spottable):focus .label {
-  color: var(--semantic-color-on-surface-sub-focused);
+  color: #abaeb3;
 }
 :global(.spotlight-input-touch) :global(.orange) .item:global(.game):global(.spottable):active {
   color: var(--semantic-color-on-surface-main-focused);
@@ -625,9 +636,10 @@
   opacity: 1;
   background-color: var(--semantic-color-surface-default-focused);
   box-shadow: 0 0.5rem 0.75rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
+  background: linear-gradient(270deg, rgba(86, 41, 7, 0), #a85c37);
 }
 :global(.spotlight-input-touch) :global(.orange) .item:global(.game):global(.spottable):active .label {
-  color: var(--semantic-color-on-surface-sub-focused);
+  color: #abaeb3;
 }
 :global(.spotlight-input-key) :global(.noAnimation) :global(.orange) .item:global(.game):global(.spottable):focus .bg,
 :global(.spotlight-input-mouse) :global(.noAnimation) :global(.orange) .item:global(.game):global(.spottable):focus .bg {

package/KeyGuide/KeyGuide.d.ts

@@ -1,7 +1,7 @@
 // Type definitions for limestone/KeyGuide
 
-import { MarqueeControllerProps as limestone_Marquee_MarqueeControllerProps } from "limestone/Marquee";
-import { SkinnableProps as limestone_Skinnable_SkinnableProps } from "limestone/Skinnable";
+import { MarqueeControllerProps as limestone_Marquee_MarqueeControllerProps } from "@enact/limestone/Marquee";
+import { SkinnableProps as limestone_Skinnable_SkinnableProps } from "@enact/limestone/Skinnable";
 import * as React from "react";
 
 type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;

package/MediaOverlay/MediaOverlay.d.ts

@@ -1,9 +1,9 @@
 // Type definitions for limestone/MediaOverlay
 
-import { MarqueeControllerProps as limestone_Marquee_MarqueeControllerProps } from "limestone/Marquee";
+import { MarqueeControllerProps as limestone_Marquee_MarqueeControllerProps } from "@enact/limestone/Marquee";
 import { SpottableProps as spotlight_Spottable_SpottableProps } from "@enact/spotlight/Spottable";
 import { SlottableProps as ui_Slottable_SlottableProps } from "@enact/ui/Slottable";
-import { SkinnableProps as limestone_Skinnable_SkinnableProps } from "limestone/Skinnable";
+import { SkinnableProps as limestone_Skinnable_SkinnableProps } from "@enact/limestone/Skinnable";
 import * as React from "react";
 
 type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;

package/MediaOverlay/MediaOverlay.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
 ------------------------------------------ */
 .mediaOverlay {

package/MediaPlayer/MediaSlider.module.css

@@ -7,6 +7,7 @@
 }
 .sliderFrame .mediaSlider {
   margin: 0 0.75rem;
+  min-height: auto;
   padding: 0.5rem 0;
   height: 0.25rem;
 }

package/MediaPlayer/Times.module.css

@@ -2,7 +2,7 @@
   font-family: "Limestone";
   font-weight: normal;
   font-size: var(--primitive-font-size-48);
-  line-height: 1.4em;
+  line-height: 1.34em;
   line-height: 1.25rem;
   white-space: nowrap;
   min-width: 4rem;

package/MediaPlayer/index.d.ts

@@ -1,9 +1,9 @@
 // Type definitions for limestone/MediaPlayer
 
-import { SliderProps as limestone_Slider_SliderProps } from "limestone/Slider";
+import { SliderProps as limestone_Slider_SliderProps } from "@enact/limestone/Slider";
 import * as React from "react";
 import { CancelableProps as ui_Cancelable_CancelableProps } from "@enact/ui/Cancelable";
-import { SkinnableProps as limestone_Skinnable_SkinnableProps } from "limestone/Skinnable";
+import { SkinnableProps as limestone_Skinnable_SkinnableProps } from "@enact/limestone/Skinnable";
 
 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;

package/PageViews/PageViews.module.css

@@ -18,7 +18,7 @@
   position: absolute;
   width: 100%;
   height: 2.75rem;
-  top: calc(50% - 2.75rem / 2 );
+  top: calc(50% -  2.75rem / 2 );
   z-index: 10;
   pointer-events: none;
 }
@@ -61,6 +61,7 @@
 .pageViews.dot .steps {
   display: flex;
   align-items: center;
+  margin-top: 0;
   min-height: 2.75rem;
   gap: var(--primitive-spacing-24);
 }

package/Panels/Header.module.css

@@ -39,9 +39,6 @@
   align-items: center;
   height: 4.25rem;
 }
-.header.wizard .titlesRow {
-  padding-bottom: 70.2px;
-}
 .header .slotBefore,
 .header .slotAfter,
 .header .slotSizer {
@@ -53,15 +50,27 @@
 .header .slotSizer > * {
   margin: 0;
 }
+.header .slotAfter {
+  text-align: right;
+}
 .header .slotAfter .slotSizer > *:not(:first-child) {
   margin-inline-start: var(--primitive-spacing-36);
 }
+:global(.enact-locale-right-to-left) .header .slotAfter {
+  text-align: left;
+}
 .header .slotBefore .slotSizer {
   /* Select the children that have visible siblings right after them */
 }
 .header .slotBefore .slotSizer > *:not([style*="display: none"]):has( ~ *:not([style*="display: none"])) {
   margin-inline-end: var(--primitive-spacing-36);
 }
+.header .slotAbove {
+  margin: 0 calc(var(--primitive-spacing-36) * -1) var(--primitive-spacing-24) calc(var(--primitive-spacing-36) * -1);
+}
+.header .slotBelow {
+  margin: var(--primitive-spacing-18) calc(var(--primitive-spacing-36) * -1) 0 calc(var(--primitive-spacing-36) * -1);
+}
 .header.centered:not(.isPopupHeader):not(.wizard) .titlesRow {
   height: 5.875rem;
 }
@@ -85,12 +94,13 @@
   text-align: center;
 }
 .header.centered:not(.isPopupHeader).mini .title {
-  margin-top: calc(abs(-18px) / 2);
+  margin-top: calc(18px / 2);
 }
 :global(.enact-orientation-portrait) .header.centered:not(.isPopupHeader).standard .title {
-  margin-top: calc(abs(-18px) / -2);
+  margin-top: calc(18px / -2);
 }
 .header .title {
+  font-family: "Limestone Title", "Limestone";
   margin: 0;
 }
 .header .subtitle {
@@ -101,18 +111,6 @@
   margin-left: 0;
   margin-right: var(--primitive-spacing-6);
 }
-.header .slotAbove {
-  margin: 0 calc(var(--primitive-spacing-36) * -1) var(--primitive-spacing-24) calc(var(--primitive-spacing-36) * -1);
-}
-.header .slotAfter {
-  text-align: right;
-}
-:global(.enact-locale-right-to-left) .header .slotAfter {
-  text-align: left;
-}
-.header .slotBelow {
-  margin: var(--primitive-spacing-18) calc(var(--primitive-spacing-36) * -1) 0 calc(var(--primitive-spacing-36) * -1);
-}
 .header.standard.slotBefore:not(.centered) .slotBefore,
 .header.wizard.slotBefore:not(.centered) .slotBefore {
   margin-left: 0;
@@ -154,6 +152,10 @@
 }
 .header.compact .title {
   padding: 0;
+  font-size: 1.875rem;
+}
+:global(.enact-locale-non-latin) .header.compact .title {
+  font-size: 1.875rem;
 }
 .header.compact .titlesRow {
   padding: 0 0 1.75rem;
@@ -162,12 +164,6 @@
   padding: 0;
   margin-top: 0.25rem;
 }
-.header.compact .title {
-  font-size: 1.875rem;
-}
-:global(.enact-locale-non-latin) .header.compact .title {
-  font-size: 1.875rem;
-}
 .header.compact.slotBefore .slotBefore {
   margin-left: 0;
   margin-right: var(--primitive-spacing-12);
@@ -186,10 +182,10 @@
 }
 .header.compact.isPopupHeader.slotAfter {
   padding-left: 1.25rem;
-  padding-right: NaNrem - var(--primitive-spacing-24));
+  padding-right: calc(60px - var(--primitive-spacing-24));
 }
 :global(.enact-locale-right-to-left) .header.compact.isPopupHeader.slotAfter {
-  padding-left: NaNrem - var(--primitive-spacing-24));
+  padding-left: calc(60px - var(--primitive-spacing-24));
   padding-right: 1.25rem;
 }
 .header.wizard {
@@ -197,20 +193,36 @@
   padding: 3.2875rem 2.75rem 0.125rem 2.75rem;
 }
 .header.wizard.noSubtitle {
-  padding-bottom: NaNrem + var(--primitive-spacing-6));
+  padding-bottom: calc(70.2px + var(--primitive-spacing-6));
 }
 .header.wizard .titleContainer:nth-child(2) {
   top: 0;
   position: absolute;
   width: 100%;
 }
+.header.wizard .titlesRow {
+  padding-bottom: 70.2px;
+}
 .header.wizard .title {
-  font-size: 2.25rem;
   padding: 0;
+  min-height: 3rem;
+  font-size: 2.25rem;
 }
 :global(.enact-locale-non-latin) .header.wizard .title {
   font-size: 2.25rem;
 }
+:global(.enact-locale-km) .header.wizard .title {
+  min-height: 1.5em;
+}
+:global(.enact-locale-si) .header.wizard .title {
+  min-height: 1.5em;
+}
+:global(.enact-locale-th) .header.wizard .title {
+  min-height: 1.5em;
+}
+:global(.enact-locale-vi) .header.wizard .title {
+  min-height: 1.5em;
+}
 .header.wizard .subtitle {
   padding: 0;
 }
@@ -219,7 +231,7 @@
 }
 :global(.enact-orientation-portrait) .header.wizard.slotBefore .slotBefore,
 :global(.enact-orientation-portrait) .header.wizard.slotAfter .slotAfter {
-  margin-top: NaNrem + -18px) * -1);
+  margin-top: calc((132px + -18px) * -1);
 }
 .header.mini {
   margin: 0 0 0.75rem 0;

package/Panels/Panel.module.css

@@ -12,7 +12,7 @@
 }
 .panel .body {
   position: relative;
-  padding: 0 NaNrem - var(--primitive-spacing-36));
+  padding: 0 calc(132px - var(--primitive-spacing-36));
   flex: 1;
   min-height: 0;
   opacity: 0;

package/Panels/index.d.ts

@@ -3,7 +3,7 @@
 import { RoutableProps as ui_Routable_RoutableProps } from "@enact/ui/Routable";
 import { SpotlightContainerDecoratorProps as spotlight_SpotlightContainerDecorator_SpotlightContainerDecoratorProps } from "@enact/spotlight/SpotlightContainerDecorator";
 import { SlottableProps as ui_Slottable_SlottableProps } from "@enact/ui/Slottable";
-import { SkinnableProps as limestone_Skinnable_SkinnableProps } from "limestone/Skinnable";
+import { SkinnableProps as limestone_Skinnable_SkinnableProps } from "@enact/limestone/Skinnable";
 import * as React from "react";
 import { RouteProps as ui_Routable_RouteProps } from "@enact/ui/Routable";
 import { Arranger as ui_ViewManager_Arranger } from "@enact/ui/ViewManager";

package/Picker/Picker.d.ts

@@ -2,7 +2,7 @@
 
 import * as React from "react";
 import { ChangeableProps as ui_Changeable_ChangeableProps } from "@enact/ui/Changeable";
-import { MarqueeControllerProps as limestone_Marquee_MarqueeControllerProps } from "limestone/Marquee";
+import { MarqueeControllerProps as limestone_Marquee_MarqueeControllerProps } from "@enact/limestone/Marquee";
 
 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;

package/Popup/Popup.module.css

@@ -8,7 +8,7 @@
   font-family: "Limestone";
   font-weight: normal;
   font-size: var(--primitive-font-size-60);
-  line-height: 1.4em;
+  line-height: 1.34em;
   padding: var(--primitive-spacing-48) var(--primitive-spacing-72);
   box-sizing: border-box;
   pointer-events: auto;
@@ -35,6 +35,9 @@
 :global(.enact-locale-ja) .popup .body {
   line-break: strict;
 }
+.popup:global(.largeText) .body {
+  font-size: var(--primitive-font-size-72);
+}
 .popup.bottom .body,
 .popup.top .body {
   max-width: 100%;

package/PopupTabLayout/PopupTabLayout.d.ts

@@ -1,12 +1,12 @@
 // Type definitions for limestone/PopupTabLayout
 
-import { SkinnableProps as limestone_Skinnable_SkinnableProps } from "limestone/Skinnable";
-import { TabProps as limestone_TabLayout_TabProps } from "limestone/TabLayout";
+import { SkinnableProps as limestone_Skinnable_SkinnableProps } from "@enact/limestone/Skinnable";
+import { TabProps as limestone_TabLayout_TabProps } from "@enact/limestone/TabLayout";
 import * as React from "react";
-import { PanelsProps as limestone_Panels_PanelsProps } from "limestone/Panels";
-import { PanelProps as limestone_Panels_PanelProps } from "limestone/Panels";
-import { PopupProps as limestone_Popup_PopupProps } from "limestone/Popup";
-import { TabLayoutProps as limestone_TabLayout_TabLayoutProps } from "limestone/TabLayout";
+import { PanelsProps as limestone_Panels_PanelsProps } from "@enact/limestone/Panels";
+import { PanelProps as limestone_Panels_PanelProps } from "@enact/limestone/Panels";
+import { PopupProps as limestone_Popup_PopupProps } from "@enact/limestone/Popup";
+import { TabLayoutProps as limestone_TabLayout_TabLayoutProps } from "@enact/limestone/TabLayout";
 
 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;

package/PopupTabLayout/PopupTabLayout.module.css

@@ -47,7 +47,7 @@
   border-radius: var(--semantic-radius-container);
 }
 .popupTabLayout:global(.neutral) .content .panels::before {
-  border-radius: var(--semantic-radius-popup);
+  border-radius: var(--semantic-radius-overlay);
 }
 .popupTabLayout:global(.neutral) .tabs,
 .popupTabLayout:global(.neutral) .content .panels::before {
@@ -78,7 +78,7 @@
   border-radius: var(--semantic-radius-container);
 }
 :global(.enact-a11y-high-contrast) .popupTabLayout:global(.neutral):global(.highContrast) .content .panels::before {
-  border-radius: var(--semantic-radius-popup);
+  border-radius: var(--semantic-radius-overlay);
 }
 :global(.enact-a11y-high-contrast) .popupTabLayout:global(.neutral):global(.highContrast) .tabs,
 :global(.enact-a11y-high-contrast) .popupTabLayout:global(.neutral):global(.highContrast) .content .panels::before {
@@ -109,7 +109,7 @@
   border-radius: var(--semantic-radius-container);
 }
 .popupTabLayout:global(.light) .content .panels::before {
-  border-radius: var(--semantic-radius-popup);
+  border-radius: var(--semantic-radius-overlay);
 }
 .popupTabLayout:global(.light) .tabs,
 .popupTabLayout:global(.light) .content .panels::before {
@@ -143,7 +143,7 @@
   border-radius: var(--semantic-radius-container);
 }
 .popupTabLayout:global(.game) .content .panels::before {
-  border-radius: var(--semantic-radius-popup);
+  border-radius: var(--semantic-radius-overlay);
 }
 .popupTabLayout:global(.game) .tabs,
 .popupTabLayout:global(.game) .content .panels::before {
@@ -176,7 +176,7 @@
   border-radius: var(--semantic-radius-container);
 }
 :global(.green) .popupTabLayout:global(.game) .content .panels::before {
-  border-radius: var(--semantic-radius-popup);
+  border-radius: var(--semantic-radius-overlay);
 }
 :global(.green) .popupTabLayout:global(.game) .tabs,
 :global(.green) .popupTabLayout:global(.game) .content .panels::before {
@@ -209,7 +209,7 @@
   border-radius: var(--semantic-radius-container);
 }
 :global(.orange) .popupTabLayout:global(.game) .content .panels::before {
-  border-radius: var(--semantic-radius-popup);
+  border-radius: var(--semantic-radius-overlay);
 }
 :global(.orange) .popupTabLayout:global(.game) .tabs,
 :global(.orange) .popupTabLayout:global(.game) .content .panels::before {

package/ProgressBar/ProgressBar.d.ts

@@ -1,6 +1,6 @@
 // Type definitions for limestone/ProgressBar
 
-import { SkinnableProps as limestone_Skinnable_SkinnableProps } from "limestone/Skinnable";
+import { SkinnableProps as limestone_Skinnable_SkinnableProps } from "@enact/limestone/Skinnable";
 import * as React from "react";
 
 type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;