@enact/limestone 1.3.0 → 1.10.0

package/Panels/Header.module.css

@@ -39,6 +39,25 @@
 .header .titlesRow .close {
   margin-inline-end: 0;
 }
+.header:not(.centered) .titlesRow {
+  height: 4.625rem;
+}
+:global(.enact-locale-km) .header:not(.centered) .titlesRow {
+  height: 5.125rem;
+}
+:global(.enact-locale-si) .header:not(.centered) .titlesRow {
+  height: 5.125rem;
+}
+:global(.enact-locale-th) .header:not(.centered) .titlesRow {
+  height: 5.125rem;
+}
+:global(.enact-locale-vi) .header:not(.centered) .titlesRow {
+  height: 5.125rem;
+}
+.header.isPopupHeader .titlesRow {
+  align-items: center;
+  height: 4.25rem;
+}
 .header.wizard .titlesRow {
   padding-bottom: 70.2px;
 }
@@ -50,11 +69,38 @@
 .header .slotSizer {
   display: inline-block;
 }
-.header.centered .title {
+.header .slotSizer > * {
+  margin: 0;
+}
+.header .slotAfter .slotSizer > *:not(:first-child) {
+  margin-inline-start: var(--primitive-spacing-36);
+}
+.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.centered:not(.isPopupHeader):not(.wizard) .titlesRow {
+  height: 5.875rem;
+}
+:global(.enact-locale-km) .header.centered:not(.isPopupHeader):not(.wizard) .titlesRow {
+  height: 6.375rem;
+}
+:global(.enact-locale-si) .header.centered:not(.isPopupHeader):not(.wizard) .titlesRow {
+  height: 6.375rem;
+}
+:global(.enact-locale-th) .header.centered:not(.isPopupHeader):not(.wizard) .titlesRow {
+  height: 6.375rem;
+}
+:global(.enact-locale-vi) .header.centered:not(.isPopupHeader):not(.wizard) .titlesRow {
+  height: 6.375rem;
+}
+.header.centered:not(.isPopupHeader):not(.wizard) .title {
   margin-top: var(--primitive-spacing-60);
 }
-.header.centered .slotAbove,
-.header.centered .slotBelow {
+.header.centered:not(.isPopupHeader) .slotAbove,
+.header.centered:not(.isPopupHeader) .slotBelow {
   text-align: center;
 }
 .header .title {
@@ -69,7 +115,7 @@
   margin-right: var(--primitive-spacing-6);
 }
 .header .slotAbove {
-  margin: 0 -0.75rem var(--primitive-spacing-24) -0.75rem;
+  margin: 0 calc(var(--primitive-spacing-36) * -1) var(--primitive-spacing-24) calc(var(--primitive-spacing-36) * -1);
 }
 .header .slotAfter {
   text-align: right;
@@ -78,45 +124,43 @@
   text-align: left;
 }
 .header .slotBelow {
-  margin: 0.375rem -0.75rem 0 -0.75rem;
+  margin: var(--primitive-spacing-18) calc(var(--primitive-spacing-36) * -1) 0 calc(var(--primitive-spacing-36) * -1);
 }
-.header .standard .slotBefore > *:first-child,
-.header .compact .slotBefore > *:first-child,
-.header .mini .slotBefore > *:first-child {
-  margin-inline-start: 0;
-}
-.header .standard .slotAfter > *:last-child,
-.header .compact .slotAfter > *:last-child,
-.header .mini .slotAfter > *:last-child {
-  margin-inline-end: 0;
-}
-.header.standard {
-  margin: 0;
-  padding: 2.0375rem 2.75rem 0.125rem 2.75rem;
-}
-.header.standard .subtitle,
-.header.standard .title {
-  padding: 0;
-}
-.header.standard .subtitle {
-  margin: 0.43125rem 0 0 0;
-}
-.header.standard.slotBefore:not(.centered) .slotBefore {
+.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.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.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.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);
 }
+.header.standard {
+  margin: 0;
+  padding: 2.0375rem 2.75rem 0.125rem 2.75rem;
+}
+.header.standard .subtitle,
+.header.standard .title {
+  padding: 0;
+}
+.header.standard .subtitle {
+  margin: 0;
+}
 .header.compact {
   margin: 0;
   padding: 1.28125rem 1.25rem 1.5px 1.25rem;
@@ -157,12 +201,20 @@
   margin-left: 0;
   margin-right: var(--primitive-spacing-30);
 }
+.header.compact.isPopupHeader.slotAfter {
+  padding-left: 1.25rem;
+  padding-right: NaNrem - var(--primitive-spacing-24));
+}
+:global(.enact-locale-right-to-left) .header.compact.isPopupHeader.slotAfter {
+  padding-left: NaNrem - var(--primitive-spacing-24));
+  padding-right: 1.25rem;
+}
 .header.wizard {
   margin: 0;
   padding: 3.2875rem 2.75rem 0.125rem 2.75rem;
 }
 .header.wizard.noSubtitle {
-  padding-bottom: calc( 70.2px + var(--primitive-spacing-6));
+  padding-bottom: NaNrem + var(--primitive-spacing-6));
 }
 .header.wizard .titleContainer:nth-child(2) {
   top: 0;

package/Panels/Panel.module.css

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

package/Panels/index.d.ts

@@ -361,14 +361,13 @@ export class Route extends React.Component<
   Merge<React.HTMLProps<HTMLElement>, RouteProps>
 > {}
 
-export interface PanelDecoratorProps
-  extends Merge<
-    Merge<
-      spotlight_SpotlightContainerDecorator_SpotlightContainerDecoratorProps,
-      ui_Slottable_SlottableProps
-    >,
-    limestone_Skinnable_SkinnableProps
-  > {}
+export interface PanelDecoratorProps extends Merge<
+  Merge<
+    spotlight_SpotlightContainerDecorator_SpotlightContainerDecoratorProps,
+    ui_Slottable_SlottableProps
+  >,
+  limestone_Skinnable_SkinnableProps
+> {}
 export function PanelDecorator<P>(
   Component: React.ComponentType<P> | string,
 ): React.ComponentType<P & PanelDecoratorProps>;

package/Picker/Picker.d.ts

@@ -166,11 +166,10 @@ export class PickerBase extends React.Component<
   Merge<React.HTMLProps<HTMLElement>, PickerBaseProps>
 > {}
 
-export interface PickerProps
-  extends Merge<
-    Merge<PickerBaseProps, ui_Changeable_ChangeableProps>,
-    limestone_Marquee_MarqueeControllerProps
-  > {
+export interface PickerProps extends Merge<
+  Merge<PickerBaseProps, ui_Changeable_ChangeableProps>,
+  limestone_Marquee_MarqueeControllerProps
+> {
   /**
    * Default index of the selected child.
    *

package/Picker/Picker.module.css

@@ -1,10 +1,10 @@
 .title {
-  margin-left: 1.875rem;
+  margin-left: calc(var(--primitive-spacing-36) + var(--primitive-spacing-36) + 18px);
   margin-right: var(--primitive-spacing-24);
 }
 :global(.enact-locale-right-to-left) .title {
   margin-left: var(--primitive-spacing-24);
-  margin-right: 1.875rem;
+  margin-right: calc(var(--primitive-spacing-36) + var(--primitive-spacing-36) + 18px);
 }
 .title.inlineTitle {
   display: inline-block;