@enact/limestone 1.9.3 → 1.10.1

package/KeyGuide/KeyGuide.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports["default"] = exports.KeyGuideDecorator = exports.KeyGuideBase = exports.KeyGuide = void 0;
 var _kind = _interopRequireDefault(require("@enact/core/kind"));
 var _propTypes = _interopRequireDefault(require("@enact/core/internal/prop-types"));
+var _util = require("@enact/core/util");
 var _FloatingLayer = _interopRequireDefault(require("@enact/ui/FloatingLayer"));
 var _Pure = _interopRequireDefault(require("@enact/ui/internal/Pure"));
 var _Layout = require("@enact/ui/Layout");
@@ -50,9 +51,10 @@ function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e =
 function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
 var colorKeys = ['red', 'green', 'yellow', 'blue'];
-var ImageItemBase = function ImageItemBase(_ref) {
-  var children = _ref.children,
-    imageSrc = _ref.imageSrc;
+var _ImageItemBase = function ImageItemBase(props) {
+  (0, _util.checkPropTypes)(_ImageItemBase, props);
+  var children = props.children,
+    imageSrc = props.imageSrc;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Layout.Row, {
     className: _KeyGuideModule["default"].imageItem,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Layout.Cell, {
@@ -70,7 +72,7 @@ var ImageItemBase = function ImageItemBase(_ref) {
     })]
   });
 };
-ImageItemBase.propTypes = {
+_ImageItemBase.propTypes = {
   children: _propTypes2["default"].node,
   imageSrc: _propTypes2["default"].string
 };
@@ -112,14 +114,14 @@ var KeyGuideBase = exports.KeyGuideBase = (0, _kind["default"])({
     	 * @type {Array.<{children: (String|Component), key: (Number|String), icon: (String|Object|'red'|'green'|'yellow'|'blue')}>|Object.<{children: (String|Component), imageSrc: (String|Object)}>}
      * @public
      */
-    children: _propTypes2["default"].arrayOf(_propTypes2["default"].shape({
+    children: _propTypes2["default"].oneOfType([_propTypes2["default"].arrayOf(_propTypes2["default"].shape({
       children: _propTypes["default"].renderable.isRequired,
       key: _propTypes2["default"].oneOfType([_propTypes2["default"].string, _propTypes2["default"].number]).isRequired,
       icon: _propTypes2["default"].oneOfType([_propTypes2["default"].string, _propTypes2["default"].object])
-    })) || _propTypes2["default"].shape({
+    })), _propTypes2["default"].shape({
       children: _propTypes["default"].renderable.isRequired,
       imageSrc: _propTypes2["default"].oneOfType([_propTypes2["default"].string, _propTypes2["default"].object]).isRequired
-    }),
+    })]),
     /**
      * Customizes the component by mapping the supplied collection of CSS class names to the
      * corresponding internal elements and states of this component.
@@ -145,15 +147,15 @@ var KeyGuideBase = exports.KeyGuideBase = (0, _kind["default"])({
     arrowPosition: 'none'
   },
   computed: {
-    children: function children(_ref2) {
-      var _children = _ref2.children,
-        css = _ref2.css;
+    children: function children(_ref) {
+      var _children = _ref.children,
+        css = _ref.css;
       if (_children !== null && _children !== void 0 && _children.imageSrc) {
         return _children;
       } else {
-        return _children ? _children.map(function (_ref3) {
-          var icon = _ref3.icon,
-            child = _objectWithoutProperties(_ref3, _excluded);
+        return _children ? _children.map(function (_ref2) {
+          var icon = _ref2.icon,
+            child = _objectWithoutProperties(_ref2, _excluded);
           var isColorKey = colorKeys.includes(icon);
           return _objectSpread(_objectSpread({}, child), {}, {
             slotBefore: isColorKey ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
@@ -167,15 +169,15 @@ var KeyGuideBase = exports.KeyGuideBase = (0, _kind["default"])({
         }) : [];
       }
     },
-    className: function className(_ref4) {
-      var arrowPosition = _ref4.arrowPosition,
-        children = _ref4.children,
-        styler = _ref4.styler;
+    className: function className(_ref3) {
+      var arrowPosition = _ref3.arrowPosition,
+        children = _ref3.children,
+        styler = _ref3.styler;
       return styler.append(Array.isArray(children) ? 'iconGuide' : 'imageGuide', arrowPosition === 'none' || Array.isArray(children) ? 'noArrow' : "".concat(arrowPosition, "Arrow"));
     },
-    open: function open(_ref5) {
-      var children = _ref5.children,
-        _open = _ref5.open;
+    open: function open(_ref4) {
+      var children = _ref4.children,
+        _open = _ref4.open;
       return children && (children.imageSrc || children.length > 0) && _open;
     }
   },
@@ -184,12 +186,12 @@ var KeyGuideBase = exports.KeyGuideBase = (0, _kind["default"])({
     className: 'keyGuide',
     publicClassNames: ['keyGuide', 'imageGuide']
   },
-  render: function render(_ref6) {
-    var className = _ref6.className,
-      css = _ref6.css,
-      children = _ref6.children,
-      open = _ref6.open,
-      rest = _objectWithoutProperties(_ref6, _excluded2);
+  render: function render(_ref5) {
+    var className = _ref5.className,
+      css = _ref5.css,
+      children = _ref5.children,
+      open = _ref5.open,
+      rest = _objectWithoutProperties(_ref5, _excluded2);
     delete rest.arrowPosition;
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_FloatingLayer["default"], {
       noAutoDismiss: true,
@@ -206,7 +208,7 @@ var KeyGuideBase = exports.KeyGuideBase = (0, _kind["default"])({
         children: children
       })) : /*#__PURE__*/(0, _jsxRuntime.jsx)("div", _objectSpread(_objectSpread({}, rest), {}, {
         className: className,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ImageItemBase, _objectSpread({}, children))
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ImageItemBase, _objectSpread({}, children))
       }))
     });
   }

