@enact/limestone 1.10.0 → 1.10.2

package/TooltipDecorator/Tooltip.module.css

@@ -37,7 +37,7 @@
   line-height: 1.5rem;
   white-space: nowrap;
   width: var(--lime-tooltip-label-width);
-  max-width: 25rem;
+  max-width: var(--lime-tooltip-label-width, 25rem);
   padding: var(--primitive-spacing-12) var(--primitive-spacing-48);
   border-radius: var(--semantic-radius-button);
 }
@@ -53,6 +53,19 @@
 :global(.enact-locale-right-to-left) .tooltip .tooltipLabel {
   text-align: right;
 }
+.tooltip .tooltipLabel .tooltipImage {
+  margin: 0;
+  border-radius: var(--semantic-radius-button);
+  width: var(--lime-tooltip-image-width, 20rem);
+  height: var(--lime-tooltip-image-height, 11.25rem);
+}
+.tooltip .tooltipLabel.image {
+  display: flex;
+  flex-direction: column;
+  border-radius: var(--semantic-radius-container);
+  gap: var(--primitive-spacing-36);
+  padding: var(--primitive-spacing-60);
+}
 .tooltip .tooltipLabel.marquee {
   max-width: var(--lime-tooltip-label-width, 12.5rem);
 }
@@ -62,6 +75,10 @@
 :global(.enact-locale-ja) .tooltip .tooltipLabel.multi {
   line-break: strict;
 }
+.tooltip:global(.largeText) .tooltipLabel {
+  font-size: var(--primitive-font-size-66);
+  line-height: 1.75rem;
+}
 .tooltip.balloon {
   /* Needed to prevent global class being added in the DOM */
 }
@@ -101,6 +118,8 @@
 }
 .tooltip.below.leftArrow .tooltipLabel {
   text-align: right;
+}
+.tooltip.below.leftArrow .tooltipLabel:not(.noArrow) {
   border-top-right-radius: 0;
 }
 .tooltip.below.centerArrow .tooltipArrow {
@@ -120,7 +139,7 @@
   transform-origin: top left;
   transform: rotate(45deg) skew(45deg, 0);
 }
