@enact/limestone 1.9.3 → 1.10.1

package/.github/workflows/ci-reusable.yml

@@ -35,7 +35,7 @@ jobs:
 
       - name: Clone and setup Enact CLI
         run: |
-          git clone --branch=7.2.1 --depth 1 https://github.com/enactjs/cli ../cli
+          git clone --branch=develop --depth 1 https://github.com/enactjs/cli ../cli
           pushd ../cli
           npm install
           npm link
@@ -43,7 +43,7 @@ jobs:
 
       - name: Clone and setup Enact framework
         run: |
-          git clone --branch=release/5.4.x.develop --depth 1 https://github.com/enactjs/enact ../enact
+          git clone --branch=develop --depth 1 https://github.com/enactjs/enact ../enact
           pushd ../enact
           npm install
           npm run lerna exec -- --ignore enact-sampler --concurrency 1 -- npm --no-package-lock install

package/ActionGuide/ActionGuide.module.css

@@ -22,6 +22,10 @@
   font-family: "Limestone";
   font-size: var(--primitive-font-size-48);
 }
+.actionGuide:global(.largeText) .label {
+  font-size: var(--primitive-font-size-60);
+  line-height: 1.45833rem;
+}
 .actionGuide:global(.neutral) .icon .icon {
   color: var(--semantic-color-on-background-actionguide);
 }

package/Alert/Alert.d.ts

