@momentum-design/components 0.101.4 → 0.102.1

package/dist/index.d.ts

@@ -67,6 +67,7 @@ import Tab from './components/tab';
 import TabList from './components/tablist';
 import Text from './components/text';
 import Textarea from './components/textarea';
+import Typewriter from './components/typewriter';
 import ThemeProvider from './components/themeprovider';
 import Toast from './components/toast';
 import Toggle from './components/toggle';
@@ -79,12 +80,13 @@ import type { PopoverPlacement } from './components/popover/popover.types';
 import type { SkeletonVariant } from './components/skeleton/skeleton.types';
 import type { SpinnerSize, SpinnerVariant } from './components/spinner/spinner.types';
 import type { TextType } from './components/text/text.types';
+import type { TextType as TypewriterType } from './components/typewriter/typewriter.types';
 import type { MenuPopoverActionEvent, MenuPopoverChangeEvent } from './components/menupopover/menupopover.types';
 import type { SelectChangeEvent, SelectInputEvent } from './components/select/select.types';
 import type { MenuSectionChangeEvent } from './components/menusection/menusection.types';
 import { BUTTON_COLORS, BUTTON_VARIANTS, ICON_BUTTON_SIZES, PILL_BUTTON_SIZES } from './components/button/button.constants';
 import { SKELETON_VARIANTS } from './components/skeleton/skeleton.constants';
 import { inMemoryCache, webAPIIconsCache } from './utils/icon-cache';
-export { Accordion, AccordionButton, AccordionGroup, AlertChip, Animation, Appheader, Avatar, AvatarButton, Badge, Brandvisual, Bullet, Button, ButtonGroup, ButtonLink, Card, CardButton, CardCheckbox, CardRadio, Checkbox, Chip, Coachmark, Dialog, Divider, FilterChip, FormfieldGroup, Icon, IconProvider, Input, InputChip, Link, LinkButton, Linksimple, List, Listheader, ListItem, Marker, MenuBar, MenuItem, MenuItemCheckbox, MenuItemRadio, MenuPopover, MenuSection, NavMenuItem, OptGroup, Option, Password, Popover, Presence, Progressbar, Progressspinner, Radio, RadioGroup, ScreenreaderAnnouncer, Searchfield, Select, SelectListbox, SideNavigation, Skeleton, Spinner, StaticCheckbox, StaticRadio, StaticToggle, Stepper, StepperConnector, StepperItem, Tab, TabList, Text, Textarea, ThemeProvider, Toast, Toggle, ToggleTip, Tooltip, VirtualizedList, };
-export type { BadgeType, ButtonColor, ButtonVariant, IconButtonSize, MenuPopoverActionEvent, MenuPopoverChangeEvent, MenuSectionChangeEvent, PillButtonSize, PopoverPlacement, SkeletonVariant, SelectChangeEvent, SelectInputEvent, SpinnerSize, SpinnerVariant, TextType, };
+export { Accordion, AccordionButton, AccordionGroup, AlertChip, Animation, Appheader, Avatar, AvatarButton, Badge, Brandvisual, Bullet, Button, ButtonGroup, ButtonLink, Card, CardButton, CardCheckbox, CardRadio, Checkbox, Chip, Coachmark, Dialog, Divider, FilterChip, FormfieldGroup, Icon, IconProvider, Input, InputChip, Link, LinkButton, Linksimple, List, Listheader, ListItem, Marker, MenuBar, MenuItem, MenuItemCheckbox, MenuItemRadio, MenuPopover, MenuSection, NavMenuItem, OptGroup, Option, Password, Popover, Presence, Progressbar, Progressspinner, Radio, RadioGroup, ScreenreaderAnnouncer, Searchfield, Select, SelectListbox, SideNavigation, Skeleton, Spinner, StaticCheckbox, StaticRadio, StaticToggle, Stepper, StepperConnector, StepperItem, Tab, TabList, Text, Textarea, ThemeProvider, Toast, Toggle, Typewriter, ToggleTip, Tooltip, VirtualizedList, };
+export type { BadgeType, ButtonColor, ButtonVariant, IconButtonSize, MenuPopoverActionEvent, MenuPopoverChangeEvent, MenuSectionChangeEvent, PillButtonSize, PopoverPlacement, SkeletonVariant, SelectChangeEvent, SelectInputEvent, SpinnerSize, SpinnerVariant, TextType, TypewriterType, };
 export { BUTTON_COLORS, BUTTON_VARIANTS, ICON_BUTTON_SIZES, inMemoryCache, PILL_BUTTON_SIZES, SKELETON_VARIANTS, webAPIIconsCache, };

package/dist/index.js

@@ -69,6 +69,7 @@ import Tab from './components/tab';
 import TabList from './components/tablist';
 import Text from './components/text';
 import Textarea from './components/textarea';
+import Typewriter from './components/typewriter';
 import ThemeProvider from './components/themeprovider';
 import Toast from './components/toast';
 import Toggle from './components/toggle';
