@enact/limestone 1.10.1 → 1.10.2

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

@@ -7,11 +7,9 @@
 .radioItem .icon {
   border-radius: var(--semantic-radius-full);
   font-size: var(--primitive-font-size-48);
-  --icon-size: 1.25rem;
 }
 .radioItem .icon:global(.largeText) {
   font-size: var(--primitive-font-size-56);
-  --icon-size: 1.5rem;
 }
 .radioItem:global(.neutral) .icon {
   color: transparent;
@@ -130,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;
@@ -145,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;
@@ -155,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;
@@ -169,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;
@@ -184,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;
@@ -194,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;
@@ -208,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;
@@ -223,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;
@@ -233,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/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/tests/Scroller-specs.js

@@ -245,4 +245,33 @@ describe('Scroller', function () {
       expect(verticalScrollbar).toHaveClass('vertical');
     });
   });
+  describe('stickTo', function () {
+    test('should compute a stick-to-start scroll position when a contained item is focused', function () {
+      var scrollToFn = global.Element.prototype.scrollTo;
+      global.Element.prototype.scrollTo = jest.fn();
+      var pointerSpy = jest.spyOn(_spotlight["default"], 'getPointerMode').mockReturnValue(false);
+      var currentSpy = jest.spyOn(_spotlight["default"], 'getCurrent');
+      (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Scroller["default"], {
+        direction: "horizontal",
+        scrollToContentContainerOnFocus: false,
+        stickTo: "start",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          style: {
+            width: '4000px'
+          },
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+            "data-testid": "stick-target",
+            children: "Target"
+          })
+        })
+      }));
+      var target = _react.screen.getByTestId('stick-target');
+      currentSpy.mockReturnValue(target);
+      _react.fireEvent.focusIn(target);
+      expect(target).toBeInTheDocument();
+      currentSpy.mockRestore();
+      pointerSpy.mockRestore();
+      global.Element.prototype.scrollTo = scrollToFn;
+    });
+  });
 });

package/Scroller/useThemeScroller.js

@@ -284,8 +284,11 @@ var useSpottable = function useSpottable(props, instances) {
       itemLeft = _getFocusedItemBounds.left,
       itemWidth = _getFocusedItemBounds.width;
     var rtl = props.rtl,
+      stickTo = props.stickTo,
       coordinateCoefficient = rtl && !(_platform["default"].chrome < 85) ? -1 : 1,
-      clientWidth = scrollContentHandle.current.scrollBounds.clientWidth,
+      _scrollContentHandle$ = scrollContentHandle.current.scrollBounds,
+      clientWidth = _scrollContentHandle$.clientWidth,
+      maxLeft = _scrollContentHandle$.maxLeft,
       rtlDirection = rtl ? -1 : 1,
       _scrollContentNode$ge = scrollContentNode.getBoundingClientRect(),
       containerLeft = _scrollContentNode$ge.left,
@@ -293,6 +296,18 @@ var useSpottable = function useSpottable(props, instances) {
       currentScrollLeft = rtl && coordinateCoefficient === 1 ? scrollContentHandle.current.scrollBounds.maxLeft - scrollLastPosition : scrollLastPosition,
       newItemLeft = coordinateCoefficient * scrollContentNode.scrollLeft + (itemLeft - containerLeft);
     var nextScrollLeft = scrollContentHandle.current.scrollPos.left;
+    if (stickTo === 'start') {
+      // Anchor the focused item to a fixed "focus position" near the start edge so the focus
+      // indicator stays put while the list scrolls beneath it. The offset matches the in-view
+      // threshold (`affordanceSize`) used by `calculatePositionOnFocus`.
+      var affordanceLeft = _resolution["default"].scale(_useScroll.affordanceSize);
+
+      // Position the item at the fixed slot, then clamp to the scroll bounds. Clamping handles
+      // the end of the list: the item can no longer reach the slot, so the list scrolls only to
+      // its last position while the focused item (including its full width) stays visible.
+      nextScrollLeft += rtlDirection * (newItemLeft - currentScrollLeft - affordanceLeft);
+      return Math.max(0, Math.min(nextScrollLeft, maxLeft));
+    }
     if (newItemLeft + itemWidth > clientWidth + currentScrollLeft && itemWidth < clientWidth) {
       // If focus is moved to an element outside of view area (to the right), scroller will move
       // to the right just enough to show the current `focusedItem`. This does not apply to
@@ -325,7 +340,11 @@ var useSpottable = function useSpottable(props, instances) {
     }
     var containerRect = (0, _utils.getRect)(containerNode);
     var itemRect = (0, _utils.getRect)(item);
-    if (horizontal && !(itemRect.left >= containerRect.left + _resolution["default"].scale(_useScroll.affordanceSize) && itemRect.right <= containerRect.right - _resolution["default"].scale(_useScroll.affordanceSize))) {
+
+    // When anchoring focus to a fixed slot, always recompute the scroll position so each newly
+    // focused item is pulled to the slot rather than only when it falls outside the view.
+    var stickToStart = props.stickTo === 'start';
+    if (horizontal && (stickToStart || !(itemRect.left >= containerRect.left + _resolution["default"].scale(_useScroll.affordanceSize) && itemRect.right <= containerRect.right - _resolution["default"].scale(_useScroll.affordanceSize)))) {
       scrollContentHandle.current.scrollPos.left = calculateScrollLeft(item, scrollPosition);
     }
     if (vertical && !(itemRect.top >= containerRect.top && itemRect.bottom <= containerRect.bottom - _resolution["default"].scale(_useScroll.affordanceSize))) {
@@ -363,6 +382,7 @@ var useThemeScroller = exports.useThemeScroller = function useThemeScroller(prop
   delete rest.scrollContentHandle;
   delete rest.setThemeScrollContentHandle;
   delete rest.spotlightId;
+  delete rest.stickTo;
 
   // Hooks
   var isScrollbarVisible = isHorizontalScrollbarVisible || isVerticalScrollbarVisible;

package/Slider/Slider.d.ts

@@ -2,7 +2,7 @@
 
 import { ChangeableProps as ui_Changeable_ChangeableProps } from "@enact/ui/Changeable";
 import { SpottableProps as spotlight_Spottable_SpottableProps } from "@enact/spotlight/Spottable";
-import { SkinnableProps as limestone_Skinnable_SkinnableProps } from "limestone/Skinnable";
+import { SkinnableProps as limestone_Skinnable_SkinnableProps } from "@enact/limestone/Skinnable";
 import { SlottableProps as ui_Slottable_SlottableProps } from "@enact/ui/Slottable";
 import { SliderDecoratorProps as ui_Slider_SliderDecoratorProps } from "@enact/ui/Slider";
 import * as React from "react";