@momentum-design/components 0.62.2 → 0.62.4

package/dist/index.d.ts

@@ -6,12 +6,14 @@ import Badge from './components/badge';
 import Brandvisual from './components/brandvisual';
 import Bullet from './components/bullet';
 import Button from './components/button';
+import ButtonLink from './components/buttonlink';
+import Card from './components/card';
+import CardButton from './components/cardbutton';
+import CardCheckbox from './components/cardcheckbox';
+import CardRadio from './components/cardradio';
 import Checkbox from './components/checkbox';
 import Chip from './components/chip';
 import Coachmark from './components/coachmark';
-import StaticCheckbox from './components/staticcheckbox';
-import StaticRadio from './components/staticradio';
-import StaticToggle from './components/statictoggle';
 import Divider from './components/divider';
 import FilterChip from './components/filterchip';
 import FormfieldGroup from './components/formfieldgroup';
@@ -20,6 +22,7 @@ import IconProvider from './components/iconprovider';
 import Input from './components/input';
 import InputChip from './components/inputchip';
 import Link from './components/link';
+import Linksimple from './components/linksimple';
 import List from './components/list';
 import ListItem from './components/listitem';
 import Marker from './components/marker';
@@ -35,7 +38,11 @@ import ScreenreaderAnnouncer from './components/screenreaderannouncer';
 import Searchfield from './components/searchfield';
 import Select from './components/select';
 import Spinner from './components/spinner';
+import StaticCheckbox from './components/staticcheckbox';
+import StaticRadio from './components/staticradio';
+import StaticToggle from './components/statictoggle';
 import Tab from './components/tab';
+import TabList from './components/tablist';
 import Text from './components/text';
 import Textarea from './components/textarea';
 import ThemeProvider from './components/themeprovider';
@@ -43,9 +50,7 @@ import Toggle from './components/toggle';
 import Tooltip from './components/tooltip';
 import ToggleTip from './components/toggletip';
 import VirtualizedList from './components/virtualizedlist';
-import TabList from './components/tablist';
-import ButtonLink from './components/buttonlink';
-import Linksimple from './components/linksimple';
+import MenuItem from './components/menuitem';
 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';
@@ -53,6 +58,6 @@ import type { SpinnerSize, SpinnerVariant } from './components/spinner/spinner.t
 import type { TextType } from './components/text/text.types';
 import { inMemoryCache, webAPIIconsCache } from './utils/icon-cache';
 import { BUTTON_COLORS, BUTTON_VARIANTS, ICON_BUTTON_SIZES, PILL_BUTTON_SIZES } from './components/button/button.constants';
-export { AlertChip, Avatar, AvatarButton, Badge, Bullet, Button, Checkbox, Chip, Coachmark, Divider, FilterChip, FormfieldGroup, Icon, IconProvider, Input, InputChip, Link, List, ListItem, Marker, Popover, Presence, Radio, RadioGroup, Spinner, Tab, Text, ThemeProvider, Toggle, VirtualizedList, Option, OptGroup, Progressbar, ScreenreaderAnnouncer, StaticCheckbox, StaticRadio, StaticToggle, Textarea, ToggleTip, Tooltip, Searchfield, Brandvisual, Appheader, Select, TabList, Progressspinner, ButtonLink, Linksimple, };
+export { AlertChip, Avatar, AvatarButton, Badge, Bullet, Button, Card, CardButton, CardCheckbox, CardRadio, Checkbox, Chip, Coachmark, Divider, FilterChip, FormfieldGroup, Icon, IconProvider, Input, InputChip, Link, List, ListItem, Marker, Popover, Presence, Radio, RadioGroup, Spinner, Tab, Text, ThemeProvider, Toggle, VirtualizedList, Option, OptGroup, Progressbar, ScreenreaderAnnouncer, StaticCheckbox, StaticRadio, StaticToggle, Textarea, ToggleTip, Tooltip, Searchfield, Brandvisual, Appheader, Select, TabList, Progressspinner, ButtonLink, Linksimple, MenuItem, };
 export type { TextType, SpinnerSize, SpinnerVariant, PopoverPlacement, BadgeType, IconButtonSize, PillButtonSize, ButtonVariant, ButtonColor, };
 export { inMemoryCache, webAPIIconsCache, BUTTON_COLORS, BUTTON_VARIANTS, ICON_BUTTON_SIZES, PILL_BUTTON_SIZES };