package/KeyGuide/KeyGuide.module.css

@@ -62,6 +62,16 @@
 .keyGuide .imageItem .text .bodyText {
   margin: 0;
 }
+.keyGuide:global(.largeText) .item {
+  font-size: var(--primitive-font-size-72);
+}
+.keyGuide:global(.largeText) .item .slotBefore .red,
+.keyGuide:global(.largeText) .item .slotBefore .green,
+.keyGuide:global(.largeText) .item .slotBefore .yellow,
+.keyGuide:global(.largeText) .item .slotBefore .blue {
+  width: calc(1.25rem * 1.2);
+  height: calc(0.25rem * 1.2);
+}
 .keyGuide:global(.neutral) {
   background: var(--semantic-color-surface-overlay-default);
   outline-color: transparent;

package/MediaOverlay/MediaOverlay.module.css

@@ -157,13 +157,13 @@ Motion Mixins
 .mediaOverlay .text {
   font-family: "Limestone";
   font-size: var(--primitive-font-size-48);
-  line-height: 1.3em;
+  line-height: 1.25rem;
   margin-bottom: var(--primitive-spacing-36);
 }
 :global(.enact-locale-non-latin) .mediaOverlay .text {
   font-family: "Limestone";
   font-size: var(--primitive-font-size-48);
-  line-height: 1.3em;
+  line-height: 1.25rem;
 }
 .mediaOverlay .progressBar {
   position: absolute;
@@ -195,12 +195,24 @@ Motion Mixins
 .mediaOverlay .subtitle {
   font-family: "Limestone";
   font-size: var(--primitive-font-size-48);
-  line-height: 1.3em;
+  line-height: 1.25rem;
 }
 :global(.enact-locale-non-latin) .mediaOverlay .subtitle {
   font-family: "Limestone";
   font-size: var(--primitive-font-size-48);
-  line-height: 1.3em;
+  line-height: 1.25rem;
+}
+.mediaOverlay:global(.largeText) .text {
+  font-size: var(--primitive-font-size-60);
+  line-height: 1.45833rem;
+}
+.mediaOverlay:global(.largeText) .caption,
+.mediaOverlay:global(.largeText) .title {
+  font-size: var(--primitive-font-size-72);
+}
+.mediaOverlay:global(.largeText) .subtitle {
+  font-size: var(--primitive-font-size-58);
+  line-height: 1.45833rem;
 }
 .mediaOverlay:global(.neutral) .bg {
   opacity: 0;

package/MediaOverlay/tests/MediaOverlay-specs.js

@@ -124,4 +124,33 @@ describe('MediaOverlay', function () {
     var actual = _react.screen.getByTestId('mediaOverlay');
     expect(actual).toBe(expected);
   });
+  test('should be pressed when selected', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_MediaOverlay["default"], {
+      "data-testid": "mediaOverlay",
+      source: "abc.mp4"
+    }));
+    var mediaOverlay = _react.screen.getByTestId('mediaOverlay');
+
+    // Select by key
+    _react.fireEvent.keyDown(mediaOverlay, {
+      key: 'Enter',
+      code: 'Enter',
+      keyCode: 13,
+      which: 13
+    });
+    expect(mediaOverlay).toHaveClass('pressed');
+    _react.fireEvent.keyUp(mediaOverlay, {
+      key: 'Enter',
+      code: 'Enter',
+      keyCode: 13,
+      which: 13
+    });
+    expect(mediaOverlay).not.toHaveClass('pressed');
+
+    // Select by pointer
+    _react.fireEvent.mouseDown(mediaOverlay);
+    expect(mediaOverlay).toHaveClass('pressed');
+    _react.fireEvent.mouseUp(mediaOverlay);
+    expect(mediaOverlay).not.toHaveClass('pressed');
+  });
 });

