@enact/limestone 1.10.0 → 1.10.2

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 {
@@ -107,11 +104,25 @@ Motion Mixins
   font-weight: var(--primitive-font-weight-bold);
 }
 .button:global(.largeText) {
-  font-size: var(--primitive-font-size-96);
-  height: 4rem;
-  min-width: 4rem;
-  line-height: 3.75rem;
-  --button-height: 4rem;
+  font-size: var(--primitive-font-size-72);
+  height: 2.75rem;
+  line-height: 2.5rem;
+  --button-height: 2.75rem;
+}
+.button:global(.largeText).red .client::before,
+.button:global(.largeText).green .client::before,
+.button:global(.largeText).yellow .client::before,
+.button:global(.largeText).blue .client::before {
+  bottom: var(--primitive-spacing-12);
+  width: 1.5rem;
+  height: 0.625rem;
+}
+.button:global(.largeText).red:not(.minWidth) .client::before,
+.button:global(.largeText).green:not(.minWidth) .client::before,
+.button:global(.largeText).yellow:not(.minWidth) .client::before,
+.button:global(.largeText).blue:not(.minWidth) .client::before {
+  width: 0.625rem;
+  height: 0.25rem;
 }
 .button.focusStatic {
   /* Defined to prevent global export */
@@ -169,10 +180,24 @@ Motion Mixins
   bottom: var(--primitive-spacing-12);
   left: 50%;
   width: 1.25rem;
-  height: 0.25rem;
+  height: 0.5rem;
   border-radius: var(--semantic-radius-full);
   transform: translate(-50%, 50%);
 }
+.button.red:not(.minWidth) .client::before,
+.button.green:not(.minWidth) .client::before,
+.button.yellow:not(.minWidth) .client::before,
+.button.blue:not(.minWidth) .client::before {
+  width: 0.625rem;
+  height: 0.25rem;
+}
+.button.red:not(.minWidth):global(.largeText) .client::before,
+.button.green:not(.minWidth):global(.largeText) .client::before,
+.button.yellow:not(.minWidth):global(.largeText) .client::before,
+.button.blue:not(.minWidth):global(.largeText) .client::before {
+  width: 0.625rem;
+  height: 0.25rem;
+}
 .button.red.minWidth .icon,
 .button.green.minWidth .icon,
 .button.yellow.minWidth .icon,
@@ -280,7 +305,21 @@ Motion Mixins
 .button.small.blue .client::before {
   bottom: var(--primitive-spacing-12);
   width: 1.0625rem;
-  height: 0.1875rem;
+  height: 0.4375rem;
+}
+.button.small.red:not(.minWidth) .client::before,
+.button.small.green:not(.minWidth) .client::before,
+.button.small.yellow:not(.minWidth) .client::before,
+.button.small.blue:not(.minWidth) .client::before {
+  width: 0.625rem;
+  height: 0.25rem;
+}
+.button.small.red:not(.minWidth):global(.largeText) .client::before,
+.button.small.green:not(.minWidth):global(.largeText) .client::before,
+.button.small.yellow:not(.minWidth):global(.largeText) .client::before,
+.button.small.blue:not(.minWidth):global(.largeText) .client::before {
+  width: 0.625rem;
+  height: 0.25rem;
 }
 .button.small.red.minWidth .client,
 .button.small.green.minWidth .client,
@@ -316,21 +355,28 @@ Motion Mixins
   margin-inline-start: var(--primitive-spacing-24);
 }
 .button.small:global(.largeText) {
-  font-size: var(--primitive-font-size-72);
-  height: 3rem;
-  min-width: 3rem;
-  line-height: 2.75rem;
-  --button-height: 3rem;
+  font-size: var(--primitive-font-size-66);
+  height: 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,
+.button.small:global(.largeText).blue .client::before {
+  width: 1.25rem;
+  height: 0.5rem;
+}
+.button.small:global(.largeText).red:not(.minWidth) .client::before,
+.button.small:global(.largeText).green:not(.minWidth) .client::before,
+.button.small:global(.largeText).yellow:not(.minWidth) .client::before,
+.button.small:global(.largeText).blue:not(.minWidth) .client::before {
+  width: 0.625rem;
+  height: 0.25rem;
 }
 .button.iconOnly {
   min-width: 2.75rem;
 }
-.button.iconOnly:global(.largeText) {
-  min-width: 4rem;
-}
 .button.iconOnly .client {
   padding: 0;
 }
@@ -356,9 +402,6 @@ Motion Mixins
   padding-left: 0.375rem;
   padding-right: 0.375rem;
 }
-.button.iconOnly.small:global(.largeText) {
-  min-width: 3rem;
-}
 .button.iconOnly.iconAfter .icon,
 .button.iconOnly.iconBefore .icon,
 .button.iconOnly.large .icon,
@@ -369,34 +412,9 @@ Motion Mixins
 .button.iconOnly.iconBefore .icon:global(.largeText),
 .button.iconOnly.large .icon:global(.largeText),
 .button.iconOnly.small .icon:global(.largeText) {
+  overflow: visible;
   width: 100%;
 }
