@momentum-design/components 0.129.17 → 0.129.19

package/dist/components/animation/animation.component.d.ts

@@ -1,4 +1,4 @@
-import { CSSResult } from 'lit';
+import type { CSSResult, PropertyValues } from 'lit';
 import { AnimationItem } from 'lottie-web/build/player/lottie_light';
 import { Component } from '../../models';
 import type { AnimationNames, LoopType } from './animation.types';
@@ -17,6 +17,7 @@ import type { AnimationNames, LoopType } from './animation.types';
 declare class Animation extends Component {
     /**
      * Name of the animation (= filename)
+     * @default undefined
      */
     name?: AnimationNames;
     /**
@@ -24,30 +25,37 @@ declare class Animation extends Component {
      * - "true" - infinite
      * - "false" - no loop
      * - number - number of times to loop
+     * @default 'true'
      */
     loop?: LoopType;
     /**
      * Weather start the animation automatically
+     * @default true
      */
     autoplay?: boolean;
     /**
      * Aria-label attribute to be set for accessibility
+     * @default null
      */
     ariaLabel: string | null;
     /**
      * Aria-labelledby attribute to be set for accessibility
+     * @default null
      */
     ariaLabelledby: string | null;
     /**
      * Lottie animation instance
+     * @internal
      */
     private lottieInstance?;
     /**
      * Container for the animation
+     * @internal
      */
     private containerRef;
     /**
      * Exposed API of the animation library (lottie)
+     * @internal
      */
     get animation(): AnimationItem | undefined;
     private getLoopValue;
@@ -63,15 +71,16 @@ declare class Animation extends Component {
      * Import animation data dynamically
      */
     private getAnimationData;
-    updated(changedProperties: Map<string, any>): void;
+    updated(changedProperties: PropertyValues): void;
     disconnectedCallback(): void;
     /**
      * Re-dispatch the complete event from the animation library
      *
      * This handler called with the animation instance instead of the component instance
      * so we need to bind it to the component instance. The arrow function just does that.
+     * @internal
      */
-    onCompleteHandler: () => void;
+    private onCompleteHandler;
     render(): import("lit-html").TemplateResult<1>;
     static styles: Array<CSSResult>;
 }

package/dist/components/animation/animation.component.js

@@ -31,31 +31,32 @@ import { DEFAULTS } from './animation.constants';
 class Animation extends Component {
     constructor() {
         super(...arguments);
-        /**
-         * Name of the animation (= filename)
-         */
-        this.name = DEFAULTS.NAME;
         /**
          * How many times to loop the animation
          * - "true" - infinite
          * - "false" - no loop
          * - number - number of times to loop
+         * @default 'true'
          */
         this.loop = DEFAULTS.LOOP;
         /**
          * Weather start the animation automatically
+         * @default true
          */
         this.autoplay = DEFAULTS.AUTO_PLAY;
         /**
          * Aria-label attribute to be set for accessibility
+         * @default null
          */
         this.ariaLabel = null;
         /**
          * Aria-labelledby attribute to be set for accessibility
+         * @default null
          */
         this.ariaLabelledby = null;
         /**
          * Container for the animation
+         * @internal
          */
         this.containerRef = createRef();
         /**
@@ -63,6 +64,7 @@ class Animation extends Component {
          *
          * This handler called with the animation instance instead of the component instance
          * so we need to bind it to the component instance. The arrow function just does that.
+         * @internal
          */
         this.onCompleteHandler = () => {
             const event = new CustomEvent('complete', {
@@ -74,6 +76,7 @@ class Animation extends Component {
     }
     /**
      * Exposed API of the animation library (lottie)
+     * @internal
      */
     get animation() {
         return this.lottieInstance;

package/dist/components/animation/animation.constants.d.ts

@@ -1,6 +1,5 @@
 declare const TAG_NAME: "mdc-animation";
 declare const DEFAULTS: {
-    readonly NAME: undefined;
     readonly AUTO_PLAY: true;
     readonly LOOP: "true";
 };

package/dist/components/animation/animation.constants.js

@@ -1,7 +1,6 @@
 import utils from '../../utils/tag-name';
 const TAG_NAME = utils.constructTagName('animation');
 const DEFAULTS = {
-    NAME: undefined,
     AUTO_PLAY: true,
     LOOP: 'true',
 };

package/dist/components/virtualizedlist/virtualizedlist.component.d.ts

@@ -16,10 +16,10 @@ declare const VirtualizedList_base: import("../../utils/mixins/index.types").Con
  *
  * ## Setup
  *
- * `virtualizerProps` is a required prop that requires at least two properties to be set: `count` and `estimateSize`.
- * `count` is the total number of items in the list, and `estimateSize` is a function that returns the estimated
- * size (in pixels) of each item in the list. `getItemKey` is also strongly recommended to be set to provide unique
- * keys for each item in the list.
+ * `virtualizerProps` is a required prop that requires at least three properties to be set:
+ * - `count` is the total number of items in the list
+ * - `estimateSize` is a function that returns the estimated size (in pixels) of each item in the list
+ * - `getItemKey` is a function that returns a unique key for each item in the list.
  *
  * ### Render list items
  *
@@ -48,6 +48,19 @@ declare const VirtualizedList_base: import("../../utils/mixins/index.types").Con
  * Unique keys for the list items are critical for dynamically changing list items or item's content.
  * If the key change with the content it will cause scrollbar and content shuttering.
  *
+ * ### Top/Bottom Padding
+ *
+ * If padding is required at the top or the bottom of the list, do not apply padding/margin via CSS since this
+ * will break the virtualization calculations and can cause scrollbars when they are not necessary.
+ * Instead use the `paddingStart` and `paddingEnd` properties (in pixels) of the `virtualizerProps` prop.
+ *
+ * ### Gaps between items
+ *
+ * If you are adding gaps between items using CSS margin or gap properties, you must provide the same value in pixels
+ * to the `gap` property of the `virtualizerProps` prop. This ensures that the virtualization calculations are accurate.
+ * If you are using CSS margins, ensure that you are not applying the margin to the top of the first or the bottom of the last item.
+ * If you need spacing there, use the `paddingStart` and `paddingEnd` properties of the `virtualizerProps` prop.
+ *
  * @tagname mdc-virtualizedlist
  *
  * @event scroll - (React: onScroll) Event that gets called when user scrolls inside of list.

package/dist/components/virtualizedlist/virtualizedlist.component.js

@@ -30,10 +30,10 @@ import { DEFAULTS } from './virtualizedlist.constants';
  *
  * ## Setup
  *
- * `virtualizerProps` is a required prop that requires at least two properties to be set: `count` and `estimateSize`.
- * `count` is the total number of items in the list, and `estimateSize` is a function that returns the estimated
- * size (in pixels) of each item in the list. `getItemKey` is also strongly recommended to be set to provide unique
- * keys for each item in the list.
+ * `virtualizerProps` is a required prop that requires at least three properties to be set:
+ * - `count` is the total number of items in the list
+ * - `estimateSize` is a function that returns the estimated size (in pixels) of each item in the list
+ * - `getItemKey` is a function that returns a unique key for each item in the list.
  *
  * ### Render list items
  *
@@ -62,6 +62,19 @@ import { DEFAULTS } from './virtualizedlist.constants';
  * Unique keys for the list items are critical for dynamically changing list items or item's content.
  * If the key change with the content it will cause scrollbar and content shuttering.
  *
+ * ### Top/Bottom Padding
+ *
+ * If padding is required at the top or the bottom of the list, do not apply padding/margin via CSS since this
+ * will break the virtualization calculations and can cause scrollbars when they are not necessary.
+ * Instead use the `paddingStart` and `paddingEnd` properties (in pixels) of the `virtualizerProps` prop.
+ *
+ * ### Gaps between items
+ *
+ * If you are adding gaps between items using CSS margin or gap properties, you must provide the same value in pixels
+ * to the `gap` property of the `virtualizerProps` prop. This ensures that the virtualization calculations are accurate.
+ * If you are using CSS margins, ensure that you are not applying the margin to the top of the first or the bottom of the last item.
+ * If you need spacing there, use the `paddingStart` and `paddingEnd` properties of the `virtualizerProps` prop.
+ *
  * @tagname mdc-virtualizedlist
  *
  * @event scroll - (React: onScroll) Event that gets called when user scrolls inside of list.

package/dist/custom-elements.json

@@ -1673,12 +1673,6 @@
           "description": "The `mdc-animation` component is a wrapper around the Lottie animation library.\nIt fetches the animation data dynamically based on the provided name and renders it.\nThis is a display only component that does not have any interactive functionality.\nFrom accessibility perspective, (by default) it is a decorative image component.",
           "name": "Animation",
           "members": [
-            {
-              "kind": "field",
-              "name": "animation",
-              "description": "Exposed API of the animation library (lottie)",
-              "readonly": true
-            },
             {
               "kind": "field",
               "name": "ariaLabel",
@@ -1706,28 +1700,30 @@
                 "text": "boolean | undefined"
               },
               "description": "Weather start the animation automatically",
+              "default": "true",
               "attribute": "autoplay",
               "reflects": true
             },
-            {
-              "kind": "field",
-              "name": "containerRef",
-              "type": {
-                "text": "Ref<HTMLDivElement>"
-              },
-              "privacy": "private",
-              "description": "Container for the animation"
-            },
             {
               "kind": "method",
               "name": "getAnimationData",
               "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
               "description": "Import animation data dynamically"
             },
             {
               "kind": "method",
               "name": "getLoopValue",
-              "privacy": "private"
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "boolean | number"
+                }
+              }
             },
             {
               "kind": "field",
@@ -1736,18 +1732,10 @@
                 "text": "LoopType | undefined"
               },
               "description": "How many times to loop the animation\n- \"true\" - infinite\n- \"false\" - no loop\n- number - number of times to loop",
+              "default": "'true'",
               "attribute": "loop",
               "reflects": true
             },
-            {
-              "kind": "field",
-              "name": "lottieInstance",
-              "type": {
-                "text": "AnimationItem | undefined"
-              },
-              "privacy": "private",
-              "description": "Lottie animation instance"
-            },
             {
               "kind": "field",
               "name": "name",
@@ -1755,18 +1743,19 @@
                 "text": "AnimationNames | undefined"
               },
               "description": "Name of the animation (= filename)",
+              "default": "undefined",
               "attribute": "name",
               "reflects": true
             },
-            {
-              "kind": "field",
-              "name": "onCompleteHandler",
-              "description": "Re-dispatch the complete event from the animation library\n\nThis handler called with the animation instance instead of the component instance\nso we need to bind it to the component instance. The arrow function just does that."
-            },
             {
               "kind": "method",
               "name": "onLoadFailHandler",
               "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
               "parameters": [
                 {
                   "name": "error",
@@ -1781,6 +1770,11 @@
               "kind": "method",
               "name": "onLoadSuccessHandler",
               "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
               "parameters": [
                 {
                   "name": "animationData",
@@ -1819,6 +1813,7 @@
                 "text": "AnimationNames | undefined"
               },
               "description": "Name of the animation (= filename)",
+              "default": "undefined",
               "fieldName": "name"
             },
             {
@@ -1827,6 +1822,7 @@
                 "text": "LoopType | undefined"
               },
               "description": "How many times to loop the animation\n- \"true\" - infinite\n- \"false\" - no loop\n- number - number of times to loop",
+              "default": "'true'",
               "fieldName": "loop"
             },
             {
@@ -1835,6 +1831,7 @@
                 "text": "boolean | undefined"
               },
               "description": "Weather start the animation automatically",
+              "default": "true",
               "fieldName": "autoplay"
             },
             {
@@ -53853,7 +53850,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "`mdc-virtualizedlist` is an extension of the `mdc-list` component that adds virtualization capabilities using\nthe Tanstack Virtual library.\n\nThis component is thin wrapper around the Tanstack libray to provide additional funtionalities such as\nkeyboard navigation, focus management, scroll anchoring and accessibility features.\n\nPlease refer to [Tanstack Virtual Docs](https://tanstack.com/virtual/latest) for more in depth documentation.\n\n## Setup\n\n`virtualizerProps` is a required prop that requires at least two properties to be set: `count` and `estimateSize`.\n`count` is the total number of items in the list, and `estimateSize` is a function that returns the estimated\nsize (in pixels) of each item in the list. `getItemKey` is also strongly recommended to be set to provide unique\nkeys for each item in the list.\n\n### Render list items\n\nTo keep the component framework-agnostic, the rendering of the list items is left to the consumer.\n\nWe need to render only the visible items. The list of visible items are provided by the `virtualitemschange` event.\nThe event detail contains the `virtualItems` array, which contains the information for the rendering.\nList items must have an `data-index` attribute, the indexes are in the `virtualItems` list.\n\n## Best practices\n\n### List updates\n\nTanstack needs only the count of the items in the list and the size of each item to perform virtualization.\nList updates happens when\n- when `virtualizerProps` property of the component instance changes\n- when `observe-size-changes` is set and the item's size changes (it uses ResizeObserver internally)\n- when `component.visualiser.measure` called manually.\n\n### Header\n\nTo add a header to the list, use the `mdc-listheader` component and place it in the `list-header` slot.\n\n### Lists with dynamic content\n\nUnique keys for the list items are critical for dynamically changing list items or item's content.\nIf the key change with the content it will cause scrollbar and content shuttering.",
+          "description": "`mdc-virtualizedlist` is an extension of the `mdc-list` component that adds virtualization capabilities using\nthe Tanstack Virtual library.\n\nThis component is thin wrapper around the Tanstack libray to provide additional funtionalities such as\nkeyboard navigation, focus management, scroll anchoring and accessibility features.\n\nPlease refer to [Tanstack Virtual Docs](https://tanstack.com/virtual/latest) for more in depth documentation.\n\n## Setup\n\n`virtualizerProps` is a required prop that requires at least three properties to be set:\n- `count` is the total number of items in the list\n- `estimateSize` is a function that returns the estimated size (in pixels) of each item in the list\n- `getItemKey` is a function that returns a unique key for each item in the list.\n\n### Render list items\n\nTo keep the component framework-agnostic, the rendering of the list items is left to the consumer.\n\nWe need to render only the visible items. The list of visible items are provided by the `virtualitemschange` event.\nThe event detail contains the `virtualItems` array, which contains the information for the rendering.\nList items must have an `data-index` attribute, the indexes are in the `virtualItems` list.\n\n## Best practices\n\n### List updates\n\nTanstack needs only the count of the items in the list and the size of each item to perform virtualization.\nList updates happens when\n- when `virtualizerProps` property of the component instance changes\n- when `observe-size-changes` is set and the item's size changes (it uses ResizeObserver internally)\n- when `component.visualiser.measure` called manually.\n\n### Header\n\nTo add a header to the list, use the `mdc-listheader` component and place it in the `list-header` slot.\n\n### Lists with dynamic content\n\nUnique keys for the list items are critical for dynamically changing list items or item's content.\nIf the key change with the content it will cause scrollbar and content shuttering.\n\n### Top/Bottom Padding\n\nIf padding is required at the top or the bottom of the list, do not apply padding/margin via CSS since this\nwill break the virtualization calculations and can cause scrollbars when they are not necessary.\nInstead use the `paddingStart` and `paddingEnd` properties (in pixels) of the `virtualizerProps` prop.\n\n### Gaps between items\n\nIf you are adding gaps between items using CSS margin or gap properties, you must provide the same value in pixels\nto the `gap` property of the `virtualizerProps` prop. This ensures that the virtualization calculations are accurate.\nIf you are using CSS margins, ensure that you are not applying the margin to the top of the first or the bottom of the last item.\nIf you need spacing there, use the `paddingStart` and `paddingEnd` properties of the `virtualizerProps` prop.",
           "name": "VirtualizedList",
           "cssParts": [
             {
@@ -54394,7 +54391,7 @@
             "module": "/src/components/list/list.component"
           },
           "tagName": "mdc-virtualizedlist",
-          "jsDoc": "/**\n * `mdc-virtualizedlist` is an extension of the `mdc-list` component that adds virtualization capabilities using\n * the Tanstack Virtual library.\n *\n * This component is thin wrapper around the Tanstack libray to provide additional funtionalities such as\n * keyboard navigation, focus management, scroll anchoring and accessibility features.\n *\n * Please refer to [Tanstack Virtual Docs](https://tanstack.com/virtual/latest) for more in depth documentation.\n *\n * ## Setup\n *\n * `virtualizerProps` is a required prop that requires at least two properties to be set: `count` and `estimateSize`.\n * `count` is the total number of items in the list, and `estimateSize` is a function that returns the estimated\n * size (in pixels) of each item in the list. `getItemKey` is also strongly recommended to be set to provide unique\n * keys for each item in the list.\n *\n * ### Render list items\n *\n * To keep the component framework-agnostic, the rendering of the list items is left to the consumer.\n *\n * We need to render only the visible items. The list of visible items are provided by the `virtualitemschange` event.\n * The event detail contains the `virtualItems` array, which contains the information for the rendering.\n * List items must have an `data-index` attribute, the indexes are in the `virtualItems` list.\n *\n * ## Best practices\n *\n * ### List updates\n *\n * Tanstack needs only the count of the items in the list and the size of each item to perform virtualization.\n * List updates happens when\n * - when `virtualizerProps` property of the component instance changes\n * - when `observe-size-changes` is set and the item's size changes (it uses ResizeObserver internally)\n * - when `component.visualiser.measure` called manually.\n *\n * ### Header\n *\n * To add a header to the list, use the `mdc-listheader` component and place it in the `list-header` slot.\n *\n * ### Lists with dynamic content\n *\n * Unique keys for the list items are critical for dynamically changing list items or item's content.\n * If the key change with the content it will cause scrollbar and content shuttering.\n *\n * @tagname mdc-virtualizedlist\n *\n * @event scroll - (React: onScroll) Event that gets called when user scrolls inside of list.\n * @event virtualitemschange - (React: onVirtualItemsChange) Event that gets called when the virtual items change.\n *\n * @slot default - This is a default/unnamed slot, where listitems can be placed.\n * @slot list-header - This slot is used to pass a header for the list, which can be a `mdc-listheader` component.\n *\n * @csspart container - The container of the virtualized list.\n * @csspart scroll - The scrollable area of the virtualized list.\n */",
+          "jsDoc": "/**\n * `mdc-virtualizedlist` is an extension of the `mdc-list` component that adds virtualization capabilities using\n * the Tanstack Virtual library.\n *\n * This component is thin wrapper around the Tanstack libray to provide additional funtionalities such as\n * keyboard navigation, focus management, scroll anchoring and accessibility features.\n *\n * Please refer to [Tanstack Virtual Docs](https://tanstack.com/virtual/latest) for more in depth documentation.\n *\n * ## Setup\n *\n * `virtualizerProps` is a required prop that requires at least three properties to be set:\n * - `count` is the total number of items in the list\n * - `estimateSize` is a function that returns the estimated size (in pixels) of each item in the list\n * - `getItemKey` is a function that returns a unique key for each item in the list.\n *\n * ### Render list items\n *\n * To keep the component framework-agnostic, the rendering of the list items is left to the consumer.\n *\n * We need to render only the visible items. The list of visible items are provided by the `virtualitemschange` event.\n * The event detail contains the `virtualItems` array, which contains the information for the rendering.\n * List items must have an `data-index` attribute, the indexes are in the `virtualItems` list.\n *\n * ## Best practices\n *\n * ### List updates\n *\n * Tanstack needs only the count of the items in the list and the size of each item to perform virtualization.\n * List updates happens when\n * - when `virtualizerProps` property of the component instance changes\n * - when `observe-size-changes` is set and the item's size changes (it uses ResizeObserver internally)\n * - when `component.visualiser.measure` called manually.\n *\n * ### Header\n *\n * To add a header to the list, use the `mdc-listheader` component and place it in the `list-header` slot.\n *\n * ### Lists with dynamic content\n *\n * Unique keys for the list items are critical for dynamically changing list items or item's content.\n * If the key change with the content it will cause scrollbar and content shuttering.\n *\n * ### Top/Bottom Padding\n *\n * If padding is required at the top or the bottom of the list, do not apply padding/margin via CSS since this\n * will break the virtualization calculations and can cause scrollbars when they are not necessary.\n * Instead use the `paddingStart` and `paddingEnd` properties (in pixels) of the `virtualizerProps` prop.\n *\n * ### Gaps between items\n *\n * If you are adding gaps between items using CSS margin or gap properties, you must provide the same value in pixels\n * to the `gap` property of the `virtualizerProps` prop. This ensures that the virtualization calculations are accurate.\n * If you are using CSS margins, ensure that you are not applying the margin to the top of the first or the bottom of the last item.\n * If you need spacing there, use the `paddingStart` and `paddingEnd` properties of the `virtualizerProps` prop.\n *\n * @tagname mdc-virtualizedlist\n *\n * @event scroll - (React: onScroll) Event that gets called when user scrolls inside of list.\n * @event virtualitemschange - (React: onVirtualItemsChange) Event that gets called when the virtual items change.\n *\n * @slot default - This is a default/unnamed slot, where listitems can be placed.\n * @slot list-header - This slot is used to pass a header for the list, which can be a `mdc-listheader` component.\n *\n * @csspart container - The container of the virtualized list.\n * @csspart scroll - The scrollable area of the virtualized list.\n */",
           "customElement": true
         }
       ],

package/dist/react/virtualizedlist/index.d.ts

@@ -12,10 +12,10 @@ import type { Events } from '../../components/virtualizedlist/virtualizedlist.ty
  *
  * ## Setup
  *
- * `virtualizerProps` is a required prop that requires at least two properties to be set: `count` and `estimateSize`.
- * `count` is the total number of items in the list, and `estimateSize` is a function that returns the estimated
- * size (in pixels) of each item in the list. `getItemKey` is also strongly recommended to be set to provide unique
- * keys for each item in the list.
+ * `virtualizerProps` is a required prop that requires at least three properties to be set:
+ * - `count` is the total number of items in the list
+ * - `estimateSize` is a function that returns the estimated size (in pixels) of each item in the list
+ * - `getItemKey` is a function that returns a unique key for each item in the list.
  *
  * ### Render list items
  *
@@ -44,6 +44,19 @@ import type { Events } from '../../components/virtualizedlist/virtualizedlist.ty
  * Unique keys for the list items are critical for dynamically changing list items or item's content.
  * If the key change with the content it will cause scrollbar and content shuttering.
  *
+ * ### Top/Bottom Padding
+ *
+ * If padding is required at the top or the bottom of the list, do not apply padding/margin via CSS since this
+ * will break the virtualization calculations and can cause scrollbars when they are not necessary.
+ * Instead use the `paddingStart` and `paddingEnd` properties (in pixels) of the `virtualizerProps` prop.
+ *
+ * ### Gaps between items
+ *
+ * If you are adding gaps between items using CSS margin or gap properties, you must provide the same value in pixels
+ * to the `gap` property of the `virtualizerProps` prop. This ensures that the virtualization calculations are accurate.
+ * If you are using CSS margins, ensure that you are not applying the margin to the top of the first or the bottom of the last item.
+ * If you need spacing there, use the `paddingStart` and `paddingEnd` properties of the `virtualizerProps` prop.
+ *
  * @tagname mdc-virtualizedlist
  *
  * @event scroll - (React: onScroll) Event that gets called when user scrolls inside of list.

package/dist/react/virtualizedlist/index.js

@@ -13,10 +13,10 @@ import { TAG_NAME } from '../../components/virtualizedlist/virtualizedlist.const
  *
  * ## Setup
  *
- * `virtualizerProps` is a required prop that requires at least two properties to be set: `count` and `estimateSize`.
- * `count` is the total number of items in the list, and `estimateSize` is a function that returns the estimated
- * size (in pixels) of each item in the list. `getItemKey` is also strongly recommended to be set to provide unique
- * keys for each item in the list.
+ * `virtualizerProps` is a required prop that requires at least three properties to be set:
+ * - `count` is the total number of items in the list
+ * - `estimateSize` is a function that returns the estimated size (in pixels) of each item in the list
+ * - `getItemKey` is a function that returns a unique key for each item in the list.
  *
  * ### Render list items
  *
@@ -45,6 +45,19 @@ import { TAG_NAME } from '../../components/virtualizedlist/virtualizedlist.const
  * Unique keys for the list items are critical for dynamically changing list items or item's content.
  * If the key change with the content it will cause scrollbar and content shuttering.
  *
+ * ### Top/Bottom Padding
+ *
+ * If padding is required at the top or the bottom of the list, do not apply padding/margin via CSS since this
+ * will break the virtualization calculations and can cause scrollbars when they are not necessary.
+ * Instead use the `paddingStart` and `paddingEnd` properties (in pixels) of the `virtualizerProps` prop.
+ *
+ * ### Gaps between items
+ *
+ * If you are adding gaps between items using CSS margin or gap properties, you must provide the same value in pixels
+ * to the `gap` property of the `virtualizerProps` prop. This ensures that the virtualization calculations are accurate.
+ * If you are using CSS margins, ensure that you are not applying the margin to the top of the first or the bottom of the last item.
+ * If you need spacing there, use the `paddingStart` and `paddingEnd` properties of the `virtualizerProps` prop.
+ *
  * @tagname mdc-virtualizedlist
  *
  * @event scroll - (React: onScroll) Event that gets called when user scrolls inside of list.

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@momentum-design/components",
   "packageManager": "yarn@3.2.4",
-  "version": "0.129.17",
+  "version": "0.129.19",
   "engines": {
     "node": ">=20.0.0",
     "npm": ">=8.0.0"