@@ -32,6 +32,15 @@ export class AlertImage extends React.Component<
 > {}
 
 export interface AlertBaseProps {
+  /**
+   * Sets the buttons layout direction.
+   *
+   * In  `auto`  mode, button direction follows UX defaults:
+   * *  `overlay`  - horizontal when there are exactly 2 buttons
+   * *  `fullscreen`  - horizontal when there are less than 3 buttons
+   * *  otherwise vertical
+   */
+  buttonDirection?: "auto" | "horizontal" | "vertical";
   /**
    * Buttons to be included under the component.
    *

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 = ["buttons", "contentComponent", "children", "css", "id", "image", "overlayPosition", "title", "type"];
+var _excluded = ["buttonDirection", "buttons", "contentComponent", "children", "css", "id", "image", "overlayPosition", "title", "type", "style"];
 /**
  * Limestone styled modal Alert components.
  *
@@ -56,6 +56,19 @@ function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t =
 var AlertBase = exports.AlertBase = (0, _kind["default"])({
   name: 'Alert',
   propTypes: /** @lends limestone/Alert.AlertBase.prototype */{
+    /**
+     * Sets the buttons layout direction.
+     *
+     * In `auto` mode, button direction follows UX defaults:
+     * * `overlay` - horizontal when there are exactly 2 buttons
+     * * `fullscreen` - horizontal when there are less than 3 buttons
+     * * otherwise vertical
+     *
+     * @type {('auto'|'horizontal'|'vertical')}
+     * @default 'auto'
+     * @public
+     */
+    buttonDirection: _propTypes["default"].oneOf(['auto', 'horizontal', 'vertical']),
     /**
      * Buttons to be included under the component.
      *
@@ -171,6 +184,7 @@ var AlertBase = exports.AlertBase = (0, _kind["default"])({
     type: _propTypes["default"].oneOf(['fullscreen', 'overlay'])
   },
   defaultProps: {
+    buttonDirection: 'auto',
     open: false,
     overlayPosition: 'center',
     type: 'fullscreen'
@@ -212,7 +226,8 @@ var AlertBase = exports.AlertBase = (0, _kind["default"])({
     }
   },
   render: function render(_ref4) {
-    var buttons = _ref4.buttons,
+    var buttonDirection = _ref4.buttonDirection,
+      buttons = _ref4.buttons,
       contentComponent = _ref4.contentComponent,
       children = _ref4.children,
       css = _ref4.css,
@@ -221,10 +236,25 @@ var AlertBase = exports.AlertBase = (0, _kind["default"])({
       overlayPosition = _ref4.overlayPosition,
       title = _ref4.title,
       type = _ref4.type,
+      style = _ref4.style,
       rest = _objectWithoutProperties(_ref4, _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 resolvedButtonDirection = buttonDirection;
+    if (buttonDirection === 'auto') {
+      var useHorizontal = type === 'overlay' && buttonCount === 2 || type === 'fullscreen' && buttonCount < 3;
+      resolvedButtonDirection = useHorizontal ? 'horizontal' : 'vertical';
+    }
+    var overlayHorizontalButtons = type === 'overlay' && resolvedButtonDirection === 'horizontal';
+    var popupStyle = style;
+    if (overlayHorizontalButtons) {
+      var overlayHorizontalButtonCount = Math.max(1, Math.min(buttonCount, 4));
+      popupStyle = _objectSpread(_objectSpread({}, style), {}, {
+        '--alert-overlay-horizontal-button-count': overlayHorizontalButtonCount
+      });
+    }
     var ariaLabelledBy = (showTitle ? "".concat(id, "_title ") : '') + "".concat(id, "_content ").concat(id, "_buttons");
     return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       "aria-owns": id,
@@ -235,6 +265,7 @@ var AlertBase = exports.AlertBase = (0, _kind["default"])({
         "aria-labelledby": ariaLabelledBy,
         css: css,
         position: position,
+        style: popupStyle,
         children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Layout["default"], {
           align: "center center",
           orientation: "vertical",
@@ -262,8 +293,8 @@ var AlertBase = exports.AlertBase = (0, _kind["default"])({
             shrink: true,
             className: css.buttonContainer,
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Layout["default"], {
-              align: "center",
-              orientation: "vertical",
+              align: "center center",
+              orientation: resolvedButtonDirection,
               id: "".concat(id, "_buttons"),
               children: buttons
             })

package/Alert/Alert.module.css

@@ -40,6 +40,7 @@
 .alert.overlay .buttonContainer {
   box-sizing: border-box;
   margin-top: var(--primitive-spacing-36);
+  padding: 0 var(--primitive-spacing-84);
 }
 .alert.overlay .content {
   align-self: stretch;
@@ -52,6 +53,7 @@
   word-break: keep-all;
   padding: 0 var(--primitive-spacing-84);
   margin: 0;
+  max-width: var(--alert-overlay-content-max-width, 23.5rem);
 }
 :global(.enact-locale-non-latin) .alert.overlay .content {
   font-family: "Limestone";
@@ -77,7 +79,16 @@
   word-break: normal;
 }
 .popup.overlay {
-  width: 23.5rem;
+  box-sizing: border-box;
+  --alert-overlay-horizontal-button-count: 1;
+  --alert-overlay-horizontal-button-width: NaNrem + (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-max-width: calc(var(--alert-overlay-width) - (2 * var(--alert-overlay-content-horizontal-padding)));
+  width: var(--alert-overlay-width);
+  min-width: 23.5rem;
+  max-width: calc(100vw - 2 * var(--primitive-spacing-60));
   margin-left: auto;
   margin-right: auto;
 }

package/Alert/tests/Alert-specs.js

@@ -102,6 +102,60 @@ 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 () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(FloatingLayerController, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Alert.Alert, {
+        open: true,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("buttons", {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Button["default"], {
+            children: "yes"
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button["default"], {
+            children: "no"
+          })]
+        })
+      })
+    }));
+    var alert = _react.screen.getByRole('alert');
+    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 () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(FloatingLayerController, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Alert.Alert, {
+        open: true,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("buttons", {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Button["default"], {
+            children: "yes"
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button["default"], {
+            children: "no"
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button["default"], {
+            children: "later"
+          })]
+        })
+      })
+    }));
+    var alert = _react.screen.getByRole('alert');
+    var buttonsLayout = alert.querySelector('[id$="_buttons"]');
+    expect(buttonsLayout).toHaveClass('vertical');
+  });
+  test('should allow overriding button direction to vertical', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(FloatingLayerController, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Alert.Alert, {
+        open: true,
+        buttonDirection: "vertical",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("buttons", {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Button["default"], {
+            children: "yes"
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button["default"], {
+            children: "no"
+          })]
+        })
+      })
+    }));
+    var alert = _react.screen.getByRole('alert');
+    var buttonsLayout = alert.querySelector('[id$="_buttons"]');
+    expect(buttonsLayout).toHaveClass('vertical');
+  });
 });
 describe('AlertOverlay specs', function () {
   test('should be rendered opened if open is set to true', function () {
@@ -201,4 +255,41 @@ describe('AlertOverlay specs', function () {
     var expectedClass = 'thumbnail';
     expect(image).toHaveClass(expectedClass);
   });
+  test('should align buttons horizontally by default in overlay when button count is 2', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(FloatingLayerController, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Alert.Alert, {
+        open: true,
+        type: "overlay",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("buttons", {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Button["default"], {
+            size: "small",
+            children: "yes"
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button["default"], {
+            size: "small",
+            children: "no"
+          })]
+        })
+      })
+    }));
+    var alert = _react.screen.getByRole('alert');
+    var buttonsLayout = alert.querySelector('[id$="_buttons"]');
+    expect(buttonsLayout).toHaveClass('horizontal');
+  });
+  test('should align buttons vertically by default in overlay when button count is not 2', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(FloatingLayerController, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Alert.Alert, {
+        open: true,
+        type: "overlay",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("buttons", {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button["default"], {
+            size: "small",
+            children: "yes"
+          })
+        })
+      })
+    }));
+    var alert = _react.screen.getByRole('alert');
+    var buttonsLayout = alert.querySelector('[id$="_buttons"]');
+    expect(buttonsLayout).toHaveClass('vertical');
+  });
 });

package/BodyText/BodyText.module.css

@@ -93,3 +93,24 @@
 :global(.enact-locale-ja) .bodyText {
   line-break: strict;
 }
+.bodyText:global(.largeText) {
+  font-size: var(--primitive-font-size-72);
+}
+.bodyText:global(.largeText).small {
+  font-size: var(--primitive-font-size-66);
+}
+:global(.enact-locale-km) .bodyText:global(.largeText).small {
+  font-size: var(--primitive-font-size-60);
+}
+:global(.enact-locale-si) .bodyText:global(.largeText).small {
+  font-size: var(--primitive-font-size-60);
+}
+:global(.enact-locale-th) .bodyText:global(.largeText).small {
+  font-size: var(--primitive-font-size-60);
+}
+:global(.enact-locale-vi) .bodyText:global(.largeText).small {
+  font-size: var(--primitive-font-size-60);
+}
+:global(.enact-locale-non-latin) .bodyText:global(.largeText).small {
+  font-size: var(--primitive-font-size-60);
+}

package/Button/Button.module.css

@@ -107,11 +107,26 @@ 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;
+  min-width: 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 +184,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 +309,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,20 +359,34 @@ 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;
+  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,
+.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;
+  min-width: 2.75rem;
 }
 .button.iconOnly .client {
   padding: 0;
@@ -357,7 +414,7 @@ Motion Mixins
   padding-right: 0.375rem;
 }
 .button.iconOnly.small:global(.largeText) {
-  min-width: 3rem;
+  min-width: 2.25rem;
 }
 .button.iconOnly.iconAfter .icon,
 .button.iconOnly.iconBefore .icon,
@@ -369,34 +426,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;

package/Button/tests/Button-specs.js

@@ -30,6 +30,32 @@ describe('Button', function () {
     var expected = 'focusExpand';
     expect(button).toHaveClass(expected);
   });
+  test('should be pressed when selected', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Button["default"], {}));
+    var button = _react.screen.getByRole('button');
+
+    // Select by key
+    _react.fireEvent.keyDown(button, {
+      key: 'Enter',
+      code: 'Enter',
+      keyCode: 13,
+      which: 13
+    });
+    expect(button).toHaveClass('pressed');
+    _react.fireEvent.keyUp(button, {
+      key: 'Enter',
+      code: 'Enter',
+      keyCode: 13,
+      which: 13
+    });
+    expect(button).not.toHaveClass('pressed');
+
+    // Select by pointer
+    _react.fireEvent.mouseDown(button);
+    expect(button).toHaveClass('pressed');
+    _react.fireEvent.mouseUp(button);
+    expect(button).not.toHaveClass('pressed');
+  });
   test('should be able to disable the expand focus effect', function () {
     (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.ButtonBase, {
       focusEffect: "static"

package/CHANGELOG.md

@@ -2,6 +2,80 @@
 
 The following is a curated list of changes in the Enact limestone module, newest changes on the top.
 
+## [1.10.1] - 2026-06-01 
+
+### 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
+
+- `limestone/Alert` `buttonDirection` prop to control button layout direction (`auto`, `horizontal`, `vertical`)
+- `limestone/Icon` supported icon list, adding new icon `f1`
+- `limestone/Input` props `marqueeInputField` to marquee inputField text on focus
+- `limestone/Inputfield` prop `caretToEndOnFocus` to move caret to the end of the input field on input activation via 5-way
+- `limestone/Inputfield` prop `marqueeContent` to marquee text on focus
+- `limestone/PageViews` `showFooterButtons` prop to show optional Close/Next buttons
+- `limestone/PageViews` `footerCloseLabel` prop to custom the Close button label
+- `limestone/PageViews` `onFooterCloseClick` prop to custom the Close button behavior when it is clicked
+- `limestone/Slider` `colorPicker` prop to change slider functionality
+- `limestone/ThemeDecorator` config `focusEffectClass` to support customization for spottable components
+
+### Changed
+
+- `limestone/Slider` styling to match the latest GUI
+- `@storybook/addon-docs` version to `^10.3.4`.
+- `@storybook/react-webpack5` version to `^10.3.4`.
+- `storybook` version to `^10.3.4`.
+
+### Fixed
+
+- `limestone/Card` `captionOverlayOnFocus` prop to work in `focusRing` mode
+- `limestone/Card` press motion to work with key press
+- `limestone/Dropdown` button to match `DropdownList` items size when `size` is `small`
+- `limestone/IconItem` press motion to work with key press
+- `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
+
 ## [1.9.3] - 2026-04-20
 
 ### Fixed

package/Card/Card.d.ts

@@ -10,10 +10,6 @@ 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;
 
 export interface CardBaseProps extends ui_Card_CardProps {
-  /**
-   * The primary caption displayed with the image.
-   */
-  children: string;
   /**
  * Source for the image.
 String value or Object of values used to determine which image will appear on
@@ -38,6 +34,10 @@ It only applies when  `orientation`  is  `'vertical'` .
    * Centers the captions when  `imageIconSrc`  is not provided.
    */
   centered?: boolean;
+  /**
+   * The primary caption displayed with the image.
+   */
+  children?: string;
   /**
  * Customizes the component by mapping the supplied collection of CSS class names to the
 corresponding internal elements and states of this component.

package/Card/Card.js

@@ -72,14 +72,6 @@ var getDefaultImageSize = function getDefaultImageSize(orientation) {
 var CardBase = exports.CardBase = (0, _kind["default"])({
   name: 'Card',
   propTypes: /** @lends limestone/Card.CardBase.prototype */{
-    /**
-     * The primary caption displayed with the image.
-     *
-     * @type {String}
-     * @required
-     * @public
-     */
-    children: _propTypes["default"].string.isRequired,
     /**
      * Source for the image.
      * String value or Object of values used to determine which image will appear on
@@ -120,6 +112,13 @@ var CardBase = exports.CardBase = (0, _kind["default"])({
      * @public
      */
     centered: _propTypes["default"].bool,
+    /**
+     * The primary caption displayed with the image.
+     *
+     * @type {String}
+     * @public
+     */
+    children: _propTypes["default"].string,
     /**
      * Customizes the component by mapping the supplied collection of CSS class names to the
      * corresponding internal elements and states of this component.
@@ -419,10 +418,12 @@ var CardBase = exports.CardBase = (0, _kind["default"])({
       var captionOverlay = _ref4.captionOverlay,
         captionOverlayOnFocus = _ref4.captionOverlayOnFocus,
         icon = _ref4.icon,
+        label = _ref4.label,
         pressed = _ref4.pressed,
         roundedImage = _ref4.roundedImage,
         hasContainer = _ref4.hasContainer,
         orientation = _ref4.orientation,
+        secondaryLabel = _ref4.secondaryLabel,
         styler = _ref4.styler;
       return styler.append({
         captionOverlay: captionOverlay && orientation === 'vertical',
@@ -430,6 +431,7 @@ var CardBase = exports.CardBase = (0, _kind["default"])({
         pressed: pressed,
         roundedImage: roundedImage,
         hasContainer: orientation === 'horizontal' || hasContainer && !captionOverlay,
+        hasLabel: orientation === 'vertical' && label && secondaryLabel,
         isCheckIcon: icon === 'check'
       });
     },