@momentum-design/components 0.95.7 → 0.96.0

package/dist/index.d.ts

@@ -25,6 +25,7 @@ import IconProvider from './components/iconprovider';
 import Input from './components/input';
 import InputChip from './components/inputchip';
 import Link from './components/link';
+import LinkButton from './components/linkbutton';
 import Linksimple from './components/linksimple';
 import List from './components/list';
 import ListItem from './components/listitem';
@@ -65,6 +66,8 @@ import Tooltip from './components/tooltip';
 import VirtualizedList from './components/virtualizedlist';
 import Listheader from './components/listheader';
 import SelectListbox from './components/selectlistbox';
+import Stepperitem from './components/stepperitem';
+import StepperConnector from './components/stepperconnector';
 import type { BadgeType } from './components/badge/badge.types';
 import type { ButtonColor, ButtonVariant, IconButtonSize, PillButtonSize } from './components/button/button.types';
 import type { PopoverPlacement } from './components/popover/popover.types';
@@ -77,6 +80,6 @@ import type { MenuSectionChangeEvent } from './components/menusection/menusectio
 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 { 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, Linksimple, List, ListItem, Marker, MenuBar, MenuItem, MenuItemCheckbox, MenuItemRadio, MenuPopover, MenuSection, NavMenuItem, OptGroup, Option, Password, Popover, Presence, Progressbar, Progressspinner, Radio, RadioGroup, ScreenreaderAnnouncer, Searchfield, Select, SideNavigation, Skeleton, Spinner, StaticCheckbox, StaticRadio, StaticToggle, Tab, TabList, Text, Textarea, ThemeProvider, Toggle, ToggleTip, Tooltip, VirtualizedList, Listheader, SelectListbox, };
+export { 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, ListItem, Marker, MenuBar, MenuItem, MenuItemCheckbox, MenuItemRadio, MenuPopover, MenuSection, NavMenuItem, OptGroup, Option, Password, Popover, Presence, Progressbar, Progressspinner, Radio, RadioGroup, ScreenreaderAnnouncer, Searchfield, Select, SideNavigation, Skeleton, Spinner, StaticCheckbox, StaticRadio, StaticToggle, Stepperitem, Tab, TabList, Text, Textarea, ThemeProvider, Toggle, ToggleTip, Tooltip, VirtualizedList, Listheader, SelectListbox, StepperConnector, };
 export type { BadgeType, ButtonColor, ButtonVariant, IconButtonSize, MenuPopoverActionEvent, MenuPopoverChangeEvent, MenuSectionChangeEvent, PillButtonSize, PopoverPlacement, SkeletonVariant, SelectChangeEvent, SelectInputEvent, SpinnerSize, SpinnerVariant, TextType, };
 export { BUTTON_COLORS, BUTTON_VARIANTS, ICON_BUTTON_SIZES, inMemoryCache, PILL_BUTTON_SIZES, SKELETON_VARIANTS, webAPIIconsCache, };

package/dist/index.js

@@ -27,6 +27,7 @@ import IconProvider from './components/iconprovider';
 import Input from './components/input';
 import InputChip from './components/inputchip';
 import Link from './components/link';
+import LinkButton from './components/linkbutton';
 import Linksimple from './components/linksimple';
 import List from './components/list';
 import ListItem from './components/listitem';
@@ -67,11 +68,13 @@ import Tooltip from './components/tooltip';
 import VirtualizedList from './components/virtualizedlist';
 import Listheader from './components/listheader';
 import SelectListbox from './components/selectlistbox';
+import Stepperitem from './components/stepperitem';
+import StepperConnector from './components/stepperconnector';
 // Constants / Utils Imports
 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';
 // Components Exports