@@ -80,6 +81,6 @@ import { BUTTON_COLORS, BUTTON_VARIANTS, ICON_BUTTON_SIZES, PILL_BUTTON_SIZES, }
 import { SKELETON_VARIANTS } from './components/skeleton/skeleton.constants';
 import { inMemoryCache, webAPIIconsCache } from './utils/icon-cache';
 // Components Exports
-export { Accordion, AccordionButton, AccordionGroup, AlertChip, Animation, Appheader, Avatar, AvatarButton, Badge, Brandvisual, Bullet, Button, ButtonGroup, ButtonLink, Card, CardButton, CardCheckbox, CardRadio, Checkbox, Chip, Coachmark, Dialog, Divider, FilterChip, FormfieldGroup, Icon, IconProvider, Input, InputChip, Link, LinkButton, Linksimple, List, Listheader, ListItem, Marker, MenuBar, MenuItem, MenuItemCheckbox, MenuItemRadio, MenuPopover, MenuSection, NavMenuItem, OptGroup, Option, Password, Popover, Presence, Progressbar, Progressspinner, Radio, RadioGroup, ScreenreaderAnnouncer, Searchfield, Select, SelectListbox, SideNavigation, Skeleton, Spinner, StaticCheckbox, StaticRadio, StaticToggle, Stepper, StepperConnector, StepperItem, Tab, TabList, Text, Textarea, ThemeProvider, Toast, Toggle, ToggleTip, Tooltip, VirtualizedList, };
+export { Accordion, AccordionButton, AccordionGroup, AlertChip, Animation, Appheader, Avatar, AvatarButton, Badge, Brandvisual, Bullet, Button, ButtonGroup, ButtonLink, Card, CardButton, CardCheckbox, CardRadio, Checkbox, Chip, Coachmark, Dialog, Divider, FilterChip, FormfieldGroup, Icon, IconProvider, Input, InputChip, Link, LinkButton, Linksimple, List, Listheader, ListItem, Marker, MenuBar, MenuItem, MenuItemCheckbox, MenuItemRadio, MenuPopover, MenuSection, NavMenuItem, OptGroup, Option, Password, Popover, Presence, Progressbar, Progressspinner, Radio, RadioGroup, ScreenreaderAnnouncer, Searchfield, Select, SelectListbox, SideNavigation, Skeleton, Spinner, StaticCheckbox, StaticRadio, StaticToggle, Stepper, StepperConnector, StepperItem, Tab, TabList, Text, Textarea, ThemeProvider, Toast, Toggle, Typewriter, ToggleTip, Tooltip, VirtualizedList, };
 // Constants / Utils Exports
 export { BUTTON_COLORS, BUTTON_VARIANTS, ICON_BUTTON_SIZES, inMemoryCache, PILL_BUTTON_SIZES, SKELETON_VARIANTS, webAPIIconsCache, };

package/dist/react/index.d.ts

@@ -1,9 +1,9 @@
 export { default as Accordion } from './accordion';
 export { default as AccordionButton } from './accordionbutton';
 export { default as AccordionGroup } from './accordiongroup';
-export { default as Animation } from './animation';
 export { default as AlertChip } from './alertchip';
 export { default as Appheader } from './appheader';
+export { default as Animation } from './animation';
 export { default as Avatar } from './avatar';
 export { default as AvatarButton } from './avatarbutton';
 export { default as Badge } from './badge';
@@ -16,8 +16,8 @@ export { default as Buttonsimple } from './buttonsimple';
 export { default as Card } from './card';
 export { default as CardButton } from './cardbutton';
 export { default as CardCheckbox } from './cardcheckbox';
-export { default as Checkbox } from './checkbox';
 export { default as CardRadio } from './cardradio';
+export { default as Checkbox } from './checkbox';
 export { default as Chip } from './chip';
 export { default as Coachmark } from './coachmark';
 export { default as Dialog } from './dialog';
@@ -74,4 +74,5 @@ export { default as Toast } from './toast';
 export { default as Toggle } from './toggle';
 export { default as ToggleTip } from './toggletip';
 export { default as Tooltip } from './tooltip';
+export { default as Typewriter } from './typewriter';
 export { default as VirtualizedList } from './virtualizedlist';

package/dist/react/index.js

@@ -1,9 +1,9 @@
 export { default as Accordion } from './accordion';
 export { default as AccordionButton } from './accordionbutton';
 export { default as AccordionGroup } from './accordiongroup';
-export { default as Animation } from './animation';
 export { default as AlertChip } from './alertchip';
 export { default as Appheader } from './appheader';
+export { default as Animation } from './animation';
 export { default as Avatar } from './avatar';
 export { default as AvatarButton } from './avatarbutton';
 export { default as Badge } from './badge';
@@ -16,8 +16,8 @@ export { default as Buttonsimple } from './buttonsimple';
 export { default as Card } from './card';
 export { default as CardButton } from './cardbutton';
 export { default as CardCheckbox } from './cardcheckbox';
-export { default as Checkbox } from './checkbox';
 export { default as CardRadio } from './cardradio';
+export { default as Checkbox } from './checkbox';
 export { default as Chip } from './chip';
 export { default as Coachmark } from './coachmark';
 export { default as Dialog } from './dialog';
