@enact/limestone 1.10.0 → 1.10.2

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 {
@@ -64,6 +64,9 @@
 .popupTabLayout:global(.neutral) .tabGroup .tab .icon {
   --icon-size: 2rem;
 }
+.popupTabLayout:global(.neutral) .tabGroup .tab:global(.largeText) .icon {
+  --icon-size: 2.4rem;
+}
 :global(.noAnimation) .popupTabLayout:global(.neutral) .tabs,
 :global(.noAnimation) .popupTabLayout:global(.neutral) .content .panels::before {
   box-shadow: none;
@@ -75,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 {
@@ -92,6 +95,9 @@
 :global(.enact-a11y-high-contrast) .popupTabLayout:global(.neutral):global(.highContrast) .tabGroup .tab .icon {
   --icon-size: 2rem;
 }
+:global(.enact-a11y-high-contrast) .popupTabLayout:global(.neutral):global(.highContrast) .tabGroup .tab:global(.largeText) .icon {
+  --icon-size: 2.4rem;
+}
 :global(.noAnimation) :global(.enact-a11y-high-contrast) .popupTabLayout:global(.neutral):global(.highContrast) .tabs,
 :global(.noAnimation) :global(.enact-a11y-high-contrast) .popupTabLayout:global(.neutral):global(.highContrast) .content .panels::before {
   box-shadow: none;
@@ -103,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 {
@@ -120,6 +126,9 @@
 .popupTabLayout:global(.light) .tabGroup .tab .icon {
   --icon-size: 2rem;
 }
+.popupTabLayout:global(.light) .tabGroup .tab:global(.largeText) .icon {
+  --icon-size: 2.4rem;
+}
 :global(.noAnimation) .popupTabLayout:global(.light) .tabs,
 :global(.noAnimation) .popupTabLayout:global(.light) .content .panels::before {
   box-shadow: none;
@@ -134,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 {
@@ -151,6 +160,9 @@
 .popupTabLayout:global(.game) .tabGroup .tab .icon {
   --icon-size: 2rem;
 }
+.popupTabLayout:global(.game) .tabGroup .tab:global(.largeText) .icon {
+  --icon-size: 2.4rem;
+}
 :global(.noAnimation) .popupTabLayout:global(.game) .tabs,
 :global(.noAnimation) .popupTabLayout:global(.game) .content .panels::before {
   box-shadow: none;
@@ -164,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 {
@@ -181,6 +193,9 @@
 :global(.green) .popupTabLayout:global(.game) .tabGroup .tab .icon {
   --icon-size: 2rem;
 }
+:global(.green) .popupTabLayout:global(.game) .tabGroup .tab:global(.largeText) .icon {
+  --icon-size: 2.4rem;
+}
 :global(.noAnimation) :global(.green) .popupTabLayout:global(.game) .tabs,
 :global(.noAnimation) :global(.green) .popupTabLayout:global(.game) .content .panels::before {
   box-shadow: none;
@@ -194,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 {
@@ -211,6 +226,9 @@
 :global(.orange) .popupTabLayout:global(.game) .tabGroup .tab .icon {
   --icon-size: 2rem;
 }
+:global(.orange) .popupTabLayout:global(.game) .tabGroup .tab:global(.largeText) .icon {
+  --icon-size: 2.4rem;
+}
 :global(.noAnimation) :global(.orange) .popupTabLayout:global(.game) .tabs,
 :global(.noAnimation) :global(.orange) .popupTabLayout:global(.game) .content .panels::before {
   box-shadow: none;

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

package/ProgressBar/ProgressBar.module.css

@@ -55,7 +55,7 @@
   background-color: color(from var(--semantic-color-surface-default-track) srgb r g b / 0.7);
 }
 .progressBar:global(.neutral) .fill {
-  background-color: var(--semantic-color-surface-accent);
+  background-color: var(--semantic-color-surface-white);
 }
 .progressBar:global(.neutral) .load {
   background-color: color(from var(--semantic-color-surface-white) srgb r g b / 0.5);
@@ -69,7 +69,7 @@
   border-color: color(from var(--semantic-color-surface-default-track) srgb r g b / 0.7);
 }
 .progressBar:global(.neutral).radial .fill {
-  border-color: var(--semantic-color-surface-accent);
+  border-color: var(--semantic-color-surface-white);
 }
 .progressBar:global(.neutral).radial .load {
   border-color: color(from var(--semantic-color-surface-white) srgb r g b / 0.5);
@@ -88,7 +88,7 @@
   background-color: color(from var(--semantic-color-surface-default-track) srgb r g b / 0.7);
 }
 :global(.enact-a11y-high-contrast) .progressBar:global(.neutral):global(.highContrast) .fill {
-  background-color: var(--semantic-color-surface-accent);
+  background-color: var(--semantic-color-surface-white);
 }
 :global(.enact-a11y-high-contrast) .progressBar:global(.neutral):global(.highContrast) .load {
   background-color: color(from var(--semantic-color-surface-white) srgb r g b / 0.5);
@@ -102,7 +102,7 @@
   border-color: color(from var(--semantic-color-surface-default-track) srgb r g b / 0.7);
 }
 :global(.enact-a11y-high-contrast) .progressBar:global(.neutral):global(.highContrast).radial .fill {
-  border-color: var(--semantic-color-surface-accent);
+  border-color: var(--semantic-color-surface-white);
 }
 :global(.enact-a11y-high-contrast) .progressBar:global(.neutral):global(.highContrast).radial .load {
   border-color: color(from var(--semantic-color-surface-white) srgb r g b / 0.5);
@@ -121,7 +121,7 @@
   background-color: color(from var(--semantic-color-surface-default-track) srgb r g b / 0.7);
 }
 .progressBar:global(.light) .fill {
-  background-color: var(--semantic-color-surface-accent);
+  background-color: var(--semantic-color-surface-white);
 }
 .progressBar:global(.light) .load {
   background-color: color(from var(--semantic-color-surface-white) srgb r g b / 0.5);
@@ -135,7 +135,7 @@
   border-color: color(from var(--semantic-color-surface-default-track) srgb r g b / 0.7);
 }
 .progressBar:global(.light).radial .fill {
-  border-color: var(--semantic-color-surface-accent);
+  border-color: var(--semantic-color-surface-white);
 }
 .progressBar:global(.light).radial .load {
   border-color: color(from var(--semantic-color-surface-white) srgb r g b / 0.5);
@@ -159,7 +159,7 @@
   background-color: color(from var(--semantic-color-surface-default-track) srgb r g b / 0.7);
 }
 .progressBar:global(.game) .fill {
-  background-color: var(--semantic-color-surface-accent);
+  background-color: var(--semantic-color-surface-white);
 }
 .progressBar:global(.game) .load {
   background-color: color(from var(--semantic-color-surface-white) srgb r g b / 0.5);
@@ -173,7 +173,7 @@
   border-color: color(from var(--semantic-color-surface-default-track) srgb r g b / 0.7);
 }
 .progressBar:global(.game).radial .fill {
-  border-color: var(--semantic-color-surface-accent);
+  border-color: var(--semantic-color-surface-white);
 }
 .progressBar:global(.game).radial .load {
   border-color: color(from var(--semantic-color-surface-white) srgb r g b / 0.5);
@@ -196,7 +196,7 @@
   background-color: color(from var(--semantic-color-surface-default-track) srgb r g b / 0.7);
 }
 :global(.green) .progressBar:global(.game) .fill {
-  background-color: var(--semantic-color-surface-accent);
+  background-color: var(--semantic-color-surface-white);
 }
 :global(.green) .progressBar:global(.game) .load {
   background-color: color(from var(--semantic-color-surface-white) srgb r g b / 0.5);
@@ -210,7 +210,7 @@
   border-color: color(from var(--semantic-color-surface-default-track) srgb r g b / 0.7);
 }
 :global(.green) .progressBar:global(.game).radial .fill {
-  border-color: var(--semantic-color-surface-accent);
+  border-color: var(--semantic-color-surface-white);
 }
 :global(.green) .progressBar:global(.game).radial .load {
   border-color: color(from var(--semantic-color-surface-white) srgb r g b / 0.5);
@@ -233,7 +233,7 @@
   background-color: color(from var(--semantic-color-surface-default-track) srgb r g b / 0.7);
 }
 :global(.orange) .progressBar:global(.game) .fill {
-  background-color: var(--semantic-color-surface-accent);
+  background-color: var(--semantic-color-surface-white);
 }
 :global(.orange) .progressBar:global(.game) .load {
   background-color: color(from var(--semantic-color-surface-white) srgb r g b / 0.5);
@@ -247,7 +247,7 @@
   border-color: color(from var(--semantic-color-surface-default-track) srgb r g b / 0.7);
 }
 :global(.orange) .progressBar:global(.game).radial .fill {
-  border-color: var(--semantic-color-surface-accent);
+  border-color: var(--semantic-color-surface-white);
 }
 :global(.orange) .progressBar:global(.game).radial .load {
   border-color: color(from var(--semantic-color-surface-white) srgb r g b / 0.5);

package/ProgressBar/ProgressBarTooltip.module.css

@@ -49,10 +49,10 @@
   left: 50%;
 }
 .tooltip.radial.center.above {
-  bottom: calc(100% + calc(var(--primitive-spacing-12) + 12px) );
+  bottom: calc(100% +  calc(var(--primitive-spacing-12) + 12px) );
 }
 .tooltip.radial.center.below {
-  top: calc(100% + calc(var(--primitive-spacing-12) + 12px) );
+  top: calc(100% +  calc(var(--primitive-spacing-12) + 12px) );
 }
 .tooltip.radial.left,
 .tooltip.radial.before,
@@ -62,25 +62,25 @@
 .tooltip.radial.left.above,
 .tooltip.radial.before.above,
 :global(.enact-locale-right-to-left) .tooltip.radial.after.above {
-  bottom: calc(100% + calc(var(--primitive-spacing-12) + 12px) );
+  bottom: calc(100% +  calc(var(--primitive-spacing-12) + 12px) );
 }
 .tooltip.radial.left.below,
 .tooltip.radial.before.below,
 :global(.enact-locale-right-to-left) .tooltip.radial.after.below {
-  top: calc(100% + calc(var(--primitive-spacing-12) + 12px) );
+  top: calc(100% +  calc(var(--primitive-spacing-12) + 12px) );
 }
 .tooltip.radial.right,
 .tooltip.radial.after,
 :global(.enact-locale-right-to-left) .tooltip.radial.before {
-  left: calc(100% + calc(var(--primitive-spacing-12) + 12px) );
+  left: calc(100% +  calc(var(--primitive-spacing-12) + 12px) );
 }
 .tooltip.radial.right.above,
 .tooltip.radial.after.above,
 :global(.enact-locale-right-to-left) .tooltip.radial.before.above {
-  bottom: calc(100% + calc(var(--primitive-spacing-12) + 12px) );
+  bottom: calc(100% +  calc(var(--primitive-spacing-12) + 12px) );
 }
 .tooltip.radial.right.below,
 .tooltip.radial.after.below,
 :global(.enact-locale-right-to-left) .tooltip.radial.before.below {
-  top: calc(100% + calc(var(--primitive-spacing-12) + 12px) );
+  top: calc(100% +  calc(var(--primitive-spacing-12) + 12px) );
 }

package/ProgressButton/ProgressButton.d.ts

@@ -1,8 +1,8 @@
 // Type definitions for limestone/ProgressButton
 
 import * as React from "react";
-import { ButtonBaseProps as limestone_Button_ButtonBaseProps } from "limestone/Button";
-import { ProgressBarProps as limestone_ProgressBar_ProgressBarProps } from "limestone/ProgressBar";
+import { ButtonBaseProps as limestone_Button_ButtonBaseProps } from "@enact/limestone/Button";
+import { ProgressBarProps as limestone_ProgressBar_ProgressBarProps } from "@enact/limestone/ProgressBar";
 
 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/QuickGuidePanels/QuickGuidePanels.module.css

@@ -18,7 +18,7 @@
 .quickGuidePanels .navigationButtonContainer {
   align-items: center;
   height: 2.75rem;
-  margin-top: calc(100vh / 2 - 1.375rem );
+  margin-top: calc(100vh / 2 -  1.375rem );
   z-index: 10;
 }
 .quickGuidePanels .navigationButtonContainer .navigationButton {

package/RadioItem/RadioItem.d.ts

@@ -2,7 +2,7 @@
 
 import { ToggleableProps as ui_Toggleable_ToggleableProps } from "@enact/ui/Toggleable";
 import * as React from "react";
-import { ItemProps as limestone_Item_ItemProps } from "limestone/Item";
+import { ItemProps as limestone_Item_ItemProps } from "@enact/limestone/Item";
 
 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/RadioItem/RadioItem.module.css

@@ -8,6 +8,9 @@
   border-radius: var(--semantic-radius-full);
   font-size: var(--primitive-font-size-48);
 }
+.radioItem .icon:global(.largeText) {
+  font-size: var(--primitive-font-size-56);
+}
 .radioItem:global(.neutral) .icon {
   color: transparent;
   background-color: transparent;
@@ -125,8 +128,8 @@
 }
 .radioItem:global(.game).selected .icon {
   color: var(--semantic-color-on-surface-main-selected);
-  background-color: var(--semantic-color-surface-highlight);
-  box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-highlight);
+  background-color: #8b31d7;
+  box-shadow: 0 0 0 0.08333rem #8b31d7;
 }
 .radioItem:global(.game).selected .bg {
   background-color: transparent;
@@ -140,8 +143,8 @@
 :global(.spotlight-input-key) .radioItem:global(.game):global(.spottable):focus.selected .icon,
 :global(.spotlight-input-mouse) .radioItem:global(.game):global(.spottable):focus.selected .icon {
   color: var(--semantic-color-on-surface-main-selected);
-  background-color: var(--semantic-color-surface-highlight);
-  box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-highlight);
+  background-color: #8b31d7;
+  box-shadow: 0 0 0 0.08333rem #8b31d7;
 }
 :global(.spotlight-input-touch) .radioItem:global(.game):global(.spottable):active .icon {
   color: transparent;
@@ -150,8 +153,8 @@
 }
 :global(.spotlight-input-touch) .radioItem:global(.game):global(.spottable):active.selected .icon {
   color: var(--semantic-color-on-surface-main-selected);
-  background-color: var(--semantic-color-surface-highlight);
-  box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-highlight);
+  background-color: #8b31d7;
+  box-shadow: 0 0 0 0.08333rem #8b31d7;
 }
 :global(.green) .radioItem:global(.game) {
   --semantic-color-surface-default: #1F2C24;
@@ -164,8 +167,8 @@
 }
 :global(.green) .radioItem:global(.game).selected .icon {
   color: var(--semantic-color-on-surface-main-selected);
-  background-color: var(--semantic-color-surface-highlight);
-  box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-highlight);
+  background-color: #45c194;
+  box-shadow: 0 0 0 0.08333rem #45c194;
 }
 :global(.green) .radioItem:global(.game).selected .bg {
   background-color: transparent;
@@ -179,8 +182,8 @@
 :global(.spotlight-input-key) :global(.green) .radioItem:global(.game):global(.spottable):focus.selected .icon,
 :global(.spotlight-input-mouse) :global(.green) .radioItem:global(.game):global(.spottable):focus.selected .icon {
   color: var(--semantic-color-on-surface-main-selected);
-  background-color: var(--semantic-color-surface-highlight);
-  box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-highlight);
+  background-color: #45c194;
+  box-shadow: 0 0 0 0.08333rem #45c194;
 }
 :global(.spotlight-input-touch) :global(.green) .radioItem:global(.game):global(.spottable):active .icon {
   color: transparent;
@@ -189,8 +192,8 @@
 }
 :global(.spotlight-input-touch) :global(.green) .radioItem:global(.game):global(.spottable):active.selected .icon {
   color: var(--semantic-color-on-surface-main-selected);
-  background-color: var(--semantic-color-surface-highlight);
-  box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-highlight);
+  background-color: #45c194;
+  box-shadow: 0 0 0 0.08333rem #45c194;
 }
 :global(.orange) .radioItem:global(.game) {
   --semantic-color-surface-default: #422923;
@@ -203,8 +206,8 @@
 }
 :global(.orange) .radioItem:global(.game).selected .icon {
   color: var(--semantic-color-on-surface-main-selected);
-  background-color: var(--semantic-color-surface-highlight);
-  box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-highlight);
+  background-color: #d75431;
+  box-shadow: 0 0 0 0.08333rem #d75431;
 }
 :global(.orange) .radioItem:global(.game).selected .bg {
   background-color: transparent;
@@ -218,8 +221,8 @@
 :global(.spotlight-input-key) :global(.orange) .radioItem:global(.game):global(.spottable):focus.selected .icon,
 :global(.spotlight-input-mouse) :global(.orange) .radioItem:global(.game):global(.spottable):focus.selected .icon {
   color: var(--semantic-color-on-surface-main-selected);
-  background-color: var(--semantic-color-surface-highlight);
-  box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-highlight);
+  background-color: #d75431;
+  box-shadow: 0 0 0 0.08333rem #d75431;
 }
 :global(.spotlight-input-touch) :global(.orange) .radioItem:global(.game):global(.spottable):active .icon {
   color: transparent;
@@ -228,6 +231,6 @@
 }
 :global(.spotlight-input-touch) :global(.orange) .radioItem:global(.game):global(.spottable):active.selected .icon {
   color: var(--semantic-color-on-surface-main-selected);
-  background-color: var(--semantic-color-surface-highlight);
-  box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-highlight);
+  background-color: #d75431;
+  box-shadow: 0 0 0 0.08333rem #d75431;
 }

package/Scroller/EditableWrapper.js

@@ -613,8 +613,9 @@ var _EditableWrapper = exports.EditableWrapper = function EditableWrapper(props)
     if (selectItemBy === 'press') {
       if ((0, _pointer.getPointerMode)()) {
         _spotlight["default"].setPointerMode(false);
+        _spotlight["default"].focus(focusTarget);
       }
-      _spotlight["default"].focus(focusTarget);
+      if (focusTarget !== _spotlight["default"].getCurrent()) _spotlight["default"].focus(focusTarget);
       focusItem(focusTarget);
     }
     setTimeout(function () {

package/Scroller/Scroller.d.ts

@@ -221,6 +221,18 @@ corresponding internal elements and states of this component.
    * Scrolls to the container created by    when descendants get focused.
    */
   scrollToContentContainerOnFocus?: boolean;
+  /**
+ * Anchors the focused item to a fixed "focus position" while the content scrolls beneath it.
+ * 
+ * When set to  `'start'`  and  `direction`  is  `'horizontal'` , moving focus with 5-way keys keeps
+the focus indicator at a fixed slot near the start (left in LTR, right in RTL) edge of the
+scroller and scrolls the list so the newly focused item lands in that slot. At the end of the
+list, when the item can no longer reach the fixed slot, the list scrolls only to its last
+position so the focused item (including its full width) stays visible.
+ * 
+ * By default ( `undefined` ), the scroller scrolls just enough to bring the focused item into view.
+ */
+  stickTo?: "start";
   /**
    * Specifies how to show vertical scrollbar.
    */

package/Scroller/Scroller.js

@@ -448,6 +448,21 @@ _Scroller.propTypes = /** @lends limestone/Scroller.Scroller.prototype */{
    * @public
    */
   scrollToContentContainerOnFocus: _propTypes["default"].bool,
+  /**
+   * Anchors the focused item to a fixed "focus position" while the content scrolls beneath it.
+   *
+   * When set to `'start'` and `direction` is `'horizontal'`, moving focus with 5-way keys keeps
+   * the focus indicator at a fixed slot near the start (left in LTR, right in RTL) edge of the
+   * scroller and scrolls the list so the newly focused item lands in that slot. At the end of the
+   * list, when the item can no longer reach the fixed slot, the list scrolls only to its last
+   * position so the focused item (including its full width) stays visible.
+   *
+   * By default (`undefined`), the scroller scrolls just enough to bring the focused item into view.
+   *
+   * @type {('start')}
+   * @public
+   */
+  stickTo: _propTypes["default"].oneOf(['start']),
   /**
    * Specifies how to show vertical scrollbar.
    *

package/Scroller/Scroller.module.css

@@ -15,6 +15,16 @@
   border-radius: var(--primitive-radius-12);
   opacity: 0;
 }
+.focusableBody.hasVerticalScrollbar::before {
+  right: var(--scroll-scrollbar-size);
+}
+.focusableBody.hasHorizontalScrollbar::before {
+  bottom: var(--scroll-scrollbar-size);
+}
+:global(.enact-locale-right-to-left) .focusableBody.hasVerticalScrollbar::before {
+  right: 0;
+  left: var(--scroll-scrollbar-size);
+}
 :global(.spotlight-input-key):global(.spotlight-input-key) .focusableBody:global(.spottable):focus::before,
 :global(.spotlight-input-key):global(.spotlight-input-mouse) .focusableBody:global(.spottable):focus::before {
   background-color: color(from var(--semantic-color-surface-default-focused) srgb r g b / 0.1);