-export { 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, Linksimple, List, ListItem, Marker, MenuBar, MenuItem, MenuItemCheckbox, MenuItemRadio, MenuPopover, MenuSection, NavMenuItem, OptGroup, Option, Password, Popover, Presence, Progressbar, Progressspinner, Radio, RadioGroup, ScreenreaderAnnouncer, Searchfield, Select, SideNavigation, Skeleton, Spinner, StaticCheckbox, StaticRadio, StaticToggle, Tab, TabList, Text, Textarea, ThemeProvider, Toggle, ToggleTip, Tooltip, VirtualizedList, Listheader, SelectListbox, };
+export { 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, ListItem, Marker, MenuBar, MenuItem, MenuItemCheckbox, MenuItemRadio, MenuPopover, MenuSection, NavMenuItem, OptGroup, Option, Password, Popover, Presence, Progressbar, Progressspinner, Radio, RadioGroup, ScreenreaderAnnouncer, Searchfield, Select, SideNavigation, Skeleton, Spinner, StaticCheckbox, StaticRadio, StaticToggle, Stepperitem, Tab, TabList, Text, Textarea, ThemeProvider, Toggle, ToggleTip, Tooltip, VirtualizedList, Listheader, SelectListbox, StepperConnector, };
 // Constants / Utils Exports
 export { BUTTON_COLORS, BUTTON_VARIANTS, ICON_BUTTON_SIZES, inMemoryCache, PILL_BUTTON_SIZES, SKELETON_VARIANTS, webAPIIconsCache, };

package/dist/react/index.d.ts

@@ -12,21 +12,22 @@ export { default as ButtonLink } from './buttonlink';
 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 CardRadio } from './cardradio';
 export { default as Checkbox } from './checkbox';
-export { default as CardCheckbox } from './cardcheckbox';
 export { default as Chip } from './chip';
-export { default as Coachmark } from './coachmark';
 export { default as Dialog } from './dialog';
 export { default as Divider } from './divider';
+export { default as Coachmark } from './coachmark';
 export { default as FilterChip } from './filterchip';
 export { default as FormfieldGroup } from './formfieldgroup';
+export { default as FormfieldWrapper } from './formfieldwrapper';
 export { default as Icon } from './icon';
 export { default as IconProvider } from './iconprovider';
 export { default as Input } from './input';
-export { default as FormfieldWrapper } from './formfieldwrapper';
 export { default as InputChip } from './inputchip';
 export { default as Link } from './link';
+export { default as LinkButton } from './linkbutton';
 export { default as Linksimple } from './linksimple';
 export { default as List } from './list';
 export { default as Listheader } from './listheader';
@@ -58,6 +59,8 @@ 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 StepperConnector } from './stepperconnector';
+export { default as StepperItem } from './stepperitem';
 export { default as Tab } from './tab';
 export { default as TabList } from './tablist';
 export { default as Text } from './text';

package/dist/react/index.js

@@ -12,21 +12,22 @@ export { default as ButtonLink } from './buttonlink';
 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 CardRadio } from './cardradio';
 export { default as Checkbox } from './checkbox';
-export { default as CardCheckbox } from './cardcheckbox';
 export { default as Chip } from './chip';
-export { default as Coachmark } from './coachmark';
 export { default as Dialog } from './dialog';
 export { default as Divider } from './divider';
+export { default as Coachmark } from './coachmark';
 export { default as FilterChip } from './filterchip';
 export { default as FormfieldGroup } from './formfieldgroup';
+export { default as FormfieldWrapper } from './formfieldwrapper';
 export { default as Icon } from './icon';
 export { default as IconProvider } from './iconprovider';
 export { default as Input } from './input';
-export { default as FormfieldWrapper } from './formfieldwrapper';
 export { default as InputChip } from './inputchip';
 export { default as Link } from './link';
+export { default as LinkButton } from './linkbutton';
 export { default as Linksimple } from './linksimple';
 export { default as List } from './list';
 export { default as Listheader } from './listheader';
@@ -58,6 +59,8 @@ 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 StepperConnector } from './stepperconnector';
+export { default as StepperItem } from './stepperitem';
 export { default as Tab } from './tab';
 export { default as TabList } from './tablist';
 export { default as Text } from './text';

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