package/MediaPlayer/MediaControls.module.css

@@ -24,6 +24,9 @@
 .controlsFrame .mediaControls .button .icon {
   --icon-size: 2.25rem;
 }
+.controlsFrame .mediaControls .button:global(.largeText) .icon {
+  --icon-size: 2.70833rem;
+}
 .controlsFrame .actionGuide {
   height: 3.5rem;
   padding-bottom: 0;

package/MediaPlayer/Times.module.css

@@ -23,6 +23,10 @@
 :global(.enact-locale-vi) .times {
   line-height: 1.7em;
 }
+:global(.largeText) .times {
+  font-size: var(--primitive-font-size-58);
+  line-height: 1.45833rem;
+}
 .times > * {
   display: inline-block;
 }

package/MediaPlayer/tests/util-specs.js

@@ -3,6 +3,7 @@
 var _util = require("@enact/core/util");
 var _DurationFmt = _interopRequireDefault(require("ilib/lib/DurationFmt"));
 var _react = require("@testing-library/react");
+var _react2 = require("react");
 var _util2 = require("../util");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
@@ -25,7 +26,9 @@ describe('util', function () {
       var actual;
       var Parent = function Parent(_ref) {
         var children = _ref.children;
-        actual = (0, _util2.countReactChildren)(children);
+        (0, _react2.useEffect)(function () {
+          actual = (0, _util2.countReactChildren)(children);
+        }, [children]);
         return /*#__PURE__*/(0, _jsxRuntime.jsx)("ul", {
           children: children
         });

package/PageViews/PageViews.js

@@ -28,7 +28,7 @@ var _Steps = _interopRequireDefault(require("../Steps"));
 var _PageViewsRouter = require("./PageViewsRouter");
 var _PageViewsModule = _interopRequireDefault(require("./PageViews.module.css"));
 var _jsxRuntime = require("react/jsx-runtime");
-var _excluded = ["css", "componentRef", "fullContents", "index", "pageIndicatorPosition", "pageIndicatorType", "renderNextButton", "renderPrevButton", "renderViewManager", "stepHintAriaLabel", "steps", "uniqueId"];
+var _excluded = ["css", "componentRef", "fullContents", "index", "pageIndicatorPosition", "pageIndicatorType", "renderFooterButtons", "renderNextButton", "renderPrevButton", "renderViewManager", "stepHintAriaLabel", "steps", "uniqueId"];
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
@@ -88,6 +88,7 @@ var PageViewsBase = (0, _kind["default"])({
     arranger: _ViewManager.shape,
     /**
      * When `true`, disables Spotlight outside the container and enables 5-way navigation between panels.
+     * Footer buttons are hidden when bannerMode is true.
      *
      * @type {Boolean}
      * @public
@@ -115,6 +116,7 @@ var PageViewsBase = (0, _kind["default"])({
      *
      * * `pageViews` - The root component class
      * * `contentsArea` - The contentsArea component class
+     * * `footerButtons` - The footerButtons component class
      * * `navButton` - The navButton component class
      * * `navButtonContainer` - Applied to the container containing navButtons in fullContents mode
      * * `stepsRow` - The step component class
@@ -123,6 +125,14 @@ var PageViewsBase = (0, _kind["default"])({
      * @public
      */
     css: _propTypes2["default"].object,
+    /**
+     * The label of the footer Close button.
+     *
+     * @type {String}
+     * @default 'Close'
+     * @public
+     */
+    footerCloseLabel: _propTypes2["default"].string,
     /**
      * When `true`, maximize its contents area.
      *
@@ -146,6 +156,13 @@ var PageViewsBase = (0, _kind["default"])({
      * @public
      */
     noAnimation: _propTypes2["default"].bool,
+    /**
+     * Called when the footer Close button is clicked.
+     *
+     * @type {Function}
+     * @public
+     */
+    onFooterCloseClick: _propTypes2["default"].func,
     /**
      * Called when a transition completes.
      *
@@ -188,6 +205,15 @@ var PageViewsBase = (0, _kind["default"])({
      * @private
      */
     reverseTransition: _propTypes2["default"].bool,
+    /**
+     * When `true`, renders footer Close and Next buttons below the page content.
+     * Footer buttons are hidden when `bannerMode` is true.
+     *
+     * @type {Boolean}
+     * @default false
+     * @public
+     */
+    showFooterButtons: _propTypes2["default"].bool,
     /**
      * The total number of pages.
      *
@@ -206,7 +232,8 @@ var PageViewsBase = (0, _kind["default"])({
   defaultProps: {
     arranger: _Panels.BasicArranger,
     pageIndicatorPosition: 'bottom',
-    pageIndicatorType: 'dot'
+    pageIndicatorType: 'dot',
+    showFooterButtons: false
   },
   styles: {
     css: _PageViewsModule["default"],
@@ -237,25 +264,31 @@ var PageViewsBase = (0, _kind["default"])({
         navigableFilter: null
       });
     }),
-    onNextClick: (0, _handle["default"])((0, _handle.forwardCustomWithPrevent)('onNextClick'), function (ev, _ref3) {
+    onFooterNextClick: (0, _handle["default"])((0, _handle.forwardCustomWithPrevent)('onFooterNextClick'), function (ev, _ref3) {
       var index = _ref3.index,
         onChange = _ref3.onChange,
         totalIndex = _ref3.totalIndex;
       handlePageChange(index, onChange, totalIndex);
     }),
-    onPrevClick: (0, _handle["default"])((0, _handle.forwardCustomWithPrevent)('onPrevClick'), function (ev, _ref4) {
+    onNextClick: (0, _handle["default"])((0, _handle.forwardCustomWithPrevent)('onNextClick'), function (ev, _ref4) {
       var index = _ref4.index,
-        onChange = _ref4.onChange;
+        onChange = _ref4.onChange,
+        totalIndex = _ref4.totalIndex;
+      handlePageChange(index, onChange, totalIndex);
+    }),
+    onPrevClick: (0, _handle["default"])((0, _handle.forwardCustomWithPrevent)('onPrevClick'), function (ev, _ref5) {
+      var index = _ref5.index,
+        onChange = _ref5.onChange;
       handlePageChange(index, onChange);
     }),
-    onPointerOver: (0, _handle["default"])((0, _handle.forProp)('bannerMode', true), function (ev, _ref5) {
-      var uniqueId = _ref5.uniqueId;
+    onPointerOver: (0, _handle["default"])((0, _handle.forProp)('bannerMode', true), function (ev, _ref6) {
+      var uniqueId = _ref6.uniqueId;
       return _spotlight["default"].set('banner-container' + uniqueId, {
         navigableFilter: null
       });
     }),
-    onStepsClick: (0, _handle["default"])((0, _handle.forProp)('bannerMode', true), (0, _handle.forwardCustomWithPrevent)('onStepsClick'), function (ev, _ref6) {
-      var onChange = _ref6.onChange;
+    onStepsClick: (0, _handle["default"])((0, _handle.forProp)('bannerMode', true), (0, _handle.forwardCustomWithPrevent)('onStepsClick'), function (ev, _ref7) {
+      var onChange = _ref7.onChange;
       var node = ev.target;
       var index = parseInt(node.getAttribute('data-index'));
       if (node.children.length) return;
@@ -264,10 +297,10 @@ var PageViewsBase = (0, _kind["default"])({
         index: index
       });
     }),
-    onTransition: function onTransition(ev, _ref7) {
-      var index = _ref7.index,
-        _onTransition = _ref7.onTransition,
-        uniqueId = _ref7.uniqueId;
+    onTransition: function onTransition(ev, _ref8) {
+      var index = _ref8.index,
+        _onTransition = _ref8.onTransition,
+        uniqueId = _ref8.uniqueId;
       _spotlight["default"].focus('banner-view-manager' + uniqueId);
       _spotlight["default"].resume();
       if (_onTransition) {
@@ -277,9 +310,9 @@ var PageViewsBase = (0, _kind["default"])({
         });
       }
     },
-    onWillTransition: function onWillTransition(ev, _ref8) {
-      var index = _ref8.index,
-        _onWillTransition = _ref8.onWillTransition;
+    onWillTransition: function onWillTransition(ev, _ref9) {
+      var index = _ref9.index,
+        _onWillTransition = _ref9.onWillTransition;
       _spotlight["default"].pause();
       if (_onWillTransition) {
         _onWillTransition({
@@ -290,20 +323,47 @@ var PageViewsBase = (0, _kind["default"])({
     }
   },
   computed: {
-    className: function className(_ref9) {
-      var fullContents = _ref9.fullContents,
-        pageIndicatorPosition = _ref9.pageIndicatorPosition,
-        pageIndicatorType = _ref9.pageIndicatorType,
-        styler = _ref9.styler;
+    className: function className(_ref0) {
+      var fullContents = _ref0.fullContents,
+        pageIndicatorPosition = _ref0.pageIndicatorPosition,
+        pageIndicatorType = _ref0.pageIndicatorType,
+        styler = _ref0.styler;
       return styler.append({
         fullContents: fullContents
       }, "indicator".concat((0, _util.cap)(pageIndicatorPosition)), pageIndicatorType);
     },
-    renderNextButton: function renderNextButton(_ref0) {
-      var css = _ref0.css,
-        onNextClick = _ref0.onNextClick,
-        index = _ref0.index,
-        totalIndex = _ref0.totalIndex;
+    renderFooterButtons: function renderFooterButtons(_ref1) {
+      var bannerMode = _ref1.bannerMode,
+        css = _ref1.css,
+        footerCloseLabel = _ref1.footerCloseLabel,
+        index = _ref1.index,
+        onFooterCloseClick = _ref1.onFooterCloseClick,
+        onFooterNextClick = _ref1.onFooterNextClick,
+        showFooterButtons = _ref1.showFooterButtons,
+        totalIndex = _ref1.totalIndex,
+        uniqueId = _ref1.uniqueId;
+      if (!showFooterButtons || bannerMode) return null;
+      var isLastPage = index >= totalIndex - 1;
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Layout.Row, {
+        className: css.footerButtons,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Button["default"], {
+          className: isLastPage ? _SpotlightContainerDecorator.spotlightDefaultClass : null,
+          spotlightId: "PageViews-footer-close" + uniqueId,
+          onClick: onFooterCloseClick,
+          children: footerCloseLabel || (0, _$L["default"])('Close')
+        }), !isLastPage ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button["default"], {
+          className: _SpotlightContainerDecorator.spotlightDefaultClass,
+          spotlightId: "PageViews-footer-next" + uniqueId,
+          onClick: onFooterNextClick,
+          children: (0, _$L["default"])('Next')
+        }) : null]
+      });
+    },
+    renderNextButton: function renderNextButton(_ref10) {
+      var css = _ref10.css,
+        onNextClick = _ref10.onNextClick,
+        index = _ref10.index,
+        totalIndex = _ref10.totalIndex;
       var isNextButtonVisible = index < totalIndex - 1;
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Layout.Cell, {
         className: css.navButtonCell,
@@ -318,10 +378,10 @@ var PageViewsBase = (0, _kind["default"])({
         }) : null
       });
     },
-    renderPrevButton: function renderPrevButton(_ref1) {
-      var css = _ref1.css,
-        index = _ref1.index,
-        onPrevClick = _ref1.onPrevClick;
+    renderPrevButton: function renderPrevButton(_ref11) {
+      var css = _ref11.css,
+        index = _ref11.index,
+        onPrevClick = _ref11.onPrevClick;
       var isPrevButtonVisible = index !== 0;
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Layout.Cell, {
         className: css.navButtonCell,
@@ -336,17 +396,17 @@ var PageViewsBase = (0, _kind["default"])({
         }) : null
       });
     },
-    renderViewManager: function renderViewManager(_ref10) {
-      var arranger = _ref10.arranger,
-        bannerMode = _ref10.bannerMode,
-        css = _ref10.css,
-        index = _ref10.index,
-        noAnimation = _ref10.noAnimation,
-        onTransition = _ref10.onTransition,
-        onWillTransition = _ref10.onWillTransition,
-        reverseTransition = _ref10.reverseTransition,
-        uniqueId = _ref10.uniqueId,
-        children = _ref10.children;
+    renderViewManager: function renderViewManager(_ref12) {
+      var arranger = _ref12.arranger,
+        bannerMode = _ref12.bannerMode,
+        css = _ref12.css,
+        index = _ref12.index,
+        noAnimation = _ref12.noAnimation,
+        onTransition = _ref12.onTransition,
+        onWillTransition = _ref12.onWillTransition,
+        reverseTransition = _ref12.reverseTransition,
+        uniqueId = _ref12.uniqueId,
+        children = _ref12.children;
       var CellComponent = bannerMode ? SpottableCell : _Layout.Cell;
       var props = {};
       if (bannerMode) props.spotlightId = "banner-view-manager" + uniqueId;
@@ -364,26 +424,26 @@ var PageViewsBase = (0, _kind["default"])({
         children: children
       }));
     },
-    stepHintAriaLabel: function stepHintAriaLabel(_ref11) {
+    stepHintAriaLabel: function stepHintAriaLabel(_ref13) {
       var _children$index;
-      var children = _ref11.children,
-        index = _ref11.index,
-        totalIndex = _ref11.totalIndex;
+      var children = _ref13.children,
+        index = _ref13.index,
+        totalIndex = _ref13.totalIndex;
       var pageHint = new _IString["default"]((0, _$L["default"])('Page {current} out of {total}')).format({
         current: index + 1,
         total: totalIndex
       });
       return "".concat(pageHint, " ").concat((children === null || children === void 0 || (_children$index = children[index]) === null || _children$index === void 0 ? void 0 : _children$index.props['aria-label']) || '');
     },
-    steps: function steps(_ref12) {
-      var bannerMode = _ref12.bannerMode,
-        css = _ref12.css,
-        index = _ref12.index,
-        onNextClick = _ref12.onNextClick,
-        onPrevClick = _ref12.onPrevClick,
-        onStepsClick = _ref12.onStepsClick,
-        pageIndicatorType = _ref12.pageIndicatorType,
-        totalIndex = _ref12.totalIndex;
+    steps: function steps(_ref14) {
+      var bannerMode = _ref14.bannerMode,
+        css = _ref14.css,
+        index = _ref14.index,
+        onNextClick = _ref14.onNextClick,
+        onPrevClick = _ref14.onPrevClick,
+        onStepsClick = _ref14.onStepsClick,
+        pageIndicatorType = _ref14.pageIndicatorType,
+        totalIndex = _ref14.totalIndex;
       var isPrevButtonVisible = index !== 0;
       var isNextButtonVisible = index < totalIndex - 1;
       var isStepVisible = totalIndex !== 1;
@@ -436,24 +496,28 @@ var PageViewsBase = (0, _kind["default"])({
       });
     }
   },
-  render: function render(_ref13) {
-    var css = _ref13.css,
-      componentRef = _ref13.componentRef,
-      fullContents = _ref13.fullContents,
-      index = _ref13.index,
-      pageIndicatorPosition = _ref13.pageIndicatorPosition,
-      pageIndicatorType = _ref13.pageIndicatorType,
-      renderNextButton = _ref13.renderNextButton,
-      renderPrevButton = _ref13.renderPrevButton,
-      renderViewManager = _ref13.renderViewManager,
-      stepHintAriaLabel = _ref13.stepHintAriaLabel,
-      steps = _ref13.steps,
-      uniqueId = _ref13.uniqueId,
-      rest = _objectWithoutProperties(_ref13, _excluded);
+  render: function render(_ref15) {
+    var css = _ref15.css,
+      componentRef = _ref15.componentRef,
+      fullContents = _ref15.fullContents,
+      index = _ref15.index,
+      pageIndicatorPosition = _ref15.pageIndicatorPosition,
+      pageIndicatorType = _ref15.pageIndicatorType,
+      renderFooterButtons = _ref15.renderFooterButtons,
+      renderNextButton = _ref15.renderNextButton,
+      renderPrevButton = _ref15.renderPrevButton,
+      renderViewManager = _ref15.renderViewManager,
+      stepHintAriaLabel = _ref15.stepHintAriaLabel,
+      steps = _ref15.steps,
+      uniqueId = _ref15.uniqueId,
+      rest = _objectWithoutProperties(_ref15, _excluded);
     delete rest.arranger;
     delete rest.bannerMode;
     delete rest.children;
+    delete rest.footerCloseLabel;
     delete rest.noAnimation;
+    delete rest.onFooterCloseClick;
+    delete rest.onFooterNextClick;
     delete rest.onNextClick;
     delete rest.onStepsClick;
     delete rest.onPrevClick;
@@ -461,6 +525,7 @@ var PageViewsBase = (0, _kind["default"])({
     delete rest.onWillTransition;
     delete rest.reverseTransition;
     delete rest.rtl;
+    delete rest.showFooterButtons;
     delete rest.totalIndex;
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", _objectSpread(_objectSpread({
       role: "region",
@@ -484,7 +549,7 @@ var PageViewsBase = (0, _kind["default"])({
           className: css.horizontalLayout,
           children: [pageIndicatorType === 'dot' ? renderPrevButton : null, renderViewManager, pageIndicatorType === 'dot' ? renderNextButton : null]
         })
-      }), !fullContents && pageIndicatorPosition === 'bottom' ? steps : null]
+      }), !fullContents && pageIndicatorPosition === 'bottom' ? steps : null, renderFooterButtons]
     }));
   }
 });

package/PageViews/PageViews.module.css

@@ -50,6 +50,10 @@
   justify-content: space-evenly;
   padding: 0 var(--primitive-spacing-36);
   width: 3.5rem;
+  font-size: var(--primitive-font-size-60);
+}
+:global(.largeText) .pageViews.number .stepsRow .pageNumber {
+  font-size: var(--primitive-font-size-72);
 }
 .pageViews.number .stepsRow .pageNumber .separator {
   width: 0.6875rem;
@@ -100,6 +104,9 @@
 .pageViews .horizontalLayout {
   height: 100%;
 }
+.pageViews .footerButtons {
+  justify-content: center;
+}
 .pageViews:global(.neutral) .viewManager {
   background-color: color(from var(--semantic-color-surface-default-group) srgb r g b / 0.1);
 }