package/dist/index.js

@@ -7,12 +7,14 @@ import Badge from './components/badge';
 import Brandvisual from './components/brandvisual';
 import Bullet from './components/bullet';
 import Button from './components/button';
+import ButtonLink from './components/buttonlink';
+import Card from './components/card';
+import CardButton from './components/cardbutton';
+import CardCheckbox from './components/cardcheckbox';
+import CardRadio from './components/cardradio';
 import Checkbox from './components/checkbox';
 import Chip from './components/chip';
 import Coachmark from './components/coachmark';
-import StaticCheckbox from './components/staticcheckbox';
-import StaticRadio from './components/staticradio';
-import StaticToggle from './components/statictoggle';
 import Divider from './components/divider';
 import FilterChip from './components/filterchip';
 import FormfieldGroup from './components/formfieldgroup';
@@ -21,6 +23,7 @@ import IconProvider from './components/iconprovider';
 import Input from './components/input';
 import InputChip from './components/inputchip';
 import Link from './components/link';
+import Linksimple from './components/linksimple';
 import List from './components/list';
 import ListItem from './components/listitem';
 import Marker from './components/marker';
@@ -36,7 +39,11 @@ import ScreenreaderAnnouncer from './components/screenreaderannouncer';
 import Searchfield from './components/searchfield';
 import Select from './components/select';
 import Spinner from './components/spinner';
+import StaticCheckbox from './components/staticcheckbox';
+import StaticRadio from './components/staticradio';
+import StaticToggle from './components/statictoggle';
 import Tab from './components/tab';
+import TabList from './components/tablist';
 import Text from './components/text';
 import Textarea from './components/textarea';
 import ThemeProvider from './components/themeprovider';
@@ -44,13 +51,11 @@ import Toggle from './components/toggle';
 import Tooltip from './components/tooltip';
 import ToggleTip from './components/toggletip';
 import VirtualizedList from './components/virtualizedlist';
-import TabList from './components/tablist';
-import ButtonLink from './components/buttonlink';
-import Linksimple from './components/linksimple';
+import MenuItem from './components/menuitem';
 import { inMemoryCache, webAPIIconsCache } from './utils/icon-cache';
 // Constants / Utils Imports
 import { BUTTON_COLORS, BUTTON_VARIANTS, ICON_BUTTON_SIZES, PILL_BUTTON_SIZES, } from './components/button/button.constants';
 // Components Exports
-export { AlertChip, Avatar, AvatarButton, Badge, Bullet, Button, Checkbox, Chip, Coachmark, Divider, FilterChip, FormfieldGroup, Icon, IconProvider, Input, InputChip, Link, List, ListItem, Marker, Popover, Presence, Radio, RadioGroup, Spinner, Tab, Text, ThemeProvider, Toggle, VirtualizedList, Option, OptGroup, Progressbar, ScreenreaderAnnouncer, StaticCheckbox, StaticRadio, StaticToggle, Textarea, ToggleTip, Tooltip, Searchfield, Brandvisual, Appheader, Select, TabList, Progressspinner, ButtonLink, Linksimple, };
+export { AlertChip, Avatar, AvatarButton, Badge, Bullet, Button, Card, CardButton, CardCheckbox, CardRadio, Checkbox, Chip, Coachmark, Divider, FilterChip, FormfieldGroup, Icon, IconProvider, Input, InputChip, Link, List, ListItem, Marker, Popover, Presence, Radio, RadioGroup, Spinner, Tab, Text, ThemeProvider, Toggle, VirtualizedList, Option, OptGroup, Progressbar, ScreenreaderAnnouncer, StaticCheckbox, StaticRadio, StaticToggle, Textarea, ToggleTip, Tooltip, Searchfield, Brandvisual, Appheader, Select, TabList, Progressspinner, ButtonLink, Linksimple, MenuItem, };
 // Constants / Utils Exports
 export { inMemoryCache, webAPIIconsCache, BUTTON_COLORS, BUTTON_VARIANTS, ICON_BUTTON_SIZES, PILL_BUTTON_SIZES };

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