@@ -0,0 +1,38 @@
+import { type EventName } from '@lit/react';
+import Component from '../../components/linkbutton';
+/**
+ * `mdc-linkbutton` visually mimics a hyperlink while functioning as a button. It blends the appearance of `mdc-link` with the accessibility and interaction capabilities of `mdc-button`.
+ *
+ * ### Features:
+ * - Looks like a link, behaves like a button.
+ * - Supports slots for a text label and an optional trailing icon.
+ * - Inherits accessibility and keyboard interaction behavior from `mdc-buttonsimple`.
+ *
+ * @dependency mdc-icon
+ *
+ * @tagname mdc-linkbutton
+ *
+ * @slot - Text label of the linkbutton.
+ *
+ * @event click - (React: onClick) This event is dispatched when the linkbutton is clicked.
+ * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the linkbutton.
+ * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the linkbutton.
+ * @event focus - (React: onFocus) This event is dispatched when the linkbutton receives focus.
+ *
+ * @cssproperty --mdc-link-border-radius - Border radius of the linkbutton.
+ * @cssproperty --mdc-link-color-active - Color of the linkbutton’s child content in the active state.
+ * @cssproperty --mdc-link-color-disabled - Color of the linkbutton’s child content in the disabled state.
+ * @cssproperty --mdc-link-color-hover - Color of the linkbutton’s child content in the hover state.
+ * @cssproperty --mdc-link-color-normal - Color of the linkbutton’s child content in the normal state.
+ * @cssproperty --mdc-link-inverted-color-active - Color of the inverted linkbutton’s child content in the active state.
+ * @cssproperty --mdc-link-inverted-color-disabled - Color of the inverted linkbutton’s child content in the disabled state.
+ * @cssproperty --mdc-link-inverted-color-hover - Color of the inverted linkbutton’s child content in the hover state.
+ * @cssproperty --mdc-link-inverted-color-normal - Color of the inverted linkbutton’s child content in the normal state.
+ */
+declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {
+    onClick: EventName<MouseEvent>;
+    onKeyDown: EventName<KeyboardEvent>;
+    onKeyUp: EventName<KeyboardEvent>;
+    onFocus: EventName<FocusEvent>;
+}>;
+export default reactWrapper;

package/dist/react/linkbutton/index.js

@@ -0,0 +1,46 @@
+import * as React from 'react';
+import { createComponent } from '@lit/react';
+import Component from '../../components/linkbutton';
+import { TAG_NAME } from '../../components/linkbutton/linkbutton.constants';
+/**
+ * `mdc-linkbutton` visually mimics a hyperlink while functioning as a button. It blends the appearance of `mdc-link` with the accessibility and interaction capabilities of `mdc-button`.
+ *
+ * ### Features:
+ * - Looks like a link, behaves like a button.
+ * - Supports slots for a text label and an optional trailing icon.
+ * - Inherits accessibility and keyboard interaction behavior from `mdc-buttonsimple`.
+ *
+ * @dependency mdc-icon
+ *
+ * @tagname mdc-linkbutton
+ *
+ * @slot - Text label of the linkbutton.
+ *
+ * @event click - (React: onClick) This event is dispatched when the linkbutton is clicked.
+ * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the linkbutton.
+ * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the linkbutton.
+ * @event focus - (React: onFocus) This event is dispatched when the linkbutton receives focus.
+ *
+ * @cssproperty --mdc-link-border-radius - Border radius of the linkbutton.
+ * @cssproperty --mdc-link-color-active - Color of the linkbutton’s child content in the active state.
+ * @cssproperty --mdc-link-color-disabled - Color of the linkbutton’s child content in the disabled state.
+ * @cssproperty --mdc-link-color-hover - Color of the linkbutton’s child content in the hover state.
+ * @cssproperty --mdc-link-color-normal - Color of the linkbutton’s child content in the normal state.
+ * @cssproperty --mdc-link-inverted-color-active - Color of the inverted linkbutton’s child content in the active state.
+ * @cssproperty --mdc-link-inverted-color-disabled - Color of the inverted linkbutton’s child content in the disabled state.
+ * @cssproperty --mdc-link-inverted-color-hover - Color of the inverted linkbutton’s child content in the hover state.
+ * @cssproperty --mdc-link-inverted-color-normal - Color of the inverted linkbutton’s child content in the normal state.
+ */
+const reactWrapper = createComponent({
+    tagName: TAG_NAME,
+    elementClass: Component,
+    react: React,
+    events: {
+        onClick: 'click',
+        onKeyDown: 'keydown',
+        onKeyUp: 'keyup',
+        onFocus: 'focus',
+    },
+    displayName: 'LinkButton',
+});
+export default reactWrapper;

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