-.tooltip.below.rightArrow .tooltipLabel {
+.tooltip.below.rightArrow .tooltipLabel:not(.noArrow) {
   border-top-left-radius: 0;
 }
 .tooltip.above .tooltipArrow {
@@ -140,6 +159,8 @@
 }
 .tooltip.above.leftArrow .tooltipLabel {
   text-align: right;
+}
+.tooltip.above.leftArrow .tooltipLabel:not(.noArrow) {
   border-bottom-right-radius: 0;
 }
 .tooltip.above.centerArrow .tooltipArrow::after {
@@ -156,7 +177,7 @@
   transform-origin: bottom left;
   transform: rotate(-45deg) skew(-45deg, 0);
 }
-.tooltip.above.rightArrow .tooltipLabel {
+.tooltip.above.rightArrow .tooltipLabel:not(.noArrow) {
   border-bottom-left-radius: 0;
 }
 .tooltip.left .tooltipArrow {
@@ -174,7 +195,7 @@
   transform-origin: bottom right;
   transform: rotate(-45deg) skew(0, 45deg);
 }
-.tooltip.left.topArrow .tooltipLabel {
+.tooltip.left.topArrow .tooltipLabel:not(.noArrow) {
   border-bottom-right-radius: 0;
 }
 .tooltip.left.middleArrow .tooltipArrow::after {
@@ -190,7 +211,7 @@
   transform-origin: top right;
   transform: rotate(45deg) skew(0, -45deg);
 }
-.tooltip.left.bottomArrow .tooltipLabel {
+.tooltip.left.bottomArrow .tooltipLabel:not(.noArrow) {
   border-top-right-radius: 0;
 }
 .tooltip.right .tooltipArrow {
@@ -208,7 +229,7 @@
   transform-origin: bottom left;
   transform: rotate(45deg) skew(0, -45deg);
 }
-.tooltip.right.topArrow .tooltipLabel {
+.tooltip.right.topArrow .tooltipLabel:not(.noArrow) {
   border-bottom-left-radius: 0;
 }
 .tooltip.right.middleArrow .tooltipArrow::after {
@@ -224,7 +245,7 @@
   transform-origin: top left;
   transform: rotate(-45deg) skew(0, 45deg);
 }
-.tooltip.right.bottomArrow .tooltipLabel {
+.tooltip.right.bottomArrow .tooltipLabel:not(.noArrow) {
   border-top-left-radius: 0;
 }
 .tooltip.absolute {
@@ -237,10 +258,10 @@
   position: absolute;
 }
 .tooltip.absolute.below {
-  top: calc(var(--tooltip-position-top) + var(--primitive-spacing-24) );
+  top: calc(var(--tooltip-position-top) +  var(--primitive-spacing-24) );
 }
 .tooltip.absolute.below.transparent {
-  top: calc(var(--tooltip-position-top) + 0rem );
+  top: calc(var(--tooltip-position-top) +  0rem );
 }
 .tooltip.absolute.below.leftArrow .tooltipAnchor {
   transform: translateX(-100%);
@@ -252,10 +273,10 @@
   /* transform: translate(0, 0); */
 }
 .tooltip.absolute.above {
-  top: calc(var(--tooltip-position-top) - var(--primitive-spacing-24) );
+  top: calc(var(--tooltip-position-top) -  var(--primitive-spacing-24) );
 }
 .tooltip.absolute.above.transparent {
-  top: calc(var(--tooltip-position-top) - 0rem );
+  top: calc(var(--tooltip-position-top) -  0rem );
 }
 .tooltip.absolute.above.leftArrow .tooltipAnchor {
   transform: translate(-100%, -100%);
@@ -267,10 +288,10 @@
   transform: translate(0, -100%);
 }
 .tooltip.absolute.left {
-  left: calc(var(--tooltip-position-left) - var(--primitive-spacing-24) );
+  left: calc(var(--tooltip-position-left) -  var(--primitive-spacing-24) );
 }
 .tooltip.absolute.left.transparent {
-  left: calc(var(--tooltip-position-left) - 0rem );
+  left: calc(var(--tooltip-position-left) -  0rem );
 }
 .tooltip.absolute.left.topArrow .tooltipAnchor {
   transform: translate(-100%, -100%);
@@ -282,10 +303,10 @@
   transform: translate(-100%, 0);
 }
 .tooltip.absolute.right {
-  left: calc(var(--tooltip-position-left) + var(--primitive-spacing-24) );
+  left: calc(var(--tooltip-position-left) +  var(--primitive-spacing-24) );
 }
 .tooltip.absolute.right.transparent {
-  left: calc(var(--tooltip-position-left) + 0rem );
+  left: calc(var(--tooltip-position-left) +  0rem );
 }
 .tooltip.absolute.right.topArrow .tooltipAnchor {
   transform: translate(0, -100%);
@@ -297,10 +318,10 @@
   /* transform: translate(0, 0); */
 }
 .tooltip.relative.below {
-  top: calc(100% + var(--primitive-spacing-24) );
+  top: calc(100% +  var(--primitive-spacing-24) );
 }
 .tooltip.relative.below.transparent {
-  top: calc(100% + 0rem );
+  top: calc(100% +  0rem );
 }
 .tooltip.relative.below.leftArrow {
   right: 50%;
@@ -313,10 +334,10 @@
   transform: translateX(-50%);
 }
 .tooltip.relative.above {
-  bottom: calc(100% + var(--primitive-spacing-24) );
+  bottom: calc(100% +  var(--primitive-spacing-24) );
 }
 .tooltip.relative.above.transparent {
-  bottom: calc(100% + 0rem );
+  bottom: calc(100% +  0rem );
 }
 .tooltip.relative.above.leftArrow {
   right: 50%;
@@ -329,10 +350,10 @@
   transform: translateX(-50%);
 }
 .tooltip.relative.left {
-  right: calc(100% + var(--primitive-spacing-24) );
+  right: calc(100% +  var(--primitive-spacing-24) );
 }
 .tooltip.relative.left.transparent {
-  right: calc(100% + 0rem );
+  right: calc(100% +  0rem );
 }
 .tooltip.relative.left.topArrow {
   bottom: 50%;
@@ -345,10 +366,10 @@
   transform: translateY(-50%);
 }
 .tooltip.relative.right {
-  left: calc(100% + var(--primitive-spacing-24) );
+  left: calc(100% +  var(--primitive-spacing-24) );
 }
 .tooltip.relative.right.transparent {
-  left: calc(100% + 0rem );
+  left: calc(100% +  0rem );
 }
 .tooltip.relative.right.topArrow {
   bottom: 50%;

package/TooltipDecorator/TooltipDecorator.d.ts

@@ -29,11 +29,37 @@ export interface TooltipDecoratorProps {
    * Disables the component but does not affect tooltip operation.
    */
   disabled?: boolean;
+  /**
+   * `Tooltip`  without the arrow.
+   */
+  noArrow?: boolean;
+  /**
+ * Customizes the component by mapping the supplied collection of CSS class names to the
+corresponding internal elements and states of this component.
+ * 
+ * The following classes are supported:
+ * *  `tooltip`  - The root class name
+ */
+  tooltipCss?: object;
   /**
    * Time to wait (in milliseconds) before showing tooltip on hover.
    */
   tooltipDelay?: number;
   /**
+ * Source for the image.
+String value or Object of values used to determine which image will appear on
+a specific screenSize.
+ */
+  tooltipImage?: string | object;
+  /**
+   * The size of the image.
+   *
+   * The following properties should be provided:
+   * *  `height`  - The height of the image
+   * *  `width`  - The width of the image
+   */
+  tooltipImageSize?: object;
+  /**
  * Allows the tooltip to marquee.
  * 
  * Specifying a   
@@ -175,6 +201,10 @@ account for that in your provided offset value.
 the marquee to that size.
  */
   marquee?: boolean;
+  /**
+   * `Tooltip`  without the arrow.
+   */
+  noArrow?: boolean;
   /**
    * Style object for tooltip position.
    */
@@ -187,6 +217,28 @@ When this is not specified, the implication is that the component is "absolutely
 positioned, relative to the viewport, rather than its parent layer.
  */
   relative?: boolean;
+  /**
+ * Customizes the component by mapping the supplied collection of CSS class names to the
+corresponding internal elements and states of this component.
+ * 
+ * The following classes are supported:
+ * *  `tooltip`  - The root class name
+ */
+  tooltipCss?: object;
+  /**
+ * Source for the image.
+String value or Object of values used to determine which image will appear on
+a specific screenSize.
+ */
+  tooltipImage?: string | object;
+  /**
+   * The size of the image.
+   *
+   * The following properties should be provided:
+   * *  `height`  - The height of the image
+   * *  `width`  - The width of the image
+   */
+  tooltipImageSize?: object;
   /**
    * Called when the tooltip mounts/unmounts, giving a reference to the DOM.
    */

package/TooltipDecorator/TooltipDecorator.js

@@ -124,6 +124,13 @@ var TooltipDecorator = exports.TooltipDecorator = (0, _hoc["default"])(defaultCo
      * @public
      */
     disabled: _propTypes["default"].bool,
+    /**
+     * `Tooltip` without the arrow.
+     *
+     * @type {Boolean}
+     * @public
+     */
+    noArrow: _propTypes["default"].bool,
     /**
      * Indicates the tooltip text direction is right-to-left.
      *
@@ -131,6 +138,18 @@ var TooltipDecorator = exports.TooltipDecorator = (0, _hoc["default"])(defaultCo
      * @private
      */
     rtl: _propTypes["default"].bool,
+    /**
+     * Customizes the component by mapping the supplied collection of CSS class names to the
+     * corresponding internal elements and states of this component.
+     *
+     * The following classes are supported:
+     *
+     * * `tooltip` - The root class name
+     *
+     * @type {Object}
+     * @public
+     */
+    tooltipCss: _propTypes["default"].object,
     /**
      * Time to wait (in milliseconds) before showing tooltip on hover.
      *
@@ -139,6 +158,29 @@ var TooltipDecorator = exports.TooltipDecorator = (0, _hoc["default"])(defaultCo
      * @public
      */
     tooltipDelay: _propTypes["default"].number,
+    /**
+     * Source for the image.
+     * String value or Object of values used to determine which image will appear on
+     * a specific screenSize.
+     *
+     * @type {String|Object}
+     * @public
+     */
+    tooltipImage: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].object]),
+    /**
+     * The size of the image.
+     *
+     * The following properties should be provided:
+     * * `height` - The height of the image
+     * * `width` - The width of the image
+     *
+     * @type {Object}
+     * @public
+     */
+    tooltipImageSize: _propTypes["default"].shape({
+      height: _propTypes["default"].number,
+      width: _propTypes["default"].number
+    }),
     /**
      * Allows the tooltip to marquee.
      *

package/TooltipDecorator/TooltipLabel.js

@@ -8,10 +8,11 @@ var _kind = _interopRequireDefault(require("@enact/core/kind"));
 var _util = require("@enact/i18n/util");
 var _resolution = require("@enact/ui/resolution");
 var _propTypes = _interopRequireDefault(require("prop-types"));
+var _Image = _interopRequireDefault(require("../Image"));
 var _Marquee = _interopRequireDefault(require("../Marquee"));
 var _TooltipModule = _interopRequireDefault(require("./Tooltip.module.css"));
 var _jsxRuntime = require("react/jsx-runtime");
-var _excluded = ["centered", "children", "marquee"];
+var _excluded = ["centered", "children", "css", "tooltipImage", "marquee"];
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": 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; }
@@ -55,6 +56,36 @@ var TooltipLabel = exports.TooltipLabel = (0, _kind["default"])({
      * @public
      */
     marquee: _propTypes["default"].bool,
+    /**
+     * `Tooltip` without the arrow.
+     *
+     * @type {Boolean}
+     * @public
+     */
+    noArrow: _propTypes["default"].bool,
+    /**
+     * Source for the image.
+     * String value or Object of values used to determine which image will appear on
+     * a specific screenSize.
+     *
+     * @type {String|Object}
+     * @public
+     */
+    tooltipImage: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].object]),
+    /**
+     * The size of the image.
+     *
+     * The following properties should be provided:
+     * * `height` - The height of the image
+     * * `width` - The width of the image
+     *
+     * @type {Object}
+     * @public
+     */
+    tooltipImageSize: _propTypes["default"].shape({
+      height: _propTypes["default"].number,
+      width: _propTypes["default"].number
+    }),
     /**
      * The width of tooltip content.
      *
@@ -73,43 +104,65 @@ var TooltipLabel = exports.TooltipLabel = (0, _kind["default"])({
     width: _propTypes["default"].oneOfType([_propTypes["default"].number, _propTypes["default"].string])
   },
   styles: {
-    css: _TooltipModule["default"]
+    css: _TooltipModule["default"],
+    name: 'tooltipLabel',
+    publicClassNames: true
   },
   computed: {
     className: function className(_ref) {
-      var marquee = _ref.marquee,
-        width = _ref.width,
-        styler = _ref.styler;
+      var tooltipImage = _ref.tooltipImage,
+        marquee = _ref.marquee,
+        noArrow = _ref.noArrow,
+        styler = _ref.styler,
+        width = _ref.width;
       return styler.append({
-        multi: !marquee && !!width,
-        marquee: marquee
+        multi: !marquee && (!!width || !!tooltipImage),
+        marquee: marquee,
+        noArrow: !!noArrow,
+        image: !!tooltipImage
       });
     },
     style: function style(_ref2) {
       var children = _ref2.children,
         width = _ref2.width,
+        tooltipImageSize = _ref2.tooltipImageSize,
         _style = _ref2.style;
+      var enforcedWidth = typeof width === 'number' ? (0, _resolution.scaleToRem)(width) : width;
       return _objectSpread(_objectSpread({}, _style), {}, {
         direction: (0, _util.isRtlText)(children) ? 'rtl' : 'ltr',
-        '--lime-tooltip-label-width': typeof width === 'number' ? (0, _resolution.scaleToRem)(width) : width
+        '--lime-tooltip-label-width': tooltipImageSize !== null && tooltipImageSize !== void 0 && tooltipImageSize.width ? (0, _resolution.scaleToRem)(tooltipImageSize === null || tooltipImageSize === void 0 ? void 0 : tooltipImageSize.width) : enforcedWidth,
+        '--lime-tooltip-image-width': (tooltipImageSize === null || tooltipImageSize === void 0 ? void 0 : tooltipImageSize.width) && (0, _resolution.scaleToRem)(tooltipImageSize === null || tooltipImageSize === void 0 ? void 0 : tooltipImageSize.width),
+        '--lime-tooltip-image-height': (tooltipImageSize === null || tooltipImageSize === void 0 ? void 0 : tooltipImageSize.width) && (0, _resolution.scaleToRem)(tooltipImageSize === null || tooltipImageSize === void 0 ? void 0 : tooltipImageSize.height)
       });
     }
   },
   render: function render(_ref3) {
     var centered = _ref3.centered,
       children = _ref3.children,
+      css = _ref3.css,
+      tooltipImage = _ref3.tooltipImage,
       marquee = _ref3.marquee,
       rest = _objectWithoutProperties(_ref3, _excluded);
+    delete rest.noArrow;
+    delete rest.tooltipImageSize;
     delete rest.width;
     if (marquee) {
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Marquee["default"], _objectSpread(_objectSpread({}, rest), {}, {
-        alignment: centered ? 'center' : null,
-        marqueeOn: "render",
-        children: children
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", _objectSpread(_objectSpread({}, rest), {}, {
+        children: [tooltipImage && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Image["default"], {
+          className: css.tooltipImage,
+          src: tooltipImage
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Marquee["default"], {
+          alignment: centered ? 'center' : null,
+          marqueeOn: "render",
+          children: children
+        })]
       }));
     } else {
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", _objectSpread(_objectSpread({}, rest), {}, {
-        children: children
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", _objectSpread(_objectSpread({}, rest), {}, {
+        children: [tooltipImage && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Image["default"], {
+          className: css.tooltipImage,
+          src: tooltipImage
+        }), children]
       }));
     }
   }

package/TooltipDecorator/tests/TooltipDecorator-specs.js

@@ -12,6 +12,11 @@ function asyncGeneratorStep(n, t, e, r, o, a, c) { try { var i = n[a](c), u = i.
 function _asyncToGenerator(n) { return function () { var t = this, e = arguments; return new Promise(function (r, o) { var a = n.apply(t, e); function _next(n) { asyncGeneratorStep(a, r, o, _next, _throw, "next", n); } function _throw(n) { asyncGeneratorStep(a, r, o, _next, _throw, "throw", n); } _next(void 0); }); }; }
 var FloatingLayerController = (0, _FloatingLayer.FloatingLayerDecorator)('div');
 var TooltipButton = (0, _TooltipDecorator["default"])(_Button["default"]);
+var src = {
+  hd: 'https://placehold.co/200x200',
+  fhd: 'https://placehold.co/300x300',
+  uhd: 'https://placehold.co/600x600'
+};
 describe('TooltipDecorator', function () {
   describe('TooltipLabel', function () {
     test('should apply alignment when `centered` and `marquee`', function () {
@@ -219,6 +224,47 @@ describe('TooltipDecorator', function () {
           expect(tooltipArrow).toHaveClass(expected);
         });
       }));
+      test('should have \'noArrow\' className when the prop is given', /*#__PURE__*/_asyncToGenerator(function* () {
+        var tooltipText = 'Tooltip';
+        (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(FloatingLayerController, {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(TooltipButton, {
+            tooltipDelay: 0,
+            noArrow: true,
+            tooltipText: tooltipText,
+            children: "Label"
+          })
+        }));
+        var button = _react.screen.getByRole('button');
+        (0, _react.act)(function () {
+          return button.focus();
+        });
+        _react.fireEvent.mouseOver(button);
+        yield (0, _react.waitFor)(function () {
+          var tooltipNoArrow = _react.screen.getByText('Tooltip').parentElement.parentElement;
+          var expected = 'tooltip noArrow';
+          expect(tooltipNoArrow).toHaveClass(expected);
+        });
+      }));
+      test('should have properly display Image', /*#__PURE__*/_asyncToGenerator(function* () {
+        var tooltipText = 'Tooltip';
+        (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(FloatingLayerController, {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(TooltipButton, {
+            tooltipDelay: 0,
+            tooltipImage: src,
+            tooltipText: tooltipText,
+            children: "Label"
+          })
+        }));
+        var button = _react.screen.getByRole('button');
+        (0, _react.act)(function () {
+          return button.focus();
+        });
+        _react.fireEvent.mouseOver(button);
+        yield (0, _react.waitFor)(function () {
+          var tooltipImage = _react.screen.getByText('Tooltip').children[0].children[0].tagName;
+          expect(tooltipImage).toBe('IMG');
+        });
+      }));
     });
   });
 });