@@ -0,0 +1,47 @@
+import Component from '../../components/card';
+/**
+ * The card component allows users to organize information in a structured and tangible
+ * format that is visually appealing. `mdc-card` is a static component that supports
+ * the following features:
+ * - Image
+ * - Header
+ *    - Icon
+ *    - Title
+ *    - Subtitle
+ * - Body
+ *
+ * The card can either be vertically or horizontally oriented.
+ *
+ * There are 2 variants for the card that represent the border styling - 'border' and 'ghost'.
+ *
+ * To make this card interactive, use the following slots:
+ * - `icon-button`: This slot supports action icon buttons in the header section (maximum of 3 buttons).
+ * - `footer-link`: This slot is for passing `mdc-link` component within the footer section.
+ * - `footer-button-primary`: This slot is for passing primary variant of
+ * `mdc-button` component within the footer section.
+ * - `footer-button-secondary`: This slot is for passing secondary variant of `mdc-button` component
+ * within the footer section.
+ *
+ * Interactive card additionally supports 'promotional' variant that represents the border styling - 'promotional'.
+ *
+ * @slot before-body - This slot is for passing the content before the body
+ * @slot body - This slot is for passing the text content for the card
+ * @slot after-body - This slot is for passing the content after the body
+ * @slot footer-link - This slot is for passing `mdc-link` component within the footer section.
+ * @slot footer-button-primary - This slot is for passing primary variant of
+ * `mdc-button` component within the footer section.
+ * @slot footer-button-secondary - This slot is for passing secondary variant of `mdc-button` component
+ * within the footer section.
+ *
+ * @tagname mdc-card
+ *
+ * @dependency mdc-icon
+ * @dependency mdc-text
+ *
+ * @slot before-body - This slot is for passing the content before the body
+ * @slot body - This slot is for passing the text content for the card
+ * @slot after-body - This slot is for passing the content after the body
+ *
+ */
+declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {}>;
+export default reactWrapper;

package/dist/react/card/index.js

@@ -0,0 +1,56 @@
+import * as React from 'react';
+import { createComponent } from '@lit/react';
+import Component from '../../components/card';
+import { TAG_NAME } from '../../components/card/card.constants';
+/**
+ * The card component allows users to organize information in a structured and tangible
+ * format that is visually appealing. `mdc-card` is a static component that supports
+ * the following features:
+ * - Image
+ * - Header
+ *    - Icon
+ *    - Title
+ *    - Subtitle
+ * - Body
+ *
+ * The card can either be vertically or horizontally oriented.
+ *
+ * There are 2 variants for the card that represent the border styling - 'border' and 'ghost'.
+ *
+ * To make this card interactive, use the following slots:
+ * - `icon-button`: This slot supports action icon buttons in the header section (maximum of 3 buttons).
+ * - `footer-link`: This slot is for passing `mdc-link` component within the footer section.
+ * - `footer-button-primary`: This slot is for passing primary variant of
+ * `mdc-button` component within the footer section.
+ * - `footer-button-secondary`: This slot is for passing secondary variant of `mdc-button` component
+ * within the footer section.
+ *
+ * Interactive card additionally supports 'promotional' variant that represents the border styling - 'promotional'.
+ *
+ * @slot before-body - This slot is for passing the content before the body
+ * @slot body - This slot is for passing the text content for the card
+ * @slot after-body - This slot is for passing the content after the body
+ * @slot footer-link - This slot is for passing `mdc-link` component within the footer section.
+ * @slot footer-button-primary - This slot is for passing primary variant of
+ * `mdc-button` component within the footer section.
+ * @slot footer-button-secondary - This slot is for passing secondary variant of `mdc-button` component
+ * within the footer section.
+ *
+ * @tagname mdc-card
+ *
+ * @dependency mdc-icon
+ * @dependency mdc-text
+ *
+ * @slot before-body - This slot is for passing the content before the body
+ * @slot body - This slot is for passing the text content for the card
+ * @slot after-body - This slot is for passing the content after the body
+ *
+ */
+const reactWrapper = createComponent({
+    tagName: TAG_NAME,
+    elementClass: Component,
+    react: React,
+    events: {},
+    displayName: 'Card',
+});
+export default reactWrapper;

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