@@ -0,0 +1,15 @@
+import Component from '../../components/stepperconnector';
+/**
+ * StepperConnector component visually represents the connection between two stepper items.
+ * Indicates whether the connection is complete or incomplete, and supports vertical or horizontal orientation.
+ * They are used between 2 `mdc-stepperitem` components to visually connect them and wrapped in a `mdc-stepper` component.
+ *
+ * @tagname mdc-stepperconnector
+ *
+ * @csspart connector - The main connector line between steps
+ *
+ * @cssproperty --mdc-stepperconnector-complete-background - Background color for the complete connector
+ * @cssproperty --mdc-stepperconnector-incomplete-background - Background color for the incomplete connector
+ */
+declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {}>;
+export default reactWrapper;

package/dist/react/stepperconnector/index.js

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import { createComponent } from '@lit/react';
+import Component from '../../components/stepperconnector';
+import { TAG_NAME } from '../../components/stepperconnector/stepperconnector.constants';
+/**
+ * StepperConnector component visually represents the connection between two stepper items.
+ * Indicates whether the connection is complete or incomplete, and supports vertical or horizontal orientation.
+ * They are used between 2 `mdc-stepperitem` components to visually connect them and wrapped in a `mdc-stepper` component.
+ *
+ * @tagname mdc-stepperconnector
+ *
+ * @csspart connector - The main connector line between steps
+ *
+ * @cssproperty --mdc-stepperconnector-complete-background - Background color for the complete connector
+ * @cssproperty --mdc-stepperconnector-incomplete-background - Background color for the incomplete connector
+ */
+const reactWrapper = createComponent({
+    tagName: TAG_NAME,
+    elementClass: Component,
+    react: React,
+    events: {},
+    displayName: 'StepperConnector',
+});
+export default reactWrapper;

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

@@ -0,0 +1,40 @@
+import { type EventName } from '@lit/react';
+import Component from '../../components/stepperitem';
+/**
+ * stepperitem component is used to represent a single step in a stepper component. It is used within a `mdc-stepper` component to indicate the current step in a process.
+ * It can have different statuses such as `completed`, `current`, `incomplete`, `error-current`, and `error-incomplete`.
+ * The component supports various visual styles and can be customized with labels, help text, and step numbers.
+ *
+ * This is an uncontrolled component, meaning it does not manage its own state. Instead, it relies on the consumer's to manage the state of each step.
+ * Make sure to set `aria-current="step"` on the current stepper item. It is applicable only when status is `current` or `error-current`. This ensures accessibility for the stepper component. Only one stepper item should have this attribute at a time.
+ *
+ * @dependency mdc-icon
+ * @dependency mdc-text
+ *
+ * @tagname mdc-stepperitem
+ *
+ * @event click - (React: onClick) This event is dispatched when the stepperitem is clicked.
+ * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the stepperitem.
+ * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the stepperitem.
+ *
+ * @csspart status-container - The container for the status icon or step number.
+ * @csspart label-container - The container for the label and help text.
+ * @csspart help-text-container - The container for the help text and error icon when applicable.
+ * @csspart status-icon - The icon representing the status of the stepper item.
+ * @csspart step-number - The text representing the step number.
+ * @csspart label - The text representing the label of the stepper item.
+ * @csspart help-text - The text providing additional information about the stepper item.
+ * @csspart help-icon - The icon representing an error in the stepper item.
+ *
+ * @cssproperty --mdc-stepperitem-status-container-background - The background color of the status container.
+ * @cssproperty --mdc-stepperitem-status-container-border-color - The border color of the status container.
+ * @cssproperty --mdc-stepperitem-label-color - The color of the label text.
+ * @cssproperty --mdc-stepperitem-help-text-color - The color of the optional label text.
+ * @cssproperty --mdc-stepperitem-label-container-background - The background color of the label container.
+ */
+declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {
+    onClick: EventName<MouseEvent>;
+    onKeyDown: EventName<KeyboardEvent>;
+    onKeyUp: EventName<KeyboardEvent>;
+}>;
+export default reactWrapper;

