@enact/limestone 1.10.1 → 1.10.2

package/.github/PULL_REQUEST_TEMPLATE.md

@@ -3,6 +3,7 @@
 * [ ] I have read and understand the [contribution guide](https://enactjs.com/docs/developer-guide/contributing/)
 * [ ] A [CHANGELOG entry](https://enactjs.com/docs/developer-guide/contributing/changelogs/) is included
 * [ ] At least one test case is included for this feature or bug fix
+* [ ] I have run automated testing and it is passed
 * [ ] Documentation was added or is not needed
 * [ ] This is an API breaking change
 

package/ActionGuide/ActionGuide.d.ts

@@ -1,6 +1,6 @@
 // Type definitions for limestone/ActionGuide
 
-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/ActionGuide/ActionGuide.module.css

@@ -11,6 +11,9 @@
   min-width: 1.75rem;
   width: 1.75rem;
 }
+.actionGuide .button.hasIcon.large {
+  padding: 0;
+}
 .actionGuide .label {
   font-family: "Limestone";
   font-size: var(--primitive-font-size-48);

package/Alert/Alert.d.ts

@@ -102,6 +102,15 @@ corresponding internal elements and states of this component.
     | "center"
     | "top left"
     | "top right";
+  /**
+   * Size of the Alert when  `type="overlay"` .
+   * *  `small`  - narrow width
+   * *  `medium`  - medium width
+   * *  `large`  - wide width, supports title
+   *
+   * When omitted, defaults to  `medium`  when there are exactly 2 buttons, otherwise  `small` .
+   */
+  size?: "small" | "medium" | "large";
   /**
    * The primary text displayed.
    *

package/Alert/Alert.js

@@ -24,7 +24,7 @@ var _Popup = _interopRequireDefault(require("../Popup"));
 var _AlertImage = _interopRequireDefault(require("./AlertImage"));
 var _AlertModule = _interopRequireDefault(require("./Alert.module.css"));
 var _jsxRuntime = require("react/jsx-runtime");
-var _excluded = ["buttonDirection", "buttons", "contentComponent", "children", "css", "id", "image", "overlayPosition", "title", "type", "style"];
+var _excluded = ["buttonDirection", "buttons", "contentComponent", "children", "css", "id", "image", "overlayPosition", "size", "title", "type", "style"];
 /**
  * Limestone styled modal Alert components.
  *
@@ -160,6 +160,19 @@ var AlertBase = exports.AlertBase = (0, _kind["default"])({
      * @public
      */
     overlayPosition: _propTypes["default"].oneOf(['bottom left', 'bottom right', 'center', 'top left', 'top right']),
+    /**
+     * Size of the Alert when `type="overlay"`.
+     *
+     * * `small` - narrow width
+     * * `medium` - medium width
+     * * `large` - wide width, supports title
+     *
+     * When omitted, defaults to `medium` when there are exactly 2 buttons, otherwise `small`.
+     *
+     * @type {('small'|'medium'|'large')}
+     * @public
+     */
+    size: _propTypes["default"].oneOf(['small', 'medium', 'large']),
     /**
      * The primary text displayed.
      *
@@ -217,34 +230,51 @@ var AlertBase = exports.AlertBase = (0, _kind["default"])({
       }
     },
     className: function className(_ref3) {
-      var image = _ref3.image,
+      var buttons = _ref3.buttons,
+        buttonDirection = _ref3.buttonDirection,
+        image = _ref3.image,
+        size = _ref3.size,
         type = _ref3.type,
         styler = _ref3.styler;
+      var buttonCount = _react.Children.toArray(buttons).filter(Boolean).length;
+      var resolvedSize = size || (buttonDirection !== 'vertical' && buttonCount === 2 ? 'medium' : 'small');
+      var resolvedButtonDirection = buttonDirection;
+      if (buttonDirection === 'auto') {
+        var useHorizontal = type === 'overlay' && buttonCount === 2 || type === 'fullscreen' && buttonCount < 4;
+        resolvedButtonDirection = useHorizontal ? 'horizontal' : 'vertical';
+      }
       return styler.append({
         noImage: !image
-      }, type);
+      }, resolvedSize, type, resolvedButtonDirection);
+    },
+    size: function size(_ref4) {
+      var buttons = _ref4.buttons,
+        buttonDirection = _ref4.buttonDirection,
+        _size = _ref4.size;
+      return _size || (buttonDirection !== 'vertical' && _react.Children.toArray(buttons).filter(Boolean).length === 2 ? 'medium' : 'small');
     }
   },
-  render: function render(_ref4) {
-    var buttonDirection = _ref4.buttonDirection,
-      buttons = _ref4.buttons,
-      contentComponent = _ref4.contentComponent,
-      children = _ref4.children,
-      css = _ref4.css,
-      id = _ref4.id,
-      image = _ref4.image,
-      overlayPosition = _ref4.overlayPosition,
-      title = _ref4.title,
-      type = _ref4.type,
-      style = _ref4.style,
-      rest = _objectWithoutProperties(_ref4, _excluded);
+  render: function render(_ref5) {
+    var buttonDirection = _ref5.buttonDirection,
+      buttons = _ref5.buttons,
+      contentComponent = _ref5.contentComponent,
+      children = _ref5.children,
+      css = _ref5.css,
+      id = _ref5.id,
+      image = _ref5.image,
+      overlayPosition = _ref5.overlayPosition,
+      size = _ref5.size,
+      title = _ref5.title,
+      type = _ref5.type,
+      style = _ref5.style,
+      rest = _objectWithoutProperties(_ref5, _excluded);
     var fullscreen = type === 'fullscreen';
     var position = type === 'overlay' ? overlayPosition : type;
-    var showTitle = fullscreen && title;
     var buttonCount = _react.Children.toArray(buttons).filter(Boolean).length;
+    var showTitle = (fullscreen || size === 'large') && title;
     var resolvedButtonDirection = buttonDirection;
     if (buttonDirection === 'auto') {
-      var useHorizontal = type === 'overlay' && buttonCount === 2 || type === 'fullscreen' && buttonCount < 3;
+      var useHorizontal = type === 'overlay' && buttonCount === 2 || type === 'fullscreen' && buttonCount < 4;
       resolvedButtonDirection = useHorizontal ? 'horizontal' : 'vertical';
     }
     var overlayHorizontalButtons = type === 'overlay' && resolvedButtonDirection === 'horizontal';
@@ -256,6 +286,9 @@ var AlertBase = exports.AlertBase = (0, _kind["default"])({
       });
     }
     var ariaLabelledBy = (showTitle ? "".concat(id, "_title ") : '') + "".concat(id, "_content ").concat(id, "_buttons");
+    var resolvedImage = (image === null || image === void 0 ? void 0 : image.props.type) === "thumbnail" ? /*#__PURE__*/(0, _react.cloneElement)(image, {
+      iconSize: !fullscreen && size === 'large' ? 'large' : 'small'
+    }) : null;
     return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       "aria-owns": id,
       className: css.alertWrapper,
@@ -269,11 +302,20 @@ var AlertBase = exports.AlertBase = (0, _kind["default"])({
         children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Layout["default"], {
           align: "center center",
           orientation: "vertical",
-          children: [image ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Layout.Cell, {
+          children: [showTitle && !fullscreen ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Layout.Cell, {
+            shrink: true,
+            align: "stretch",
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Heading["default"], {
+              size: "title",
+              className: css.title,
+              id: "".concat(id, "_title"),
+              children: title
+            })
+          }) : null, resolvedImage || image ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Layout.Cell, {
             shrink: true,
             className: css.alertImage,
-            children: image
-          }) : null, showTitle ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Layout.Cell, {
+            children: resolvedImage || image
+          }) : null, showTitle && fullscreen ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Layout.Cell, {
             shrink: true,
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Heading["default"], {
               size: "title",

package/Alert/Alert.module.css

@@ -1,9 +1,22 @@
 .alertWrapper {
   display: inline;
 }
+.alert .title {
+  font-family: "Limestone Title", "Limestone";
+}
 .alert.noImage {
   /* Needed to prevent global class being added in the DOM */
 }
+.alert.horizontal .button {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+.alert.vertical .buttonCell:first-child .button {
+  margin-top: 0;
+}
+.alert.vertical .buttonCell:last-child .button {
+  margin-bottom: 0;
+}
 .alert.fullscreen .alertImage {
   margin-bottom: var(--primitive-spacing-60);
 }
@@ -28,30 +41,30 @@
   font-size: var(--primitive-font-size-108);
 }
 .alert.fullscreen .buttonContainer {
-  margin-top: var(--primitive-spacing-96);
+  margin-top: var(--primitive-spacing-120);
 }
 .alert.overlay {
   overflow: hidden;
 }
 .alert.overlay .alertImage {
   margin-bottom: var(--primitive-spacing-36);
-  padding: 0 var(--primitive-spacing-84);
+  padding: 0 var(--primitive-spacing-90);
 }
 .alert.overlay .buttonContainer {
   box-sizing: border-box;
-  margin-top: var(--primitive-spacing-36);
-  padding: 0 var(--primitive-spacing-84);
+  margin-top: var(--primitive-spacing-72);
+  padding: 0 var(--primitive-spacing-90);
 }
 .alert.overlay .content {
   align-self: stretch;
   font-family: "Limestone";
-  line-height: 1.75rem;
+  line-height: 1.34em;
   font-weight: var(--primitive-font-weight-semibold);
   font-size: var(--primitive-font-size-60);
   text-align: initial;
   overflow-wrap: break-word;
   word-break: keep-all;
-  padding: 0 var(--primitive-spacing-84);
+  padding: 0 var(--primitive-spacing-90);
   margin: 0;
   max-width: var(--alert-overlay-content-max-width, 23.5rem);
 }
@@ -78,13 +91,24 @@
   overflow-wrap: normal;
   word-break: normal;
 }
+.alert.overlay:global(.largeText) .content {
+  font-size: var(--primitive-font-size-72);
+}
+.alert.overlay.large .title {
+  margin: 0 0 var(--primitive-spacing-36) 0;
+  padding: 0 var(--primitive-spacing-90);
+  font-size: var(--primitive-font-size-90);
+}
+:global(.enact-locale-non-latin) .alert.overlay.large .title {
+  font-size: var(--primitive-font-size-108);
+}
 .popup.overlay {
   box-sizing: border-box;
   --alert-overlay-horizontal-button-count: 1;
-  --alert-overlay-horizontal-button-width: NaNrem + (2 * var(--primitive-spacing-36)));
+  --alert-overlay-horizontal-button-width: calc(840px + (2 * var(--primitive-spacing-36)));
   --alert-overlay-horizontal-buttons-total-width: calc(var(--alert-overlay-horizontal-button-width) * var(--alert-overlay-horizontal-button-count));
   --alert-overlay-width: max(1128px, var(--alert-overlay-horizontal-buttons-total-width));
-  --alert-overlay-content-horizontal-padding: var(--primitive-spacing-84);
+  --alert-overlay-content-horizontal-padding: var(--primitive-spacing-90);
   --alert-overlay-content-max-width: calc(var(--alert-overlay-width) - (2 * var(--alert-overlay-content-horizontal-padding)));
   width: var(--alert-overlay-width);
   min-width: 23.5rem;
@@ -93,9 +117,17 @@
   margin-right: auto;
 }
 .popup.overlay .body {
-  padding: var(--primitive-spacing-84) 0;
+  padding: var(--primitive-spacing-90) 0;
   max-height: 42.25rem;
 }
+.popup.overlay.medium {
+  --alert-overlay-width: max(1656px, var(--alert-overlay-horizontal-buttons-total-width));
+  min-width: 34.5rem;
+}
+.popup.overlay.large {
+  --alert-overlay-width: max(2184px, var(--alert-overlay-horizontal-buttons-total-width));
+  min-width: 45.5rem;
+}
 .popup:global(.neutral) {
   background-color: var(--semantic-color-background-full-default);
 }

package/Alert/AlertImage.module.css

@@ -1,7 +1,11 @@
 .alertImage {
   margin: 0;
 }
-.alertImage.thumbnail {
+.alertImage.thumbnail.large {
+  width: 41.75rem;
+  height: 17.8125rem;
+}
+.alertImage.thumbnail.small {
   width: 20rem;
   height: 11.25rem;
 }

package/Alert/tests/Alert-specs.js

@@ -102,7 +102,7 @@ describe('Alert', function () {
     var expectedClass = 'thumbnail';
     expect(image).toHaveClass(expectedClass);
   });
-  test('should align buttons horizontally by default in fullscreen when button count is less than 3', function () {
+  test('should align buttons horizontally by default in fullscreen when button count is less than 4', function () {
     (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(FloatingLayerController, {
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Alert.Alert, {
         open: true,
@@ -111,6 +111,8 @@ describe('Alert', function () {
             children: "yes"
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button["default"], {
             children: "no"
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button["default"], {
+            children: "maybe"
           })]
         })
       })
@@ -119,7 +121,7 @@ describe('Alert', function () {
     var buttonsLayout = alert.querySelector('[id$="_buttons"]');
     expect(buttonsLayout).toHaveClass('horizontal');
   });
-  test('should align buttons vertically by default in fullscreen when button count is 3', function () {
+  test('should align buttons vertically by default in fullscreen when button count is 4', function () {
     (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(FloatingLayerController, {
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Alert.Alert, {
         open: true,
@@ -128,6 +130,8 @@ describe('Alert', function () {
             children: "yes"
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button["default"], {
             children: "no"
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button["default"], {
+            children: "maybe"
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button["default"], {
             children: "later"
           })]

package/BodyText/BodyText.d.ts

@@ -1,6 +1,6 @@
 // Type definitions for limestone/BodyText
 
-import { SkinnableProps as limestone_Skinnable_SkinnableProps } from "limestone/Skinnable";
+import { SkinnableProps as limestone_Skinnable_SkinnableProps } from "@enact/limestone/Skinnable";
 import { BodyTextProps as ui_BodyText_BodyTextProps } from "@enact/ui/BodyText";
 import * as React from "react";
 

package/BodyText/BodyText.js

@@ -101,20 +101,25 @@ var BodyTextBase = exports.BodyTextBase = (0, _kind["default"])({
     publicClassNames: 'bodyText'
   },
   computed: {
-    className: function className(_ref) {
-      var noWrap = _ref.noWrap,
-        size = _ref.size,
-        styler = _ref.styler;
+    children: function children(_ref) {
+      var _children = _ref.children,
+        noWrap = _ref.noWrap;
+      return noWrap ? _children === null || _children === void 0 ? void 0 : _children.replaceAll('\n', ' ') : _children;
+    },
+    className: function className(_ref2) {
+      var noWrap = _ref2.noWrap,
+        size = _ref2.size,
+        styler = _ref2.styler;
       return styler.append(size, {
         noWrap: noWrap
       });
     }
   },
-  render: function render(_ref2) {
-    var centered = _ref2.centered,
-      css = _ref2.css,
-      noWrap = _ref2.noWrap,
-      rest = _objectWithoutProperties(_ref2, _excluded);
+  render: function render(_ref3) {
+    var centered = _ref3.centered,
+      css = _ref3.css,
+      noWrap = _ref3.noWrap,
+      rest = _objectWithoutProperties(_ref3, _excluded);
     delete rest.size;
     if (noWrap) {
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(MarqueeBodyText, _objectSpread(_objectSpread({

package/BodyText/BodyText.module.css

@@ -3,7 +3,7 @@
   font-size: var(--primitive-font-size-60);
   font-style: normal;
   font-family: "Limestone";
-  line-height: 1.4em;
+  line-height: 1.34em;
   margin: 0 var(--primitive-spacing-36) var(--primitive-font-size-60) var(--primitive-spacing-36);
   padding: 0;
   white-space: normal;

package/Button/Button.d.ts

@@ -1,10 +1,10 @@
 // Type definitions for limestone/Button
 
-import { TooltipDecoratorProps as limestone_TooltipDecorator_TooltipDecoratorProps } from "limestone/TooltipDecorator";
-import { MarqueeDecoratorProps as limestone_Marquee_MarqueeDecoratorProps } from "limestone/Marquee";
+import { TooltipDecoratorProps as limestone_TooltipDecorator_TooltipDecoratorProps } from "@enact/limestone/TooltipDecorator";
+import { MarqueeDecoratorProps as limestone_Marquee_MarqueeDecoratorProps } from "@enact/limestone/Marquee";
 import { ButtonDecoratorProps as ui_Button_ButtonDecoratorProps } from "@enact/ui/Button";
 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 { ButtonBaseProps as ui_Button_ButtonBaseProps } from "@enact/ui/Button";
 import * as React from "react";
 

package/Button/Button.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
 ------------------------------------------ */
 .button {
@@ -109,7 +106,6 @@ Motion Mixins
 .button:global(.largeText) {
   font-size: var(--primitive-font-size-72);
   height: 2.75rem;
-  min-width: 2.75rem;
   line-height: 2.5rem;
   --button-height: 2.75rem;
 }
@@ -361,13 +357,9 @@ Motion Mixins
 .button.small:global(.largeText) {
   font-size: var(--primitive-font-size-66);
   height: 2.25rem;
-  min-width: 2.25rem;
   line-height: 2rem;
   --button-height: 2.25rem;
 }
-.button.small:global(.largeText).minWidth {
-  min-width: 15rem;
-}
 .button.small:global(.largeText).red .client::before,
 .button.small:global(.largeText).green .client::before,
 .button.small:global(.largeText).yellow .client::before,
@@ -385,9 +377,6 @@ Motion Mixins
 .button.iconOnly {
   min-width: 2.75rem;
 }
-.button.iconOnly:global(.largeText) {
-  min-width: 2.75rem;
-}
 .button.iconOnly .client {
   padding: 0;
 }
@@ -413,9 +402,6 @@ Motion Mixins
   padding-left: 0.375rem;
   padding-right: 0.375rem;
 }
-.button.iconOnly.small:global(.largeText) {
-  min-width: 2.25rem;
-}
 .button.iconOnly.iconAfter .icon,
 .button.iconOnly.iconBefore .icon,
 .button.iconOnly.large .icon,
@@ -1485,12 +1471,12 @@ Motion Mixins
   transition: transform var(--lime-focus-out-motion-duration) var(--lime-focus-out-motion-easing-function);
   border-width: 0.125rem;
   border-style: solid;
-  border-color: var(--semantic-color-stroke-button-outline);
+  border-color: rgba(162, 115, 200, 0.5);
   border-radius: 0;
 }
 .button:global(.game).bordered .bg {
   background-color: color(from var(--semantic-color-surface-default) srgb r g b / 0.5);
-  border: 0.125rem solid var(--semantic-color-stroke-button-outline);
+  border: 0.125rem solid rgba(162, 115, 200, 0.5);
 }
 .button:global(.game).bordered .client {
   color: var(--semantic-color-on-surface-main);
@@ -1617,7 +1603,7 @@ Motion Mixins
 }
 :global(.spotlight-input-key) .button:global(.game):global(.spottable):focus.iconOnly .bg,
 :global(.spotlight-input-mouse) .button:global(.game):global(.spottable):focus.iconOnly .bg {
-  background-color: '';
+  background-color: rgba(139, 49, 215, 0.5);
 }
 :global(.spotlight-input-key) .button:global(.game):global(.spottable):focus.focusExpand .bg,
 :global(.spotlight-input-mouse) .button:global(.game):global(.spottable):focus.focusExpand .bg {
@@ -1661,7 +1647,7 @@ Motion Mixins
   text-shadow: none;
 }
 :global(.spotlight-input-touch) .button:global(.game):global(.spottable):active.iconOnly .bg {
-  background-color: '';
+  background-color: rgba(139, 49, 215, 0.5);
 }
 :global(.spotlight-input-touch) .button:global(.game):global(.spottable):active.focusExpand .bg {
   transform: scale(1.1);
@@ -1824,12 +1810,12 @@ Motion Mixins
   transition: transform var(--lime-focus-out-motion-duration) var(--lime-focus-out-motion-easing-function);
   border-width: 0.125rem;
   border-style: solid;
-  border-color: var(--semantic-color-stroke-button-outline);
+  border-color: rgba(0, 255, 194, 0.5);
   border-radius: 0;
 }
 :global(.green) .button:global(.game).bordered .bg {
   background-color: color(from var(--semantic-color-surface-default) srgb r g b / 0.5);
-  border: 0.125rem solid var(--semantic-color-stroke-button-outline);
+  border: 0.125rem solid rgba(0, 255, 194, 0.5);
 }
 :global(.green) .button:global(.game).bordered .client {
   color: var(--semantic-color-on-surface-main);
@@ -1956,7 +1942,7 @@ Motion Mixins
 }
 :global(.spotlight-input-key) :global(.green) .button:global(.game):global(.spottable):focus.iconOnly .bg,
 :global(.spotlight-input-mouse) :global(.green) .button:global(.game):global(.spottable):focus.iconOnly .bg {
-  background-color: '';
+  background-color: rgba(69, 193, 148, 0.5);
 }
 :global(.spotlight-input-key) :global(.green) .button:global(.game):global(.spottable):focus.focusExpand .bg,
 :global(.spotlight-input-mouse) :global(.green) .button:global(.game):global(.spottable):focus.focusExpand .bg {
@@ -2000,7 +1986,7 @@ Motion Mixins
   text-shadow: none;
 }
 :global(.spotlight-input-touch) :global(.green) .button:global(.game):global(.spottable):active.iconOnly .bg {
-  background-color: '';
+  background-color: rgba(69, 193, 148, 0.5);
 }
 :global(.spotlight-input-touch) :global(.green) .button:global(.game):global(.spottable):active.focusExpand .bg {
   transform: scale(1.1);
@@ -2163,12 +2149,12 @@ Motion Mixins
   transition: transform var(--lime-focus-out-motion-duration) var(--lime-focus-out-motion-easing-function);
   border-width: 0.125rem;
   border-style: solid;
-  border-color: var(--semantic-color-stroke-button-outline);
+  border-color: rgba(235, 94, 0, 0.5);
   border-radius: 0;
 }
 :global(.orange) .button:global(.game).bordered .bg {
   background-color: color(from var(--semantic-color-surface-default) srgb r g b / 0.5);
-  border: 0.125rem solid var(--semantic-color-stroke-button-outline);
+  border: 0.125rem solid rgba(235, 94, 0, 0.5);
 }
 :global(.orange) .button:global(.game).bordered .client {
   color: var(--semantic-color-on-surface-main);
@@ -2295,7 +2281,7 @@ Motion Mixins
 }
 :global(.spotlight-input-key) :global(.orange) .button:global(.game):global(.spottable):focus.iconOnly .bg,
 :global(.spotlight-input-mouse) :global(.orange) .button:global(.game):global(.spottable):focus.iconOnly .bg {
-  background-color: '';
+  background-color: rgba(215, 84, 49, 0.5);
 }
 :global(.spotlight-input-key) :global(.orange) .button:global(.game):global(.spottable):focus.focusExpand .bg,
 :global(.spotlight-input-mouse) :global(.orange) .button:global(.game):global(.spottable):focus.focusExpand .bg {
@@ -2339,7 +2325,7 @@ Motion Mixins
   text-shadow: none;
 }
 :global(.spotlight-input-touch) :global(.orange) .button:global(.game):global(.spottable):active.iconOnly .bg {
-  background-color: '';
+  background-color: rgba(215, 84, 49, 0.5);
 }
 :global(.spotlight-input-touch) :global(.orange) .button:global(.game):global(.spottable):active.focusExpand .bg {
   transform: scale(1.1);

package/CHANGELOG.md

@@ -2,7 +2,54 @@
 
 The following is a curated list of changes in the Enact limestone module, newest changes on the top.
 
-## [1.10.1] - 2026-06-01 
+## [1.10.2] - 2026-07-09
+
+### Added
+
+- `limestone/Alert` `size` prop for overlay type
+- `limestone/Alert` styling to match the latest GUI
+- `limestone/Input` `title` to use the `LGSmart UI 3.0 Title` font,
+- `limestone/Icon` supported icon list, adding new icons `smartmode`, `databackup`, `deleteviewinginfo`, `lgmembers`, `manage`, `pay`, `paymentmethod`, `productregistration`, `purchased`, `rate`, `report`, `security`, `subscriptions`, `terminatemyaccount`, `update`, `usagecare`, `voucher`, `filter`, `ezsetting`, `fitness`, and `auracast2`
+- `limestone/Panels.Header` `title` to use the `LGSmart UI 3.0 Title` font 
+- `limestone/Scroller` prop `stickTo` to allow the scroller to stick to a specific element
+- `limestone/VirtualGridList` prop `stickTo` to allow the scroller to stick to a specific element
+- `limestone/VirtualList` prop `stickTo` to allow the scroller to stick to a specific element
+
+### Changed
+
+- `limestone/Alert` styling to match the latest GUI
+- `limestone/Button` styling to match the latest GUI
+- `limestone/Card` styling to match the latest GUI
+- `limestone/IconItem` press/release motion to match the latest motion guide
+- `limestone/ImageItem` styling to match the latest GUI
+- `limestone/Item` styling to match the latest GUI
+- `limestone/Picker` to use `Steps` instead of own indicator
+- `limestone/Popup` styling to match the latest GUI
+- `limestone/ProgressBar` styling to match the latest GUI
+- `limestone/Slider` press/release motion to match the latest motion guide
+- `limestone/Slider` styling to match the latest GUI
+- `limestone/Steps` styling to match the latest GUI
+- `limestone/TabLayout` styling to match the latest GUI
+- `limestone/Tooltip` styling to match the latest GUI
+
+### Fixed
+
+- `limestone/Bodytext` to properly display marquee when `noWrap` is true
+- `limestone/Card` styling when both `hasContainer` and `captionOverlayOnFocus` are true
+- `limestone/ContextualPopupDecorator` to remove global key listeners on unmount when popup is open
+- `limestone/TabLayout` isomorphic build
+- `limestone/VirtualList` focus jump and scroll freeze when scrolled by long press
+- `limestone/WizardPanels` header to maintain the same height when there is no title
+
+## [1.10.1] - 2026-06-01
+
+### Deprecated
+
+- `limestone/FormCheckboxItem` to be removed in 2.0.0
+
+### Added
+
+- `limestone/CheckboxItem` `formCheckbox` prop to mirror the behaviour of `FormCheckboxItem`
 
 ### Changed