@@ -0,0 +1,32 @@
+import { type EventName } from '@lit/react';
+import Component from '../../components/cardbutton';
+/**
+ * cardbutton component looks like a card and behaves as a button component.
+ *
+ * **Note**: This is a single selection card i.e. interacting anywhere on the card would trigger the click event.
+ * Make sure to pass only non-interactable elements within the slots.
+ *
+ * @tagname mdc-cardbutton
+ *
+ * @dependency mdc-icon
+ * @dependency mdc-text
+ *
+ * @slot before-body - This slot is for passing the content before the body
+ * @slot body - This slot is for passing the text content for the card
+ * @slot after-body - This slot is for passing the content after the body
+ *
+ * @event click - (React: onClick) Event that gets dispatched when the card is clicked.
+ * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the card.
+ * It fires the click event when enter key is used.
+ * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the card.
+ * It fires the click event when space key is used.
+ * @event focus - (React: onFocus) Event that gets dispatched when the card receives focus.
+ *
+ */
+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/cardbutton/index.js

@@ -0,0 +1,40 @@
+import * as React from 'react';
+import { createComponent } from '@lit/react';
+import Component from '../../components/cardbutton';
+import { TAG_NAME } from '../../components/cardbutton/cardbutton.constants';
+/**
+ * cardbutton component looks like a card and behaves as a button component.
+ *
+ * **Note**: This is a single selection card i.e. interacting anywhere on the card would trigger the click event.
+ * Make sure to pass only non-interactable elements within the slots.
+ *
+ * @tagname mdc-cardbutton
+ *
+ * @dependency mdc-icon
+ * @dependency mdc-text
+ *
+ * @slot before-body - This slot is for passing the content before the body
+ * @slot body - This slot is for passing the text content for the card
+ * @slot after-body - This slot is for passing the content after the body
+ *
+ * @event click - (React: onClick) Event that gets dispatched when the card is clicked.
+ * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the card.
+ * It fires the click event when enter key is used.
+ * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the card.
+ * It fires the click event when space key is used.
+ * @event focus - (React: onFocus) Event that gets dispatched when the card receives focus.
+ *
+ */
+const reactWrapper = createComponent({
+    tagName: TAG_NAME,
+    elementClass: Component,
+    react: React,
+    events: {
+        onClick: 'click',
+        onKeyDown: 'keydown',
+        onKeyUp: 'keyup',
+        onFocus: 'focus',
+    },
+    displayName: 'CardButton',
+});
+export default reactWrapper;

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