package/dist/react/stepperitem/index.js

@@ -0,0 +1,48 @@
+import * as React from 'react';
+import { createComponent } from '@lit/react';
+import Component from '../../components/stepperitem';
+import { TAG_NAME } from '../../components/stepperitem/stepperitem.constants';
+/**
+ * stepperitem component is used to represent a single step in a stepper component. It is used within a `mdc-stepper` component to indicate the current step in a process.
+ * It can have different statuses such as `completed`, `current`, `incomplete`, `error-current`, and `error-incomplete`.
+ * The component supports various visual styles and can be customized with labels, help text, and step numbers.
+ *
+ * This is an uncontrolled component, meaning it does not manage its own state. Instead, it relies on the consumer's to manage the state of each step.
+ * Make sure to set `aria-current="step"` on the current stepper item. It is applicable only when status is `current` or `error-current`. This ensures accessibility for the stepper component. Only one stepper item should have this attribute at a time.
+ *
+ * @dependency mdc-icon
+ * @dependency mdc-text
+ *
+ * @tagname mdc-stepperitem
+ *
+ * @event click - (React: onClick) This event is dispatched when the stepperitem is clicked.
+ * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the stepperitem.
+ * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the stepperitem.
+ *
+ * @csspart status-container - The container for the status icon or step number.
+ * @csspart label-container - The container for the label and help text.
+ * @csspart help-text-container - The container for the help text and error icon when applicable.
+ * @csspart status-icon - The icon representing the status of the stepper item.
+ * @csspart step-number - The text representing the step number.
+ * @csspart label - The text representing the label of the stepper item.
+ * @csspart help-text - The text providing additional information about the stepper item.
+ * @csspart help-icon - The icon representing an error in the stepper item.
+ *
+ * @cssproperty --mdc-stepperitem-status-container-background - The background color of the status container.
+ * @cssproperty --mdc-stepperitem-status-container-border-color - The border color of the status container.
+ * @cssproperty --mdc-stepperitem-label-color - The color of the label text.
+ * @cssproperty --mdc-stepperitem-help-text-color - The color of the optional label text.
+ * @cssproperty --mdc-stepperitem-label-container-background - The background color of the label container.
+ */
+const reactWrapper = createComponent({
+    tagName: TAG_NAME,
+    elementClass: Component,
+    react: React,
+    events: {
+        onClick: 'click',
+        onKeyDown: 'keydown',
+        onKeyUp: 'keyup',
+    },
+    displayName: 'StepperItem',
+});
+export default reactWrapper;

package/dist/utils/keys.d.ts

@@ -1,15 +1,15 @@
 declare const KEYS: {
-    readonly ARROW_DOWN: "ArrowDown";
-    readonly ARROW_LEFT: "ArrowLeft";
-    readonly ARROW_RIGHT: "ArrowRight";
-    readonly ARROW_UP: "ArrowUp";
-    readonly END: "End";
-    readonly ENTER: "Enter";
-    readonly ESCAPE: "Escape";
-    readonly HOME: "Home";
-    readonly PAGE_DOWN: "PageDown";
-    readonly PAGE_UP: "PageUp";
-    readonly SPACE: " ";
-    readonly TAB: "Tab";
+    ARROW_DOWN: string;
+    ARROW_LEFT: string;
+    ARROW_RIGHT: string;
+    ARROW_UP: string;
+    END: string;
+    ENTER: string;
+    ESCAPE: string;
+    HOME: string;
+    PAGE_DOWN: string;
+    PAGE_UP: string;
+    SPACE: string;
+    TAB: string;
 };
 export { KEYS };

package/package.json

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