@enact/limestone 1.10.0 → 1.10.2

package/Input/tests/InputField-specs.js

@@ -259,7 +259,7 @@ describe('InputField Specs', function () {
       invalid: true,
       invalidMessage: "invalid message"
     }));
-    var invalidText = _react.screen.getByText('invalid message').parentElement.parentElement;
+    var invalidText = _react.screen.getByText('invalid message').parentElement.parentElement.parentElement;
     var expected = 'tooltipLabel';
     expect(invalidText).toBeInTheDocument();
     expect(invalidText).toHaveClass(expected);

package/Item/Item.d.ts

@@ -3,8 +3,8 @@
 import { ItemDecoratorProps as ui_Item_ItemDecoratorProps } from "@enact/ui/Item";
 import { SlottableProps as ui_Slottable_SlottableProps } from "@enact/ui/Slottable";
 import { SpottableProps as spotlight_Spottable_SpottableProps } from "@enact/spotlight/Spottable";
-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 { ItemBaseProps as ui_Item_ItemBaseProps } from "@enact/ui/Item";
 import * as React from "react";
 

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;
@@ -120,7 +120,8 @@
   line-height: 1.5em;
 }
 .item:global(.largeText) .label {
-  font-size: var(--primitive-font-size-54);
+  font-size: var(--primitive-font-size-58);
+  line-height: 1.2em;
 }
 .item.large {
   /* Needed to prevent global class being added in the DOM */
@@ -129,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;
@@ -149,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);
@@ -165,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;
@@ -209,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 {
@@ -221,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);
@@ -287,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 {
@@ -299,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);
@@ -365,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 {
@@ -377,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);
@@ -448,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);
@@ -460,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 {
@@ -530,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);
@@ -542,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 {
@@ -612,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);
@@ -624,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/KeyGuide/KeyGuide.module.css

@@ -62,6 +62,16 @@
 .keyGuide .imageItem .text .bodyText {
   margin: 0;
 }