@@ -0,0 +1,40 @@
+import { type EventName } from '@lit/react';
+import Component from '../../components/cardcheckbox';
+/**
+ * cardcheckbox component extends `mdc-card` and supports checkbox selection interaction addtionally.
+ *
+ * While using this component within a form or group of cards, make sure cards are in a role = "checkbox-group".
+ * This card would have events for selected and unselected (similar to checkbox)
+ *
+ * **Note**: This is a single selection card i.e. interacting anywhere on the card would toggle the checked state.
+ * Make sure to pass only non-interactable elements within the slots.
+ *
+ * Make sure to pass the `card-title` mandatorily for this card.
+ *
+ * @tagname mdc-cardcheckbox
+ *
+ * @dependency mdc-icon
+ * @dependency mdc-staticcheckbox
+ * @dependency mdc-text
+ *
+ * @slot before-body - This slot is for passing the content before the body
+ * @slot body - This slot is for passing the text content for the card
+ * @slot after-body - This slot is for passing the content after the body
+ *
+ * @event click - (React: onClick) Event that gets dispatched when the card is clicked. It toggles the checked state.
+ * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the card.
+ * It toggles the checked state when enter key is used.
+ * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the card.
+ * It toggles the checked state when space key is used.
+ * @event change - (React: onChange) Event that gets dispatched when the card state changes.
+ * @event focus - (React: onFocus) Event that gets dispatched when the card receives focus.
+ *
+ */
+declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {
+    onClick: EventName<MouseEvent>;
+    onKeyDown: EventName<KeyboardEvent>;
+    onKeyUp: EventName<KeyboardEvent>;
+    onChange: EventName<Event>;
+    onFocus: EventName<FocusEvent>;
+}>;
+export default reactWrapper;

package/dist/react/cardcheckbox/index.js

@@ -0,0 +1,48 @@
+import * as React from 'react';
+import { createComponent } from '@lit/react';
+import Component from '../../components/cardcheckbox';
+import { TAG_NAME } from '../../components/cardcheckbox/cardcheckbox.constants';
+/**
+ * cardcheckbox component extends `mdc-card` and supports checkbox selection interaction addtionally.
+ *
+ * While using this component within a form or group of cards, make sure cards are in a role = "checkbox-group".
+ * This card would have events for selected and unselected (similar to checkbox)
+ *
+ * **Note**: This is a single selection card i.e. interacting anywhere on the card would toggle the checked state.
+ * Make sure to pass only non-interactable elements within the slots.
+ *
+ * Make sure to pass the `card-title` mandatorily for this card.
+ *
+ * @tagname mdc-cardcheckbox
+ *
+ * @dependency mdc-icon
+ * @dependency mdc-staticcheckbox
+ * @dependency mdc-text
+ *
+ * @slot before-body - This slot is for passing the content before the body
+ * @slot body - This slot is for passing the text content for the card
+ * @slot after-body - This slot is for passing the content after the body
+ *
+ * @event click - (React: onClick) Event that gets dispatched when the card is clicked. It toggles the checked state.
+ * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the card.
+ * It toggles the checked state when enter key is used.
+ * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the card.
+ * It toggles the checked state when space key is used.
+ * @event change - (React: onChange) Event that gets dispatched when the card state changes.
+ * @event focus - (React: onFocus) Event that gets dispatched when the card receives focus.
+ *
+ */
+const reactWrapper = createComponent({
+    tagName: TAG_NAME,
+    elementClass: Component,
+    react: React,
+    events: {
+        onClick: 'click',
+        onKeyDown: 'keydown',
+        onKeyUp: 'keyup',
+        onChange: 'change',
+        onFocus: 'focus',
+    },
+    displayName: 'CardCheckbox',
+});
+export default reactWrapper;

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