-.button.iconOnly.iconAfter.red .client::before,
-.button.iconOnly.iconBefore.red .client::before,
-.button.iconOnly.large.red .client::before,
-.button.iconOnly.small.red .client::before,
-.button.iconOnly.iconAfter.green .client::before,
-.button.iconOnly.iconBefore.green .client::before,
-.button.iconOnly.large.green .client::before,
-.button.iconOnly.small.green .client::before,
-.button.iconOnly.iconAfter.yellow .client::before,
-.button.iconOnly.iconBefore.yellow .client::before,
-.button.iconOnly.large.yellow .client::before,
-.button.iconOnly.small.yellow .client::before,
-.button.iconOnly.iconAfter.blue .client::before,
-.button.iconOnly.iconBefore.blue .client::before,
-.button.iconOnly.large.blue .client::before,
-.button.iconOnly.small.blue .client::before {
-  width: 1.375rem;
-  height: 0.1875rem;
-}
-.button.iconOnly.red .client::before,
-.button.iconOnly.green .client::before,
-.button.iconOnly.yellow .client::before,
-.button.iconOnly.blue .client::before {
-  width: 1.375rem;
-  height: 0.1875rem;
-}
 .button.collapsable.hasIcon:not(.iconOnly) {
   padding-left: 0;
   padding-right: 0;
@@ -1453,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);
@@ -1585,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 {
@@ -1629,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);
@@ -1792,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);
@@ -1924,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 {
@@ -1968,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);
@@ -2131,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);
@@ -2263,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 {
@@ -2307,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,6 +2,92 @@
 
 The following is a curated list of changes in the Enact limestone module, newest changes on the top.
 
+## [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
+
+- `limestone/ActionGuide` styling to match the latest GUI
+- `limestone/BodyText` styling to match the latest GUI
+- `limestone/Button` styling to match the latest GUI
+- `limestone/Card` styling to match the latest GUI
+- `limestone/Checkbox` styling to match the latest GUI
+- `limestone/Chips.Chip` styling to match the latest GUI
+- `limestone/DatePicker` styling to match the latest GUI
+- `limestone/Heading` styling to match the latest GUI
+- `limestone/Icon` styling to match the latest GUI
+- `limestone/IconItem` styling to match the latest GUI
+- `limestone/ImageItem` styling to match the latest GUI
+- `limestone/Input` styling to match the latest GUI
+- `limestone/InputField` styling to match the latest GUI
+- `limestone/Item` styling to match the latest GUI
+- `limestone/KeyGuide` styling to match the latest GUI
+- `limestone/MediaOverlay` styling to match the latest GUI
+- `limestone/PageViews` styling to match the latest GUI
+- `limestone/Panels.Header` styling to match the latest GUI
+- `limestone/Picker` styling to match the latest GUI
+- `limestone/PopupTabLayout` styling to match the latest GUI
+- `limestone/RadioItem` styling to match the latest GUI
+- `limestone/Scroller` focus area to be separated from the vertical and horizontal scrollbars when `focusableScrollbar` is `"byEnter"`
+- `limestone/Slider` styling to match the latest GUI
+- `limestone/Steps` styling to match the latest GUI
+- `limestone/Switch` styling to match the latest GUI
+- `limestone/TabLayout` styling to match the latest GUI
+- `limestone/TimePicker` styling to match the latest GUI
+- `limestone/TooltipDecorator` styling to match the latest GUI
+- `limestone/VideoPlayer` styling to match the latest GUI
+
+### Fixed
+
+- `limestone/Scroller` to set initial focus on the scrollbar thumb when navigating between panels with `focusableScrollbar`
+
+
 ## [1.10.0] - 2026-05-08
 
 ### Added
@@ -33,6 +119,7 @@ The following is a curated list of changes in the Enact limestone module, newest
 - `limestone/MediaOverlay` press motion to work with key press
 - `limestone/Popup` to not flicker on transition
 - `limestone/Popup` to not delay when closed with pointer
+- `limestone/Scroller.EditableWrapper` to not stop the `Marquee` when editing is complete
 - `limestone/Slider` press motion to work with key press
 - `limestone/useScroll` to not scroll on hover right after scroll by wheel
 

package/Card/Card.d.ts

@@ -1,8 +1,8 @@
 // Type definitions for limestone/Card
 
-import { MarqueeControllerProps as limestone_Marquee_MarqueeControllerProps } from "limestone/Marquee";
+import { MarqueeControllerProps as limestone_Marquee_MarqueeControllerProps } from "@enact/limestone/Marquee";
 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 { CardProps as ui_Card_CardProps } from "@enact/ui/Card";
 import * as React from "react";
 
@@ -21,6 +21,31 @@ a specific screenSize.
    */
   "aria-label"?: string;
   /**
+ * Sources for the image icon.
+ * 
+ * An array of String values or Objects of values used to determine which image will appear on
+a specific screenSize. This prop is only used when  `orientation`  is  `'vertical'` .
+ */
+  captionImageIconsSrc?: string[] | object[];
+  /**
+   * The size of the caption images.
+   *
+   * The following properties should be provided:
+   * *  `height`  - The height of the image
+   * *  `width`  - The width of the image
+   */
+  captionImageSize?: object;
+  /**
+ * Determines whether the caption will overflow the card container or not.
+It only applies when  `orientation`  is  `'vertical'`  and  `captionOverlay`  and  `captionOverlayOnFocus`  is  `false` .
+ */
+  captionOverflow?: boolean;
+  /**
+ * Determines whether the caption will overflow the card container and show only on card focus.
+It only applies when  `orientation`  is  `'vertical'`  and  `captionOverlay`  and  `captionOverlayOnFocus`  is  `false` .
+ */
+  captionOverflowOnFocus?: boolean;
+  /**
  * Determines whether the caption will be placed over the image or not.
 It only applies when  `orientation`  is  `'vertical'` .
  */
@@ -34,6 +59,11 @@ It only applies when  `orientation`  is  `'vertical'` .
    * Centers the captions when  `imageIconSrc`  is not provided.
    */
   centered?: boolean;
+  /**
+ * Centers the title and  `imageIconSrc`  horizontally and vertically.
+It only applies when  `captionOverlay`  or  `captionOverlayOnFocus`  is  `true` .
+ */
+  centeredTitle?: boolean;
   /**
    * The primary caption displayed with the image.
    */
@@ -47,6 +77,14 @@ corresponding internal elements and states of this component.
    * Disables Card and becomes non-interactive.
    */
   disabled?: boolean;
+  /**
+   * Media's entire duration in seconds.
+   */
+  duration?: number;
+  /**
+   * Determines whether the  `Duration`  will be placed over the image or not.
+   */
+  durationOverlay?: boolean;
   /**
    * Fits the image to its height and width and positions it on the center of the Card.
    */
@@ -63,10 +101,10 @@ When  `orientation`  is  `'horizontal'` , this prop is always  `true`  and provi
   /**
  * Source for the image icon.
  * 
- * String value or Object of values used to determine which image will appear on
-a specific screenSize. This prop is only used when  `orientation`  is  `'vertical'` .
+ * String value or element or Object of values used to determine which image will appear on
+a specific screenSize. This prop is only used when  `orientation`  is  `'vertical'`  or  `centeredTitle`  is  `true` .
  */
-  imageIconSrc?: string | object;
+  imageIconSrc?: string | object | JSX.Element;
   /**
    * The size of the image.
    *
@@ -79,6 +117,12 @@ a specific screenSize. This prop is only used when  `orientation`  is  `'vertica
    * A secondary caption displayed with the image.
    */
   label?: string;
+  /**
+   * Icons to be included with the secondary caption.
+   *
+   * Typically, up to 3 icons are used.
+   */
+  labelIcons?: JSX.Element | JSX.Element[];
   /**
    * The layout orientation of the component.
    */
@@ -88,29 +132,57 @@ a specific screenSize. This prop is only used when  `orientation`  is  `'vertica
    */
   placeholder?: string;
   /**
-   * The primary badge image source.
+   * The primary badge.
    */
-  primaryBadgeSrc?: string | object;
+  primaryBadge?: JSX.Element | string;
+  /**
+ * The size of the primary badge. Can be a number or an object with specific dimensions.
+The following properties should be provided for the object:
+ * *  `height`  - The height of the badge
+ * *  `width`  - The width of the badge
+ */
+  primaryBadgeSize?: object | number;
   /**
    * The progress displayed inside the ProgressBar
    */
   progress?: number;
+  /**
+   * Determines whether the  `ProgressBar`  will be placed over the image or not.
+   */
+  progressBarOverlay?: boolean;
   /**
    * Set to  `true`  to display the image with rounded corners.
    */
   roundedImage?: boolean;
   /**
-   * The secondary badge image source.
+   * The secondary badge.
    */
-  secondaryBadgeSrc?: string | object;
+  secondaryBadge?: JSX.Element | string;
+  /**
+ * The size of the secondary badge. Can be a number or an object with specific dimensions.
+The following properties should be provided for the object:
+ * *  `height`  - The height of the badge
+ * *  `width`  - The width of the badge
+ */
+  secondaryBadgeSize?: object | number;
   /**
    * A ternary caption displayed with the image.
    */
   secondaryLabel?: string;
+  /**
+   * Icons to be included with the ternary caption.
+   *
+   * Typically, up to 3 icons are used.
+   */
+  secondaryLabelIcons?: JSX.Element | JSX.Element[];
   /**
    * Applies a selected visual effect to the image.
    */
   selected?: boolean;
+  /**
+   * Activates the 'Duration'.
+   */
+  showDuration?: boolean;
   /**
    * Activates the 'ProgressBar'.
    */