@momentum-design/components 0.101.3 → 0.102.0

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,6 +1,6 @@
 export { default as Accordion } from './accordion';
-export { default as AccordionGroup } from './accordiongroup';
 export { default as AccordionButton } from './accordionbutton';
+export { default as AccordionGroup } from './accordiongroup';
 export { default as AlertChip } from './alertchip';
 export { default as Animation } from './animation';
 export { default as Appheader } from './appheader';
@@ -37,11 +37,11 @@ export { default as Listheader } from './listheader';
 export { default as ListItem } from './listitem';
 export { default as Marker } from './marker';
 export { default as MenuBar } from './menubar';
-export { default as MenuItem } from './menuitem';
 export { default as MenuItemCheckbox } from './menuitemcheckbox';
+export { default as MenuItem } from './menuitem';
 export { default as MenuItemRadio } from './menuitemradio';
-export { default as MenuPopover } from './menupopover';
 export { default as MenuSection } from './menusection';
+export { default as MenuPopover } from './menupopover';
 export { default as NavMenuItem } from './navmenuitem';
 export { default as OptGroup } from './optgroup';
 export { default as Option } from './option';
@@ -61,9 +61,9 @@ export { default as Skeleton } from './skeleton';
 export { default as Spinner } from './spinner';
 export { default as StaticCheckbox } from './staticcheckbox';
 export { default as StaticRadio } from './staticradio';
-export { default as StaticToggle } from './statictoggle';
 export { default as Stepper } from './stepper';
 export { default as StepperConnector } from './stepperconnector';
+export { default as StaticToggle } from './statictoggle';
 export { default as StepperItem } from './stepperitem';
 export { default as Tab } from './tab';
 export { default as TabList } from './tablist';
@@ -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,6 +1,6 @@
 export { default as Accordion } from './accordion';
-export { default as AccordionGroup } from './accordiongroup';
 export { default as AccordionButton } from './accordionbutton';
+export { default as AccordionGroup } from './accordiongroup';
 export { default as AlertChip } from './alertchip';
 export { default as Animation } from './animation';
 export { default as Appheader } from './appheader';
@@ -37,11 +37,11 @@ export { default as Listheader } from './listheader';
 export { default as ListItem } from './listitem';
 export { default as Marker } from './marker';
 export { default as MenuBar } from './menubar';
-export { default as MenuItem } from './menuitem';
 export { default as MenuItemCheckbox } from './menuitemcheckbox';
+export { default as MenuItem } from './menuitem';
 export { default as MenuItemRadio } from './menuitemradio';
-export { default as MenuPopover } from './menupopover';
 export { default as MenuSection } from './menusection';
+export { default as MenuPopover } from './menupopover';
 export { default as NavMenuItem } from './navmenuitem';
 export { default as OptGroup } from './optgroup';
 export { default as Option } from './option';
@@ -61,9 +61,9 @@ export { default as Skeleton } from './skeleton';
 export { default as Spinner } from './spinner';
 export { default as StaticCheckbox } from './staticcheckbox';
 export { default as StaticRadio } from './staticradio';
-export { default as StaticToggle } from './statictoggle';
 export { default as Stepper } from './stepper';
 export { default as StepperConnector } from './stepperconnector';
+export { default as StaticToggle } from './statictoggle';
 export { default as StepperItem } from './stepperitem';
 export { default as Tab } from './tab';
 export { default as TabList } from './tablist';
@@ -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/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/dist/utils/mixins/CardComponentMixin.js

@@ -64,7 +64,7 @@ export const CardComponentMixin = (superClass) => {
             if (!this.imageSrc) {
                 return nothing;
             }
-            return html `<img part="image" src="${this.imageSrc}" alt="${this.imageAlt}" />`;
+            return html `<div part="image-wrapper"><img part="image" src="${this.imageSrc}" alt="${this.imageAlt}" /></div>`;
         }
         /**
          * Renders the icon on the card if icon name is provided

package/package.json

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