@@ -0,0 +1,40 @@
+import { type EventName } from '@lit/react';
+import Component from '../../components/cardradio';
+/**
+ * cardradio component extends `mdc-card` and supports radio selection interaction addtionally.
+ *
+ * While using this component within a form or group of cards, make sure cards are in a role = "radio-group".
+ * This card would have events for selected and unselected (similar to radio)
+ *
+ * **Note**: This is a single selection card i.e. interacting anywhere on the card would toggle the checked state.
+ * Make sure to pass only non-interactable elements within the slots.
+ *
+ * Make sure to pass the `card-title` mandatorily for this card.
+ *
+ * @tagname mdc-cardradio
+ *
+ * @dependency mdc-icon
+ * @dependency mdc-staticradio
+ * @dependency mdc-text
+ *
+ * @slot before-body - This slot is for passing the content before the body
+ * @slot body - This slot is for passing the text content for the card
+ * @slot after-body - This slot is for passing the content after the body
+ *
+ * @event click - (React: onClick) Event that gets dispatched when the card is clicked. It toggles the checked state.
+ * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the card.
+ * It toggles the checked state when enter key is used.
+ * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the card.
+ * It toggles the checked state when space key is used.
+ * @event change - (React: onChange) Event that gets dispatched when the card state changes.
+ * @event focus - (React: onFocus) Event that gets dispatched when the card receives focus.
+ *
+ */
+declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {
+    onClick: EventName<MouseEvent>;
+    onKeyDown: EventName<KeyboardEvent>;
+    onKeyUp: EventName<KeyboardEvent>;
+    onChange: EventName<Event>;
+    onFocus: EventName<FocusEvent>;
+}>;
+export default reactWrapper;

package/dist/react/cardradio/index.js

@@ -0,0 +1,48 @@
+import * as React from 'react';
+import { createComponent } from '@lit/react';
+import Component from '../../components/cardradio';
+import { TAG_NAME } from '../../components/cardradio/cardradio.constants';
+/**
+ * cardradio component extends `mdc-card` and supports radio selection interaction addtionally.
+ *
+ * While using this component within a form or group of cards, make sure cards are in a role = "radio-group".
+ * This card would have events for selected and unselected (similar to radio)
+ *
+ * **Note**: This is a single selection card i.e. interacting anywhere on the card would toggle the checked state.
+ * Make sure to pass only non-interactable elements within the slots.
+ *
+ * Make sure to pass the `card-title` mandatorily for this card.
+ *
+ * @tagname mdc-cardradio
+ *
+ * @dependency mdc-icon
+ * @dependency mdc-staticradio
+ * @dependency mdc-text
+ *
+ * @slot before-body - This slot is for passing the content before the body
+ * @slot body - This slot is for passing the text content for the card
+ * @slot after-body - This slot is for passing the content after the body
+ *
+ * @event click - (React: onClick) Event that gets dispatched when the card is clicked. It toggles the checked state.
+ * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the card.
+ * It toggles the checked state when enter key is used.
+ * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the card.
+ * It toggles the checked state when space key is used.
+ * @event change - (React: onChange) Event that gets dispatched when the card state changes.
+ * @event focus - (React: onFocus) Event that gets dispatched when the card receives focus.
+ *
+ */
+const reactWrapper = createComponent({
+    tagName: TAG_NAME,
+    elementClass: Component,
+    react: React,
+    events: {
+        onClick: 'click',
+        onKeyDown: 'keydown',
+        onKeyUp: 'keyup',
+        onChange: 'change',
+        onFocus: 'focus',
+    },
+    displayName: 'CardRadio',
+});
+export default reactWrapper;

package/dist/react/index.d.ts

@@ -8,22 +8,27 @@ export { default as Bullet } from './bullet';
 export { default as Button } from './button';
 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 Coachmark } from './coachmark';
 export { default as Chip } from './chip';
+export { default as Coachmark } from './coachmark';
 export { default as Divider } from './divider';
 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 Input } from './input';
 export { default as IconProvider } from './iconprovider';
+export { default as Input } from './input';
 export { default as InputChip } from './inputchip';
 export { default as Link } from './link';
 export { default as Linksimple } from './linksimple';
 export { default as List } from './list';
 export { default as ListItem } from './listitem';
 export { default as Marker } from './marker';
+export { default as MenuItem } from './menuitem';
 export { default as OptGroup } from './optgroup';
 export { default as Option } from './option';
 export { default as Popover } from './popover';

package/dist/react/index.js

@@ -8,22 +8,27 @@ export { default as Bullet } from './bullet';
 export { default as Button } from './button';
 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 Coachmark } from './coachmark';
 export { default as Chip } from './chip';