@@ -74,4 +74,5 @@ export { default as Toast } from './toast';
 export { default as Toggle } from './toggle';
 export { default as ToggleTip } from './toggletip';
 export { default as Tooltip } from './tooltip';
+export { default as Typewriter } from './typewriter';
 export { default as VirtualizedList } from './virtualizedlist';

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

@@ -28,6 +28,8 @@ import Component from '../../components/listitem';
  * @slot trailing-text-side-header - slot for list item side header text.
  * @slot trailing-text-subline - slot for list item subline text.
  * @slot trailing-controls - slot for list item controls to appear of trailing end.
+ * @slot content - content slot can be used to override the content completely. Be aware that
+ * this will override the default content of the list item.
  *
  * @cssproperty --mdc-listitem-default-background-color - Allows customization of the default background color.
  * @cssproperty --mdc-listitem-background-color-hover - Allows customization of the background color on hover.
@@ -38,7 +40,11 @@ import Component from '../../components/listitem';
  *  - Allows customization of the secondary and tertiary label text slot color.
  * @cssproperty --mdc-listitem-disabled-color - Allows customization of the disabled color.
  * @cssproperty --mdc-listitem-column-gap - Allows customization of column gap.
- * @cssproperty --mdc-listitem-padding-left-and-right - Allows customization of padding left and right.
+ * @cssproperty --mdc-listitem-padding-left-right - Allows customization of padding left and right.
+ * @cssproperty --mdc-listitem-padding-top-bottom - Allows customization of padding top and bottom.
+ * @cssproperty --mdc-listitem-cursor - Allows customization of the cursor.
+ * @cssproperty --mdc-listitem-width - Allows customization of the width of the list item.
+ * @cssproperty --mdc-listitem-height - Allows customization of the height of the list item.
  *
  * @event click - (React: onClick) This event is dispatched when the listitem is clicked.
  * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the listitem.

package/dist/react/listitem/index.js

@@ -30,6 +30,8 @@ import { TAG_NAME } from '../../components/listitem/listitem.constants';
  * @slot trailing-text-side-header - slot for list item side header text.
  * @slot trailing-text-subline - slot for list item subline text.
  * @slot trailing-controls - slot for list item controls to appear of trailing end.
+ * @slot content - content slot can be used to override the content completely. Be aware that
+ * this will override the default content of the list item.
  *
  * @cssproperty --mdc-listitem-default-background-color - Allows customization of the default background color.
  * @cssproperty --mdc-listitem-background-color-hover - Allows customization of the background color on hover.
@@ -40,7 +42,11 @@ import { TAG_NAME } from '../../components/listitem/listitem.constants';
  *  - Allows customization of the secondary and tertiary label text slot color.
  * @cssproperty --mdc-listitem-disabled-color - Allows customization of the disabled color.
  * @cssproperty --mdc-listitem-column-gap - Allows customization of column gap.
- * @cssproperty --mdc-listitem-padding-left-and-right - Allows customization of padding left and right.
+ * @cssproperty --mdc-listitem-padding-left-right - Allows customization of padding left and right.
+ * @cssproperty --mdc-listitem-padding-top-bottom - Allows customization of padding top and bottom.
+ * @cssproperty --mdc-listitem-cursor - Allows customization of the cursor.
+ * @cssproperty --mdc-listitem-width - Allows customization of the width of the list item.
+ * @cssproperty --mdc-listitem-height - Allows customization of the height of the list item.
  *
  * @event click - (React: onClick) This event is dispatched when the listitem is clicked.
  * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the listitem.

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

@@ -0,0 +1,51 @@
+import { type EventName } from '@lit/react';
+import Component from '../../components/typewriter';
+/**
+ * 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
+ *
+ * @tagname mdc-typewriter
+ * @slot - Default slot for text content
+ *
+ * @csspart container - Container for the text element
+ * @csspart text - The text element (forwarded to mdc-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.
+ *   Detail: \{ content: string, isTyping: boolean \}
+ */
+declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {
+    onTypingComplete: EventName<import("../../components/typewriter/typewriter.types").TypewriterTypingCompleteEvent>;
+    onChange: EventName<import("../../components/typewriter/typewriter.types").TypewriterChangeEvent>;
+}>;
+export default reactWrapper;

package/dist/react/typewriter/index.js

@@ -0,0 +1,59 @@
+import * as React from 'react';
+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
+ *
+ * @dependency mdc-text
+ *
+ * @tagname mdc-typewriter
+ * @slot - Default slot for text content
+ *
+ * @csspart container - Container for the text element
+ * @csspart text - The text element (forwarded to mdc-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.
+ *   Detail: \{ content: string, isTyping: boolean \}
+ */
+const reactWrapper = createComponent({
+    tagName: TAG_NAME,
+    elementClass: Component,
+    react: React,
+    events: {
+        onTypingComplete: 'typing-complete',
+        onChange: 'change',
+    },
+    displayName: 'Typewriter',
+});
+export default reactWrapper;

package/package.json

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