@momentum-design/components 0.134.19 → 0.134.21

package/dist/react/tooltip/index.js

@@ -3,19 +3,6 @@ import { createComponent } from '@lit/react';
 import Component from '../../components/tooltip';
 import { TAG_NAME } from '../../components/tooltip/tooltip.constants';
 /**
- * A Tooltip is a special type of popovers that provide additional context to content on the screen. <br/>
- * Tooltip is triggered by mouse hover or by keyboard focus and will disappear upon mouse exit or focus change.
- *
- * Because of this, tooltips cannot contain content that can be focused or interacted with.
- * When a tooltip must contain a focusable element like a link or button, use a toggle tip instead.
- *
- * A tooltip is triggered by mouse hover or by keyboard focus
- * and will disappear upon mouse exit or focus change.
- *
- * Note:
- *  - Tooltips cannot contain content that can be focused or interacted with.
- *  - Tooltips will contain the default `aria-hidden="true"` so that VO will never focus the tooltip.
- *
  * @tagname mdc-tooltip
  *
  * @event shown - (React: onShown) This event is dispatched when the tooltip is shown

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

@@ -2,45 +2,29 @@ import { type EventName } from '@lit/react';
 import Component from '../../components/typewriter';
 import type { Events } from '../../components/typewriter/typewriter.types';
 /**
- * Typewriter component that creates a typewriter effect on text content.
- * It uses the Text component internally, adding a progressive typing effect.
- *
- * The `type` attribute allows changing the text style (passed to the internal Text component).
- * The `tagname` attribute allows changing the tag name of the text element (passed to the internal Text component).
- * The default tag name is `p`.
- *
- * The `speed` attribute controls typing speed in milliseconds per character:
- * - 'very-slow' = 240ms per character
- * - 'slow' = 120ms per character
- * - 'normal' = 60ms per character (default)
- * - 'fast' = 20ms per character
- * - 'very-fast' = 1ms per character
- * - Or any numeric string representing milliseconds
- *
- * Advanced features:
- * - Dynamic speed adjustment during typing
- * - Chunked text addition via addTextChunk() method
- * - Instant text addition via addInstantTextChunk() method or instant parameter
- * - Mixed instant and animated chunks in queue
- * - Continues typing in background tabs
- * - Performance optimized for large text
- * - maxQueueSize to limit memory usage from excessive queuing
- * - event handling for typing completion and content changes
- *
- * The component includes accessibility features:
- * - Screen readers announce the complete text, not character by character
- * - Uses aria-live="polite" for dynamic content updates
- * - Sets aria-busy during typing animation
- *
- * @dependency mdc-text
- *
+ * `mdc-typewriter` progressively reveals its text content character-by-character to produce a typewriter effect. It renders through `mdc-text`, so it inherits the same typography options, and exposes both a static markup mode (slotted text) and an imperative API for appending text chunks at runtime.
+ * 
+ * **When to use**
+ * 
+ * - Stream model or assistant output where text should appear progressively rather than all at once.
+ * - Animate the arrival of short notifications or status messages to draw user attention.
+ * - Build chat-style transcripts where additional content can be appended after the initial render.
+ * 
+ * **When not to use**
+ * 
+ * - Use `mdc-text` directly when content should appear immediately and never animate.
+ * - Use `mdc-toast`, `mdc-banner`, or another notification surface when you need a container and chrome — the typewriter only animates text.
+ * - Avoid for long, dense content where the animation would slow down comprehension.
+ * 
  * @tagname mdc-typewriter
+ * @dependency mdc-text
+ * 
  * @slot - Default slot for text content
- *
+ * 
  * @csspart container - Container for the text element
  * @csspart text - The text element (forwarded to mdc-text)
  * @csspart typewriter-hidden - The hidden typewriter text
- *
+ * 
  * @event typing-complete - (React: onTypingComplete) Fired when the typewriter finishes typing all content.
  *   Detail: \{ finalContent: string \}
  * @event change - (React: onChange) Fired when the content of the typewriter changes.

package/dist/react/typewriter/index.js

@@ -3,39 +3,9 @@ import { createComponent } from '@lit/react';
 import Component from '../../components/typewriter';
 import { TAG_NAME } from '../../components/typewriter/typewriter.constants';
 /**
- * Typewriter component that creates a typewriter effect on text content.
- * It uses the Text component internally, adding a progressive typing effect.
- *
- * The `type` attribute allows changing the text style (passed to the internal Text component).
- * The `tagname` attribute allows changing the tag name of the text element (passed to the internal Text component).
- * The default tag name is `p`.
- *
- * The `speed` attribute controls typing speed in milliseconds per character:
- * - 'very-slow' = 240ms per character
- * - 'slow' = 120ms per character
- * - 'normal' = 60ms per character (default)
- * - 'fast' = 20ms per character
- * - 'very-fast' = 1ms per character
- * - Or any numeric string representing milliseconds
- *
- * Advanced features:
- * - Dynamic speed adjustment during typing
- * - Chunked text addition via addTextChunk() method
- * - Instant text addition via addInstantTextChunk() method or instant parameter
- * - Mixed instant and animated chunks in queue
- * - Continues typing in background tabs
- * - Performance optimized for large text
- * - maxQueueSize to limit memory usage from excessive queuing
- * - event handling for typing completion and content changes
- *
- * The component includes accessibility features:
- * - Screen readers announce the complete text, not character by character
- * - Uses aria-live="polite" for dynamic content updates
- * - Sets aria-busy during typing animation
- *
+ * @tagname mdc-typewriter
  * @dependency mdc-text
  *
- * @tagname mdc-typewriter
  * @slot - Default slot for text content
  *
  * @csspart container - Container for the text element

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

@@ -2,43 +2,30 @@ import { type EventName } from '@lit/react';
 import Component from '../../components/verticaltablist';
 import type { Events } from '../../components/verticaltablist/verticaltablist.types';
 /**
- * `mdc-verticaltablist` is a vertical tab list component that extends the List component.
- * It organizes tabs vertically and follows the same WCAG standards as the horizontal tablist.
- *
- * Children of the vertical tab list are `mdc-tab` elements, sent to the default slot.
- * Currently only "line" variant of the tab is supported, setting other variants doesn't have any effect.
- * The variant is automatically set on the tab when it is added to the vertical tab list, so there is no need to set it manually.
- *
- * The tabs can be navigated using the up/down arrow keys, and selected by clicking,
- * or pressing the Enter and Space keys.
- *
- * **Implicit accessibility rules**
- *
- * - The element that serves as the container for the set of tabs has role `tablist`.
- * - Each element that serves as a tab has role `tab` and is contained within the element with role `tablist` (Tab components passed in to default slot).
- * - The active tab element has the state `aria-selected` set to `true`
- *   and all other tab elements have it set to `false`.
- *
- * **Accessibility notes for consuming (have to be explicitly set when you consume the component)**
- *
- * - Each element that contains the `content panel` for a `tab` has role `tabpanel`.
- * - The `tablist` element needs to have a label provided by `data-aria-label`.
- * - Each element with role `tab` has the property `aria-controls`
- *   that should refer to its associated `tabpanel` element.
- * - The vertical orientation is conveyed through the aria-orientation property on the `tablist` element, which is set to `vertical` by the component.
- * - Each element with role `tabpanel` has the property `aria-labelledby` referring to its associated `tab` element.
- *
+ * `mdc-verticaltablist` organises a set of tabs vertically and lets users move between them with the up/down arrow keys, Home, End, and by clicking. It manages tab selection state and the active-tab semantics while the consumer renders the corresponding `tabpanel` content elsewhere in the DOM.
+ * 
+ * **When to use**
+ * 
+ * - Provide vertical navigation between sibling content panels (settings categories, side-by-side detail views).
+ * - When horizontal space is constrained or when the related content is naturally laid out beside the tab list.
+ * 
+ * **When not to use**
+ * 
+ * - Use `mdc-tablist` for a horizontal arrangement of tabs.
+ * - Use `mdc-sidenavigation` for top-level navigation between different pages or views rather than between related panels of the same view.
+ * - Use `mdc-listbox` / `mdc-select` for selection of a value rather than switching between visible panels.
+ * 
  * @tagname mdc-verticaltablist
- *
+ * 
  * @dependency mdc-tab
- *
+ * 
  * @event change - (React: onChange) This event is dispatched when the tab is selected.
  * Event that fires when user changes the active tab.
  *     The function sent as the argument will receive the fired event
  *      and the new tab id can be fetched from event.detail.tabId.
- *
+ * 
  *    `(event: CustomEvent) => handleTabChange(event.detail.tabId);`
- *
+ * 
  * @slot Default slot for mdc-tab elements.
  */
 declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {

package/dist/react/verticaltablist/index.js

@@ -3,32 +3,6 @@ import { createComponent } from '@lit/react';
 import Component from '../../components/verticaltablist';
 import { TAG_NAME } from '../../components/verticaltablist/verticaltablist.constants';
 /**
- * `mdc-verticaltablist` is a vertical tab list component that extends the List component.
- * It organizes tabs vertically and follows the same WCAG standards as the horizontal tablist.
- *
- * Children of the vertical tab list are `mdc-tab` elements, sent to the default slot.
- * Currently only "line" variant of the tab is supported, setting other variants doesn't have any effect.
- * The variant is automatically set on the tab when it is added to the vertical tab list, so there is no need to set it manually.
- *
- * The tabs can be navigated using the up/down arrow keys, and selected by clicking,
- * or pressing the Enter and Space keys.
- *
- * **Implicit accessibility rules**
- *
- * - The element that serves as the container for the set of tabs has role `tablist`.
- * - Each element that serves as a tab has role `tab` and is contained within the element with role `tablist` (Tab components passed in to default slot).
- * - The active tab element has the state `aria-selected` set to `true`
- *   and all other tab elements have it set to `false`.
- *
- * **Accessibility notes for consuming (have to be explicitly set when you consume the component)**
- *
- * - Each element that contains the `content panel` for a `tab` has role `tabpanel`.
- * - The `tablist` element needs to have a label provided by `data-aria-label`.
- * - Each element with role `tab` has the property `aria-controls`
- *   that should refer to its associated `tabpanel` element.
- * - The vertical orientation is conveyed through the aria-orientation property on the `tablist` element, which is set to `vertical` by the component.
- * - Each element with role `tabpanel` has the property `aria-labelledby` referring to its associated `tab` element.
- *
  * @tagname mdc-verticaltablist
  *
  * @dependency mdc-tab

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

@@ -2,69 +2,27 @@ import { type EventName } from '@lit/react';
 import Component from '../../components/virtualizedlist';
 import type { Events } from '../../components/virtualizedlist/virtualizedlist.types';
 /**
- * `mdc-virtualizedlist` is an extension of the `mdc-list` component that adds virtualization capabilities using
- * the Tanstack Virtual library.
- *
- * This component is thin wrapper around the Tanstack libray to provide additional funtionalities such as
- * keyboard navigation, focus management, scroll anchoring and accessibility features.
- *
- * Please refer to [Tanstack Virtual Docs](https://tanstack.com/virtual/latest) for more in depth documentation.
- *
- * ## Setup
- *
- * `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
- *
- * To keep the component framework-agnostic, the rendering of the list items is left to the consumer.
- *
- * We need to render only the visible items. The list of visible items are provided by the `virtualitemschange` event.
- * The event detail contains the `virtualItems` array, which contains the information for the rendering.
- * List items must have an `data-index` attribute, the indexes are in the `virtualItems` list.
- *
- * ## Best practices
- *
- * ### List updates
- *
- * Tanstack needs only the count of the items in the list and the size of each item to perform virtualization.
- * List updates happens when
- * - when `virtualizerProps` property of the component instance changes
- * - when `observe-size-changes` is set and the item's size changes (it uses ResizeObserver internally)
- * - when `component.visualiser.measure` called manually.
- *
- * ### Header
- *
- * To add a header to the list, use the `mdc-listheader` component and place it in the `list-header` slot.
- *
- * ### Lists with dynamic content
- *
- * 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.
- *
+ * `mdc-virtualizedlist` renders only the items currently visible in the scroll viewport, using TanStack Virtual under the hood. It adds keyboard navigation, focus management, scroll anchoring, and accessibility wiring on top of the virtualization primitives so very large lists stay performant while remaining usable for keyboard and assistive technology users.
+ * 
+ * **When to use**
+ * 
+ * - Render long or unbounded lists (chats, search results, logs) where mounting every item would be expensive.
+ * - Lists whose items change size dynamically and need accurate measurement (with `observe-size-changes`).
+ * - Bottom-anchored streams (e.g. chat transcripts) that should follow new content until the user scrolls away.
+ * 
+ * **When not to use**
+ * 
+ * - Use `mdc-list` when the data set is small enough to render in full — virtualization adds complexity that isn't needed.
+ * - Use `mdc-listbox` or `mdc-select` for selecting a single value from a list of options.
+ * 
  * @tagname mdc-virtualizedlist
- *
+ * 
  * @event scroll - (React: onScroll) Event that gets called when user scrolls inside of list.
  * @event virtualitemschange - (React: onVirtualItemsChange) Event that gets called when the virtual items change.
- *
+ * 
  * @slot default - This is a default/unnamed slot, where listitems can be placed.
  * @slot list-header - This slot is used to pass a header for the list, which can be a `mdc-listheader` component.
- *
+ * 
  * @csspart container - The container of the virtualized list.
  * @csspart scroll - The scrollable area of the virtualized list.
  */

package/dist/react/virtualizedlist/index.js

@@ -3,61 +3,6 @@ import { createComponent } from '@lit/react';
 import Component from '../../components/virtualizedlist';
 import { TAG_NAME } from '../../components/virtualizedlist/virtualizedlist.constants';
 /**
- * `mdc-virtualizedlist` is an extension of the `mdc-list` component that adds virtualization capabilities using
- * the Tanstack Virtual library.
- *
- * This component is thin wrapper around the Tanstack libray to provide additional funtionalities such as
- * keyboard navigation, focus management, scroll anchoring and accessibility features.
- *
- * Please refer to [Tanstack Virtual Docs](https://tanstack.com/virtual/latest) for more in depth documentation.
- *
- * ## Setup
- *
- * `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
- *
- * To keep the component framework-agnostic, the rendering of the list items is left to the consumer.
- *
- * We need to render only the visible items. The list of visible items are provided by the `virtualitemschange` event.
- * The event detail contains the `virtualItems` array, which contains the information for the rendering.
- * List items must have an `data-index` attribute, the indexes are in the `virtualItems` list.
- *
- * ## Best practices
- *
- * ### List updates
- *
- * Tanstack needs only the count of the items in the list and the size of each item to perform virtualization.
- * List updates happens when
- * - when `virtualizerProps` property of the component instance changes
- * - when `observe-size-changes` is set and the item's size changes (it uses ResizeObserver internally)
- * - when `component.visualiser.measure` called manually.
- *
- * ### Header
- *
- * To add a header to the list, use the `mdc-listheader` component and place it in the `list-header` slot.
- *
- * ### Lists with dynamic content
- *
- * 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/utils/dom.js

@@ -251,7 +251,7 @@ export const getDomActiveElement = (root = document) => {
  * @param element - The element to check
  * @returns True if the element has the OverflowMixin methods
  */
-export const hasOverflowMixin = (element) => 'isWidthOverflowing' in element && typeof element.isWidthOverflowing === 'function';
+export const hasOverflowMixin = (element) => element && 'isWidthOverflowing' in element && typeof element.isWidthOverflowing === 'function';
 /**
  * Recursively gets the host element if the provided element is inside a shadow DOM.
  *

package/package.json

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