package/TooltipDecorator/useTooltip.js

@@ -45,9 +45,13 @@ var getTooltipDirection = function getTooltipDirection(tooltipPosition, tooltipT
 };
 var removeTooltipProps = function removeTooltipProps(_ref) {
   var props = Object.assign({}, (_objectDestructuringEmpty(_ref), _ref));
+  delete props.noArrow;
   delete props.rtl;
   delete props.screenEdgeKeepout;
+  delete props.tooltipCss;
   delete props.tooltipDelay;
+  delete props.tooltipImage;
+  delete props.tooltipImageSize;
   delete props.tooltipMarquee;
   delete props.tooltipPosition;
   delete props.tooltipProps;
@@ -71,7 +75,8 @@ var defaultScreenEdgeKeepout = exports.defaultScreenEdgeKeepout = 24 + 24;
 // A hook to show Limestone-styled tooltip components.
 var useTooltip = exports.useTooltip = function useTooltip(props) {
   var _useI18nContext;
-  var _props$screenEdgeKeep = props.screenEdgeKeepout,
+  var noArrow = props.noArrow,
+    _props$screenEdgeKeep = props.screenEdgeKeepout,
     screenEdgeKeepout = _props$screenEdgeKeep === void 0 ? defaultScreenEdgeKeepout : _props$screenEdgeKeep,
     _props$tooltipDelay = props.tooltipDelay,
     tooltipDelay = _props$tooltipDelay === void 0 ? 500 : _props$tooltipDelay,
@@ -79,6 +84,9 @@ var useTooltip = exports.useTooltip = function useTooltip(props) {
     tooltipType = _props$tooltipType === void 0 ? 'balloon' : _props$tooltipType,
     _props$tooltipUpdateD = props.tooltipUpdateDelay,
     tooltipUpdateDelay = _props$tooltipUpdateD === void 0 ? 400 : _props$tooltipUpdateD,
+    tooltipCss = props.tooltipCss,
+    tooltipImage = props.tooltipImage,
+    tooltipImageSize = props.tooltipImageSize,
     tooltipMarquee = props.tooltipMarquee,
     tooltipPosition = props.tooltipPosition,
     tooltipProps = props.tooltipProps,
@@ -246,10 +254,14 @@ var useTooltip = exports.useTooltip = function useTooltip(props) {
       labelOffset: layout.labelOffset
     }, tooltipProps), {}, {
       arrowAnchor: layout.arrowAnchor,
+      noArrow: noArrow,
       direction: layout.tooltipDirection,
       marquee: tooltipMarquee,
       relative: tooltipRelative,
       style: tooltipStyle,
+      tooltipCss: tooltipCss,
+      tooltipImage: tooltipImage,
+      tooltipImageSize: tooltipImageSize,
       tooltipRef: getTooltipRef,
       type: tooltipType,
       width: tooltipWidth,
@@ -268,7 +280,7 @@ var useTooltip = exports.useTooltip = function useTooltip(props) {
     } else {
       return null;
     }
-  }, [getTooltipRef, hideTooltip, layout, showing, tooltipMarquee, tooltipProps, tooltipRelative, tooltipText, tooltipType, tooltipWidth]);
+  }, [getTooltipRef, hideTooltip, layout, noArrow, showing, tooltipCss, tooltipImage, tooltipImageSize, tooltipMarquee, tooltipProps, tooltipRelative, tooltipText, tooltipType, tooltipWidth]);
   return {
     tooltip: tooltipText ? renderTooltip() : null,
     handlers: handlers,

package/VideoPlayer/Feedback.module.css

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

package/VideoPlayer/FeedbackTooltip.module.css

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

package/VideoPlayer/MediaTitle.module.css

@@ -1,5 +1,5 @@
 .titleFrame {
-  width: calc(100% - 2 * 4rem );
+  width: calc(100% - 2 *  4rem );
   position: relative;
   flex-grow: 1;
   opacity: 1;
@@ -53,6 +53,14 @@
 .titleFrame .infoComponents .fontLgIcons {
   font-family: "LG Icons";
 }
+:global(.largeText) .titleFrame .title {
+  font-size: var(--primitive-font-size-108);
+  line-height: 3.04167rem;
+}
+:global(.largeText) .titleFrame .infoComponents {
+  font-size: var(--primitive-font-size-66);
+  line-height: 1.75rem;
+}
 :global(.noAnimation) .titleFrame.hidden {
   transition: none;
 }

package/VirtualList/VirtualList.d.ts

@@ -170,6 +170,18 @@ the  `Spotlight`  will store the last focus information based on  `SpotlightId`
 And the  `VirtualList`  will restore the focus when it remounts while the navigation returns to the  `Panel` .
  */
   spotlightId?: string;
+  /**
+ * Anchors the focused item to a fixed "focus position" at the start edge while the list scrolls
+beneath it.
+ * 
+ * When set to  `'start'` , moving focus with 5-way keys keeps the focus indicator at a fixed slot
+at the start of the list (top for vertical, leading edge for horizontal) and scrolls so the
+newly focused item lands in that slot. At the end of the list, the list scrolls only to its
+last position so the focused item stays visible.
+ * 
+ * This is ignored when  `snapToCenter`  is set.
+ */
+  stickTo?: "start";
   /**
    * Specifies how to show vertical scrollbar.
    *
@@ -380,6 +392,18 @@ the  `Spotlight`  will store the last focus information based on  `SpotlightId`
 And the  `VirtualGridList`  will restore the focus when it remounts while the navigation returns to the  `Panel` .
  */
   spotlightId?: string;
+  /**
+ * Anchors the focused item to a fixed "focus position" at the start edge while the list scrolls
+beneath it.
+ * 
+ * When set to  `'start'` , moving focus with 5-way keys keeps the focus indicator at a fixed slot
+at the start of the list (top for vertical, leading edge for horizontal) and scrolls so the
+newly focused item lands in that slot. At the end of the list, the list scrolls only to its
+last position so the focused item stays visible.
+ * 
+ * This is ignored when  `snapToCenter`  is set.
+ */
+  stickTo?: "start";
   /**
    * Specifies how to show vertical scrollbar.
    *