+.keyGuide:global(.largeText) .item {
+  font-size: var(--primitive-font-size-72);
+}
+.keyGuide:global(.largeText) .item .slotBefore .red,
+.keyGuide:global(.largeText) .item .slotBefore .green,
+.keyGuide:global(.largeText) .item .slotBefore .yellow,
+.keyGuide:global(.largeText) .item .slotBefore .blue {
+  width: calc(1.25rem * 1.2);
+  height: calc(0.25rem * 1.2);
+}
 .keyGuide:global(.neutral) {
   background: var(--semantic-color-surface-overlay-default);
   outline-color: transparent;

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 {
@@ -157,13 +154,13 @@ Motion Mixins
 .mediaOverlay .text {
   font-family: "Limestone";
   font-size: var(--primitive-font-size-48);
-  line-height: 1.3em;
+  line-height: 1.25rem;
   margin-bottom: var(--primitive-spacing-36);
 }
 :global(.enact-locale-non-latin) .mediaOverlay .text {
   font-family: "Limestone";
   font-size: var(--primitive-font-size-48);
-  line-height: 1.3em;
+  line-height: 1.25rem;
 }
 .mediaOverlay .progressBar {
   position: absolute;
@@ -195,12 +192,24 @@ Motion Mixins
 .mediaOverlay .subtitle {
   font-family: "Limestone";
   font-size: var(--primitive-font-size-48);
-  line-height: 1.3em;
+  line-height: 1.25rem;
 }
 :global(.enact-locale-non-latin) .mediaOverlay .subtitle {
   font-family: "Limestone";
   font-size: var(--primitive-font-size-48);
-  line-height: 1.3em;
+  line-height: 1.25rem;
+}
+.mediaOverlay:global(.largeText) .text {
+  font-size: var(--primitive-font-size-60);
+  line-height: 1.45833rem;
+}
+.mediaOverlay:global(.largeText) .caption,
+.mediaOverlay:global(.largeText) .title {
+  font-size: var(--primitive-font-size-72);
+}
+.mediaOverlay:global(.largeText) .subtitle {
+  font-size: var(--primitive-font-size-58);
+  line-height: 1.45833rem;
 }
 .mediaOverlay:global(.neutral) .bg {
   opacity: 0;

package/MediaPlayer/MediaControls.module.css

@@ -24,6 +24,9 @@
 .controlsFrame .mediaControls .button .icon {
   --icon-size: 2.25rem;
 }
+.controlsFrame .mediaControls .button:global(.largeText) .icon {
+  --icon-size: 2.70833rem;
+}
 .controlsFrame .actionGuide {
   height: 3.5rem;
   padding-bottom: 0;

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;
@@ -23,6 +23,10 @@
 :global(.enact-locale-vi) .times {
   line-height: 1.7em;
 }
+:global(.largeText) .times {
+  font-size: var(--primitive-font-size-58);
+  line-height: 1.45833rem;
+}
 .times > * {
   display: inline-block;
 }

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;
 }
@@ -50,6 +50,10 @@
   justify-content: space-evenly;
   padding: 0 var(--primitive-spacing-36);
   width: 3.5rem;
+  font-size: var(--primitive-font-size-60);
+}
+:global(.largeText) .pageViews.number .stepsRow .pageNumber {
+  font-size: var(--primitive-font-size-72);
 }
 .pageViews.number .stepsRow .pageNumber .separator {
   width: 0.6875rem;
@@ -57,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

@@ -17,25 +17,6 @@
 .header .titlesRow .back {
   margin-inline-start: 0;
 }
-.header .titlesRow .back:global(.largeText) {
-  font-family: "Limestone";
-  font-size: var(--primitive-font-size-60);
-  font-style: normal;
-  font-weight: var(--primitive-font-weight-semibold);
-  font-kerning: normal;
-  height: 2.75rem;
-  line-height: 2.5rem;
-  min-width: 2.75rem;
-}
-:global(.enact-locale-non-latin) .header .titlesRow .back:global(.largeText) {
-  font-family: "Limestone";
-}
-:global(.enact-locale-non-latin) .header .titlesRow .back:global(.largeText) {
-  font-family: "Limestone";
-  font-size: var(--primitive-font-size-54);
-  font-style: normal;
-  font-weight: var(--primitive-font-weight-bold);
-}
 .header .titlesRow .close {
   margin-inline-end: 0;
 }
@@ -58,9 +39,6 @@
   align-items: center;
   height: 4.25rem;
 }
-.header.wizard .titlesRow {
-  padding-bottom: 70.2px;
-}
 .header .slotBefore,
 .header .slotAfter,
 .header .slotSizer {
@@ -72,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;
 }
@@ -103,7 +93,14 @@
 .header.centered:not(.isPopupHeader) .slotBelow {
   text-align: center;
 }
+.header.centered:not(.isPopupHeader).mini .title {
+  margin-top: calc(18px / 2);
+}
+:global(.enact-orientation-portrait) .header.centered:not(.isPopupHeader).standard .title {
+  margin-top: calc(18px / -2);
+}
 .header .title {
+  font-family: "Limestone Title", "Limestone";
   margin: 0;
 }
 .header .subtitle {
@@ -114,38 +111,22 @@
   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.mini.slotBefore:not(.centered) .slotBefore,
 .header.wizard.slotBefore:not(.centered) .slotBefore {
   margin-left: 0;
   margin-right: var(--primitive-spacing-36);
 }
 :global(.enact-locale-right-to-left) .header.standard.slotBefore:not(.centered) .slotBefore,
-:global(.enact-locale-right-to-left) .header.mini.slotBefore:not(.centered) .slotBefore,
 :global(.enact-locale-right-to-left) .header.wizard.slotBefore:not(.centered) .slotBefore {
   margin-left: var(--primitive-spacing-36);
   margin-right: 0;
 }
 .header.standard.slotAfter:not(.centered) .slotAfter,
-.header.mini.slotAfter:not(.centered) .slotAfter,
 .header.wizard.slotAfter:not(.centered) .slotAfter {
   margin-left: var(--primitive-spacing-36);
   margin-right: 0;
 }
 :global(.enact-locale-right-to-left) .header.standard.slotAfter:not(.centered) .slotAfter,
-:global(.enact-locale-right-to-left) .header.mini.slotAfter:not(.centered) .slotAfter,
 :global(.enact-locale-right-to-left) .header.wizard.slotAfter:not(.centered) .slotAfter {
   margin-left: 0;
   margin-right: var(--primitive-spacing-36);
@@ -171,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;
@@ -179,34 +164,28 @@
   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:not(.centered) .slotBefore {
+.header.compact.slotBefore .slotBefore {
   margin-left: 0;
-  margin-right: var(--primitive-spacing-24);
+  margin-right: var(--primitive-spacing-12);
 }
-:global(.enact-locale-right-to-left) .header.compact.slotBefore:not(.centered) .slotBefore {
-  margin-left: var(--primitive-spacing-24);
+:global(.enact-locale-right-to-left) .header.compact.slotBefore .slotBefore {
+  margin-left: var(--primitive-spacing-12);
   margin-right: 0;
 }
-.header.compact.slotAfter:not(.centered) .slotAfter {
-  margin-left: var(--primitive-spacing-30);
+.header.compact.slotAfter .slotAfter {
+  margin-left: var(--primitive-spacing-12);
   margin-right: 0;
 }
-:global(.enact-locale-right-to-left) .header.compact.slotAfter:not(.centered) .slotAfter {
+:global(.enact-locale-right-to-left) .header.compact.slotAfter .slotAfter {
   margin-left: 0;
-  margin-right: var(--primitive-spacing-30);
+  margin-right: var(--primitive-spacing-12);
 }
 .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 {
@@ -214,26 +193,46 @@
   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;
 }
 .header.wizard.centered .subtitle {
   text-align: center;
 }
+:global(.enact-orientation-portrait) .header.wizard.slotBefore .slotBefore,
+:global(.enact-orientation-portrait) .header.wizard.slotAfter .slotAfter {
+  margin-top: calc((132px + -18px) * -1);
+}
 .header.mini {
   margin: 0 0 0.75rem 0;
   padding: 0.86458rem 1.25rem 0.55208rem 1.25rem;
@@ -250,6 +249,25 @@
 :global(.enact-locale-non-latin) .header.mini .title {
   font-size: 1.875rem;
 }
+.header.mini .title:not(.isPopupHeader) {
+  margin-top: calc(abs(-18px) / 2);
+}
+.header.mini.slotBefore .slotBefore {
+  margin-left: 0;
+  margin-right: var(--primitive-spacing-12);
+}
+:global(.enact-locale-right-to-left) .header.mini.slotBefore .slotBefore {
+  margin-left: var(--primitive-spacing-12);
+  margin-right: 0;
+}
+.header.mini.slotAfter .slotAfter {
+  margin-left: var(--primitive-spacing-12);
+  margin-right: 0;
+}
+:global(.enact-locale-right-to-left) .header.mini.slotAfter .slotAfter {
+  margin-left: 0;
+  margin-right: var(--primitive-spacing-12);
+}
 .header.mini.withSubtitle:not(.noSubtitle) .titlesRow {
   padding-bottom: 70.2px;
 }

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";