+export { default as Coachmark } from './coachmark';
 export { default as Divider } from './divider';
 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 Input } from './input';
 export { default as IconProvider } from './iconprovider';
+export { default as Input } from './input';
 export { default as InputChip } from './inputchip';
 export { default as Link } from './link';
 export { default as Linksimple } from './linksimple';
 export { default as List } from './list';
 export { default as ListItem } from './listitem';
 export { default as Marker } from './marker';
+export { default as MenuItem } from './menuitem';
 export { default as OptGroup } from './optgroup';
 export { default as Option } from './option';
 export { default as Popover } from './popover';

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

@@ -0,0 +1,27 @@
+import { type EventName } from '@lit/react';
+import Component from '../../components/menuitem';
+/**
+ * menuitem component is inherited by listitem component with the role set `menuitem`.<br/>
+ * A menu item can contain an icon on the leading or trailing side.
+ *
+ * The leading and trailing slots can be used to display controls and text.<br/>
+ * Based on the leading/trailing slot, the position of the controls and text can be adjusted.
+ *
+ * Please use mdc-menu as a parent element even when there is only menuitem for a11y purpose.
+ *
+ * @dependency mdc-text
+ *
+ * @tagname mdc-menuitem
+ *
+ * @event click - (React: onClick) This event is dispatched when the menuitem is clicked.
+ * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the menuitem.
+ * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the menuitem.
+ * @event focus - (React: onFocus) This event is dispatched when the menuitem receives focus.
+ */
+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/menuitem/index.js

@@ -0,0 +1,35 @@
+import * as React from 'react';
+import { createComponent } from '@lit/react';
+import Component from '../../components/menuitem';
+import { TAG_NAME } from '../../components/menuitem/menuitem.constants';
+/**
+ * menuitem component is inherited by listitem component with the role set `menuitem`.<br/>
+ * A menu item can contain an icon on the leading or trailing side.
+ *
+ * The leading and trailing slots can be used to display controls and text.<br/>
+ * Based on the leading/trailing slot, the position of the controls and text can be adjusted.
+ *
+ * Please use mdc-menu as a parent element even when there is only menuitem for a11y purpose.
+ *
+ * @dependency mdc-text
+ *
+ * @tagname mdc-menuitem
+ *
+ * @event click - (React: onClick) This event is dispatched when the menuitem is clicked.
+ * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the menuitem.
+ * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the menuitem.
+ * @event focus - (React: onFocus) This event is dispatched when the menuitem receives focus.
+ */
+const reactWrapper = createComponent({
+    tagName: TAG_NAME,
+    elementClass: Component,
+    react: React,
+    events: {
+        onClick: 'click',
+        onKeyDown: 'keydown',
+        onKeyUp: 'keyup',
+        onFocus: 'focus',
+    },
+    displayName: 'MenuItem',
+});
+export default reactWrapper;

package/dist/utils/mixins/CardComponentMixin.d.ts

@@ -0,0 +1,20 @@
+import { LitElement, TemplateResult } from 'lit';
+import type { CardOrientation, CardVariant } from '../../components/card/card.types';
+import type { TagName as TagNameType } from '../../components/text/text.types';
+import type { IconNames } from '../../components/icon/icon.types';
+import type { Constructor } from './index.types';
+export interface CardComponentMixinInterface {
+    cardTitle: string;
+    subtitle: string;
+    imageSrc: string;
+    imageAlt: string;
+    variant: CardVariant;
+    orientation: CardOrientation;
+    titleTagName: TagNameType;
+    subtitleTagName: TagNameType;
+    iconName?: IconNames;
+    renderIcon: () => TemplateResult;
+    renderImage: () => TemplateResult;
+    renderTitle: () => TemplateResult;
+}
+export declare const CardComponentMixin: <T extends Constructor<LitElement>>(superClass: T) => Constructor<CardComponentMixinInterface> & T;