@enact/limestone 1.10.0 → 1.10.1

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;
 }
@@ -103,6 +84,12 @@
 .header.centered:not(.isPopupHeader) .slotBelow {
   text-align: center;
 }
+.header.centered:not(.isPopupHeader).mini .title {
+  margin-top: calc(abs(-18px) / 2);
+}
+:global(.enact-orientation-portrait) .header.centered:not(.isPopupHeader).standard .title {
+  margin-top: calc(abs(-18px) / -2);
+}
 .header .title {
   margin: 0;
 }
@@ -127,25 +114,21 @@
   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);
@@ -185,21 +168,21 @@
 :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;
@@ -234,6 +217,10 @@
 .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: NaNrem + -18px) * -1);
+}
 .header.mini {
   margin: 0 0 0.75rem 0;
   padding: 0.86458rem 1.25rem 0.55208rem 1.25rem;
@@ -250,6 +237,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/PopupTabLayout/PopupTabLayout.module.css

@@ -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;
@@ -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;
@@ -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;
@@ -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;
@@ -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;
@@ -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/RadioItem/RadioItem.module.css

@@ -7,6 +7,11 @@
 .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;

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

package/Scroller/tests/Scroller-specs.js

@@ -1,7 +1,9 @@
 "use strict";
 
 require("@testing-library/jest-dom");
+var _spotlight = _interopRequireDefault(require("@enact/spotlight"));
 var _react = require("@testing-library/react");
+var _react2 = require("react");
 var _Scroller = _interopRequireDefault(require("../Scroller"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
@@ -66,7 +68,7 @@ describe('Scroller', function () {
     });
   });
   describe('focusable Scrollbar', function () {
-    test('should have focuable body and thumb when \'focusableScrollbar\' is "byEnter"', function () {
+    test('should have focusable body and thumb when \'focusableScrollbar\' is "byEnter"', function () {
       var id = 'scroller';
       (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Scroller["default"], {
         "data-testid": id,
@@ -86,7 +88,7 @@ describe('Scroller', function () {
       expect(scrollBody).toHaveClass(expected);
       expect(verticalScrollbar).toHaveClass(expected);
     });
-    test('should have focuable scroll thumb when \'focusableScrollbar\' is true', function () {
+    test('should have focusable scroll thumb when \'focusableScrollbar\' is true', function () {
       var id = 'scroller';
       (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Scroller["default"], {
         "data-testid": id,
@@ -101,6 +103,93 @@ describe('Scroller', function () {
       expect(scrollBody).not.toHaveClass(expected);
       expect(verticalScrollbar).toHaveClass(expected);
     });
+    describe('ScrollbarPlaceholder focus restoration', function () {
+      var focusSpy, pointerModeSpy, currentSpy, pausedSpy, containerSpy;
+      var placeholderElement;
+      var renderWithFocusedPlaceholder = function renderWithFocusedPlaceholder() {
+        placeholderElement = null;
+        currentSpy.mockImplementation(function () {
+          return placeholderElement;
+        });
+        var onRender = function onRender(id, phase) {
+          if (phase === 'mount') {
+            placeholderElement = document.querySelector('[data-spotlight-ignore-restore]');
+          }
+        };
+        var view = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.Profiler, {
+          id: "placeholder",
+          onRender: onRender,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Scroller["default"], {
+            focusableScrollbar: "byEnter",
+            verticalScrollbar: "visible",
+            children: contents
+          })
+        }));
+        currentSpy.mockImplementation(function () {
+          return null;
+        });
+        focusSpy.mockClear();
+        return view;
+      };
+      beforeEach(function () {
+        jest.useFakeTimers();
+        focusSpy = jest.spyOn(_spotlight["default"], 'focus').mockImplementation(function () {
+          return true;
+        });
+        pointerModeSpy = jest.spyOn(_spotlight["default"], 'getPointerMode').mockReturnValue(false);
+        currentSpy = jest.spyOn(_spotlight["default"], 'getCurrent').mockReturnValue(null);
+        pausedSpy = jest.spyOn(_spotlight["default"], 'isPaused').mockReturnValue(false);
+        containerSpy = jest.spyOn(_spotlight["default"], 'getActiveContainer').mockReturnValue('active-container');
+      });
+      afterEach(function () {
+        focusSpy.mockRestore();
+        pointerModeSpy.mockRestore();
+        currentSpy.mockRestore();
+        pausedSpy.mockRestore();
+        containerSpy.mockRestore();
+        jest.useRealTimers();
+      });
+      test('should focus the active container after the placeholder disappears', function () {
+        renderWithFocusedPlaceholder();
+        (0, _react.act)(function () {
+          return jest.advanceTimersByTime(0);
+        });
+        expect(focusSpy).toHaveBeenCalledWith('active-container', {
+          toOuterContainer: true
+        });
+      });
+      test('should not focus when pointer mode is active', function () {
+        pointerModeSpy.mockReturnValue(true);
+        renderWithFocusedPlaceholder();
+        (0, _react.act)(function () {
+          return jest.advanceTimersByTime(0);
+        });
+        expect(focusSpy).not.toHaveBeenCalled();
+      });
+      test('should defer focus while spotlight is paused, then focus after 400ms once it unpauses', function () {
+        pausedSpy.mockReturnValue(true);
+        renderWithFocusedPlaceholder();
+        (0, _react.act)(function () {
+          return jest.advanceTimersByTime(0);
+        });
+        expect(focusSpy).not.toHaveBeenCalled();
+        pausedSpy.mockReturnValue(false);
+        (0, _react.act)(function () {
+          return jest.advanceTimersByTime(400);
+        });
+        expect(focusSpy).toHaveBeenCalledWith('active-container', {
+          toOuterContainer: true
+        });
+      });
+      test('should not focus after the 400ms retry if spotlight is still paused', function () {
+        pausedSpy.mockReturnValue(true);
+        renderWithFocusedPlaceholder();
+        (0, _react.act)(function () {
+          return jest.advanceTimersByTime(400);
+        });
+        expect(focusSpy).not.toHaveBeenCalled();
+      });
+    });
   });
   describe('Scrollbar accessibility', function () {
     test('should set a custom "aria-label" to the scroll thumb in the horizontal scroll bar', function () {

package/Scroller/useThemeScroller.js

@@ -377,6 +377,9 @@ var useThemeScroller = exports.useThemeScroller = function useThemeScroller(prop
   var _ref3 = props.focusableScrollbar === 'byEnter' ? getFocusableBodyProps(scrollContainerRef, contentId, isScrollbarVisible) : {},
     setNavigableFilter = _ref3.setNavigableFilter,
     focusableBodyProps = _objectWithoutProperties(_ref3, _excluded2);
+  if (focusableBodyProps.className) {
+    focusableBodyProps.className = (0, _classnames["default"])(focusableBodyProps.className, isVerticalScrollbarVisible && _ScrollerModule["default"].hasVerticalScrollbar, isHorizontalScrollbarVisible && _ScrollerModule["default"].hasHorizontalScrollbar);
+  }
   (0, _react.useLayoutEffect)(function () {
     // Initial filter setting
     if (setNavigableFilter) {

package/Slider/Slider.module.css

@@ -169,9 +169,6 @@ Motion Mixins
 .slider.horizontal .minMax {
   margin-top: var(--primitive-spacing-24);
 }
-.slider.horizontal:global(.largeText) {
-  padding: 0.25rem 0.375rem;
-}
 .slider.vertical {
   padding: 0.375rem 0.5rem;
   min-height: 5rem;

package/Steps/Steps.module.css

@@ -5,6 +5,9 @@
   font-size: var(--primitive-font-size-48);
   font-weight: var(--primitive-font-weight-semibold);
 }
+.steps .step.numbers:global(.largeText) {
+  font-size: var(--primitive-font-size-58);
+}
 .steps .step.highlightCurrentOnly.future {
   opacity: 1;
 }

package/Switch/Switch.module.css

@@ -86,7 +86,7 @@ Motion Mixins
   position: relative;
 }
 .switch .client {
-  border-radius: var(--primitive-radius-30);
+  border-radius: var(--primitive-radius-999);
   width: 2.5rem;
   height: 1.25rem;
   position: relative;
@@ -106,9 +106,23 @@ Motion Mixins
   top: 0.125rem;
   left: 0.125rem;
 }
+.switch:global(.largeText) .client {
+  width: 3rem;
+  height: 1.5rem;
+}
+.switch:global(.largeText) .icon {
+  height: 1.1875rem;
+  width: 1.1875rem;
+  line-height: 1.5rem;
+  top: 0.15625rem;
+  left: 0.15625rem;
+}
 .switch.selected .icon {
   left: 1.375rem;
 }
+.switch.selected:global(.largeText) .icon {
+  left: 1.65625rem;
+}
 .switch.animated .client {
   transition: background-color 200ms;
 }

package/TabLayout/TabGroup.module.css

@@ -49,7 +49,7 @@
   margin-right: 0;
 }
 .tab.vertical.button:global(.largeText) {
-  font-size: var(--primitive-font-size-60);
+  font-size: var(--primitive-font-size-72);
   min-width: 2.75rem;
 }
 .tab.vertical .client {

package/TimePicker/TimePicker.module.css

@@ -22,6 +22,9 @@
 :global(.enact-locale-right-to-left) .timePicker .pickers .meridiemPicker {
   order: 4;
 }
+.timePicker:global(.largeText) .timeSeparator {
+  font-size: var(--primitive-font-size-72);
+}
 .timePicker:global(.neutral) .timeSeparator[disabled] {
   opacity: 1;
   opacity: 0.3;

package/TooltipDecorator/Tooltip.module.css

@@ -62,6 +62,10 @@
 :global(.enact-locale-ja) .tooltip .tooltipLabel.multi {
   line-break: strict;
 }
+.tooltip:global(.largeText) .tooltipLabel {
+  font-size: var(--primitive-font-size-66);
+  line-height: 1.75rem;
+}
 .tooltip.balloon {
   /* Needed to prevent global class being added in the DOM */
 }

package/VideoPlayer/Feedback.module.css

@@ -49,3 +49,6 @@
   --semantic-color-surface-default-focused: #b85f23;
   color: inherit;
 }
+:global(.largeText) .feedback .icon {
+  font-size: 1.5em;
+}

package/VideoPlayer/FeedbackTooltip.module.css

@@ -14,6 +14,9 @@
   font-size: var(--primitive-font-size-54);
   margin-bottom: var(--primitive-spacing-30);
 }
+:global(.largeText) .feedbackTooltip.shift .content {
+  font-size: var(--primitive-font-size-56);
+}
 .feedbackTooltip.hidden {
   display: none;
 }
@@ -61,6 +64,10 @@
   font-size: var(--primitive-font-size-48);
   font-weight: var(--primitive-font-weight-regular);
 }
+:global(.largeText) .feedbackTooltip .content {
+  font-size: var(--primitive-font-size-58);
+  line-height: 1.75rem;
+}
 .feedbackTooltip .alignmentContainer {
   position: relative;
   right: 50%;

package/VideoPlayer/MediaTitle.module.css

@@ -53,6 +53,14 @@
 .titleFrame .infoComponents .fontLgIcons {
   font-family: "LG Icons";
 }
+:global(.largeText) .titleFrame .title {
+  font-size: var(--primitive-font-size-108);
+  line-height: 3.04167rem;
+}
+:global(.largeText) .titleFrame .infoComponents {
+  font-size: var(--primitive-font-size-66);
+  line-height: 1.75rem;
+}
 :global(.noAnimation) .titleFrame.hidden {
   transition: none;
 }

package/internal/DateTime/DateTime.module.css

@@ -19,6 +19,9 @@
 .dateTime .pickers > *:nth-last-child(2) {
   margin-inline-end: 0;
 }
+.dateTime:global(.largeText) .heading {
+  font-size: var(--primitive-font-size-80);
+}
 .dateTime:global(.neutral) .heading {
   color: var(--semantic-color-on-background-main);
 }

package/internal/Picker/Picker.module.css

@@ -212,6 +212,28 @@
 .picker.large .valueWrapper {
   width: 9.75rem;
 }
+.picker:global(.largeText) .valueWrapper {
+  font-size: var(--primitive-font-size-66);
+  height: 1.75rem;
+  line-height: 1.75rem;
+}
+.picker:global(.largeText).joined .valueWrapper {
+  line-height: 1.75rem;
+}
+.picker:global(.largeText).joined.horizontal:not(.arrow) .valueWrapper {
+  font-size: var(--primitive-font-size-80);
+  height: 2.29167rem;
+  line-height: 2.29167rem;
+}
+.picker:global(.largeText).joined.horizontal:not(.arrow) .indicatorContainer .indicator {
+  width: calc(0.5rem * 1.2);
+  height: calc(0.5rem * 1.2);
+}
+.picker:global(.largeText).joined.vertical .valueWrapper {
+  font-size: var(--primitive-font-size-80);
+  height: 2.29167rem;
+  line-height: 2.29167rem;
+}
 .picker:global(.neutral) {
   color: var(--semantic-color-on-background-main);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@enact/limestone",
-  "version": "1.10.0",
+  "version": "1.10.1",
   "description": "Large-screen/TV support library for Enact, containing a variety of UI components.",
   "repository": {
     "type": "git",
@@ -39,15 +39,15 @@
     "screenTypes": "ThemeDecorator/screenTypes.json"
   },
   "dependencies": {
-    "@enact/core": "^5.5.0",
-    "@enact/i18n": "^5.5.0",
-    "@enact/spotlight": "^5.5.0",
-    "@enact/ui": "^5.5.0",
-    "@enact/webos": "^5.5.0",
-    "@enovaui/core-tokens": "^0.15.0",
-    "@enovaui/webos-tokens": "^0.15.0",
+    "@enact/core": "^5.5.1",
+    "@enact/i18n": "^5.5.1",
+    "@enact/spotlight": "^5.5.1",
+    "@enact/ui": "^5.5.1",
+    "@enact/webos": "^5.5.1",
+    "@enovaui/core-tokens": "^2.0.0",
+    "@enovaui/webos-tokens": "^2.0.0",
     "classnames": "^2.5.1",
-    "ilib": "^14.21.3",
+    "ilib": "^14.22.0",
     "invariant": "^2.2.4",
     "prop-types": "^15.8.1",
     "ramda": "^0.32.0",