@momentum-design/components 0.106.7 → 0.107.0

package/dist/index.d.ts

@@ -57,6 +57,7 @@ import SelectListbox from './components/selectlistbox';
 import SideNavigation from './components/sidenavigation';
 import Skeleton from './components/skeleton';
 import Spinner from './components/spinner';
+import StaticChip from './components/staticchip';
 import StaticCheckbox from './components/staticcheckbox';
 import StaticRadio from './components/staticradio';
 import StaticToggle from './components/statictoggle';
@@ -92,6 +93,6 @@ import type { VirtualizedListScrollEvent } from './components/virtualizedlist/vi
 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, Typewriter, ToggleTip, Tooltip, VirtualizedList, Combobox, Slider, ListBox, };
+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, StaticChip, StaticCheckbox, StaticRadio, StaticToggle, Stepper, StepperConnector, StepperItem, Tab, TabList, Text, Textarea, ThemeProvider, Toast, Toggle, Typewriter, ToggleTip, Tooltip, VirtualizedList, Combobox, Slider, ListBox, };
 export type { BadgeType, ButtonColor, ButtonVariant, IconButtonSize, MenuPopoverActionEvent, MenuPopoverChangeEvent, MenuSectionChangeEvent, PillButtonSize, PopoverPlacement, SkeletonVariant, SelectChangeEvent, SelectInputEvent, SpinnerSize, SpinnerVariant, TextType, TypewriterType, InputInputEvent, InputChangeEvent, InputFocusEvent, InputBlurEvent, InputClearEvent, VirtualizedListScrollEvent, };
 export { BUTTON_COLORS, BUTTON_VARIANTS, ICON_BUTTON_SIZES, inMemoryCache, PILL_BUTTON_SIZES, SKELETON_VARIANTS, webAPIIconsCache, };

package/dist/index.js

@@ -59,6 +59,7 @@ import SelectListbox from './components/selectlistbox';
 import SideNavigation from './components/sidenavigation';
 import Skeleton from './components/skeleton';
 import Spinner from './components/spinner';
+import StaticChip from './components/staticchip';
 import StaticCheckbox from './components/staticcheckbox';
 import StaticRadio from './components/staticradio';
 import StaticToggle from './components/statictoggle';
@@ -84,6 +85,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, Typewriter, ToggleTip, Tooltip, VirtualizedList, Combobox, Slider, ListBox, };
+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, StaticChip, StaticCheckbox, StaticRadio, StaticToggle, Stepper, StepperConnector, StepperItem, Tab, TabList, Text, Textarea, ThemeProvider, Toast, Toggle, Typewriter, ToggleTip, Tooltip, VirtualizedList, Combobox, Slider, ListBox, };
 // Constants / Utils Exports
 export { BUTTON_COLORS, BUTTON_VARIANTS, ICON_BUTTON_SIZES, inMemoryCache, PILL_BUTTON_SIZES, SKELETON_VARIANTS, webAPIIconsCache, };

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

@@ -20,6 +20,11 @@ import Component from '../../components/alertchip';
  *
  * @csspart icon - The alert icon
  * @csspart label - The text label of the alertchip
+ *
+ * @event click - (React: onClick) This event is dispatched when the chip is clicked.
+ * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the chip.
+ * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the chip.
+ * @event focus - (React: onFocus) This event is dispatched when the chip receives focus.
  */
 declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {
     onClick: EventName<import("../../utils/types").OverrideEventTarget<MouseEvent, import("../../components/buttonsimple/buttonsimple.component").default>>;

package/dist/react/alertchip/index.js

@@ -22,6 +22,11 @@ import { TAG_NAME } from '../../components/alertchip/alertchip.constants';
  *
  * @csspart icon - The alert icon
  * @csspart label - The text label of the alertchip
+ *
+ * @event click - (React: onClick) This event is dispatched when the chip is clicked.
+ * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the chip.
+ * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the chip.
+ * @event focus - (React: onFocus) This event is dispatched when the chip receives focus.
  */
 const reactWrapper = createComponent({
     tagName: TAG_NAME,

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

@@ -19,6 +19,13 @@ import Component from '../../components/chip';
  * @cssproperty --mdc-chip-border-color - The border color of the chip.
  * @cssproperty --mdc-chip-background-color - The background color of the chip.
  *
+ * @csspart label - The label part of the chip.
+ *
+ * @event click - (React: onClick) This event is dispatched when the chip is clicked.
+ * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the chip.
+ * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the chip.
+ * @event focus - (React: onFocus) This event is dispatched when the chip receives focus.
+ *
  */
 declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {
     onClick: EventName<import("../../utils/types").OverrideEventTarget<MouseEvent, import("../../components/buttonsimple/buttonsimple.component").default>>;

package/dist/react/chip/index.js

@@ -21,6 +21,13 @@ import { TAG_NAME } from '../../components/chip/chip.constants';
  * @cssproperty --mdc-chip-border-color - The border color of the chip.
  * @cssproperty --mdc-chip-background-color - The background color of the chip.
  *
+ * @csspart label - The label part of the chip.
+ *
+ * @event click - (React: onClick) This event is dispatched when the chip is clicked.
+ * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the chip.
+ * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the chip.
+ * @event focus - (React: onFocus) This event is dispatched when the chip receives focus.
+ *
  */
 const reactWrapper = createComponent({
     tagName: TAG_NAME,

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

@@ -8,6 +8,19 @@ import Component from '../../components/filterchip';
  *
  * @tagname mdc-filterchip
  *
+ * @dependency mdc-icon
+ * @dependency mdc-text
+ *
+ * @csspart label - The label part of the chip.
+ *
+ * @cssproperty --mdc-chip-color - The color of the chip.
+ * @cssproperty --mdc-chip-border-color - The border color of the chip.
+ * @cssproperty --mdc-chip-background-color - The background color of the chip.
+ *
+ * @event click - (React: onClick) This event is dispatched when the chip is clicked.
+ * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the chip.
+ * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the chip.
+ * @event focus - (React: onFocus) This event is dispatched when the chip receives focus.
  */
 declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {
     onClick: EventName<import("../../utils/types").OverrideEventTarget<MouseEvent, import("../../components/buttonsimple/buttonsimple.component").default>>;

package/dist/react/filterchip/index.js

@@ -10,6 +10,19 @@ import { TAG_NAME } from '../../components/filterchip/filterchip.constants';
  *
  * @tagname mdc-filterchip
  *
+ * @dependency mdc-icon
+ * @dependency mdc-text
+ *
+ * @csspart label - The label part of the chip.
+ *
+ * @cssproperty --mdc-chip-color - The color of the chip.
+ * @cssproperty --mdc-chip-border-color - The border color of the chip.
+ * @cssproperty --mdc-chip-background-color - The background color of the chip.
+ *
+ * @event click - (React: onClick) This event is dispatched when the chip is clicked.
+ * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the chip.
+ * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the chip.
+ * @event focus - (React: onFocus) This event is dispatched when the chip receives focus.
  */
 const reactWrapper = createComponent({
     tagName: TAG_NAME,

package/dist/react/index.d.ts

@@ -39,8 +39,8 @@ 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 MenuItemCheckbox } from './menuitemcheckbox';
 export { default as MenuItem } from './menuitem';
+export { default as MenuItemCheckbox } from './menuitemcheckbox';
 export { default as MenuItemRadio } from './menuitemradio';
 export { default as MenuPopover } from './menupopover';
 export { default as MenuSection } from './menusection';
@@ -63,6 +63,7 @@ export { default as Skeleton } from './skeleton';
 export { default as Slider } from './slider';
 export { default as Spinner } from './spinner';
 export { default as StaticCheckbox } from './staticcheckbox';
+export { default as StaticChip } from './staticchip';
 export { default as StaticRadio } from './staticradio';
 export { default as StaticToggle } from './statictoggle';
 export { default as Stepper } from './stepper';

package/dist/react/index.js

@@ -39,8 +39,8 @@ 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 MenuItemCheckbox } from './menuitemcheckbox';
 export { default as MenuItem } from './menuitem';
+export { default as MenuItemCheckbox } from './menuitemcheckbox';
 export { default as MenuItemRadio } from './menuitemradio';
 export { default as MenuPopover } from './menupopover';
 export { default as MenuSection } from './menusection';
@@ -63,6 +63,7 @@ export { default as Skeleton } from './skeleton';
 export { default as Slider } from './slider';
 export { default as Spinner } from './spinner';
 export { default as StaticCheckbox } from './staticcheckbox';
+export { default as StaticChip } from './staticchip';
 export { default as StaticRadio } from './staticradio';
 export { default as StaticToggle } from './statictoggle';
 export { default as Stepper } from './stepper';

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

@@ -15,6 +15,10 @@ import Component from '../../components/inputchip';
  *
  * @event remove - This event is dispatched when the close button is activated. It bubbles and is composed.
  *
+ * @csspart label - The label part of the chip.
+ * @csspart icon - The icon part of the chip.
+ * @csspart close-icon - The close icon part of the chip.
+ *
  * @cssproperty --mdc-chip-color - The color of the chip.
  * @cssproperty --mdc-chip-border-color - The border color of the chip.
  * @cssproperty --mdc-chip-background-color - The background color of the chip.

package/dist/react/inputchip/index.js

@@ -17,6 +17,10 @@ import { TAG_NAME } from '../../components/inputchip/inputchip.constants';
  *
  * @event remove - This event is dispatched when the close button is activated. It bubbles and is composed.
  *
+ * @csspart label - The label part of the chip.
+ * @csspart icon - The icon part of the chip.
+ * @csspart close-icon - The close icon part of the chip.
+ *
  * @cssproperty --mdc-chip-color - The color of the chip.
  * @cssproperty --mdc-chip-border-color - The border color of the chip.
  * @cssproperty --mdc-chip-background-color - The background color of the chip.

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

@@ -0,0 +1,20 @@
+import Component from '../../components/staticchip';
+/**
+ * mdc-staticchip is an static element that can be used to represent a chip. It supports a leading icon along with label.
+ *
+ * It is recommended to keep the label text for the chip component concise and compact.
+ * For best results, we recommend limiting the <b>maximum length of the label text to 20 characters</b>, including empty spaces to split words.
+ *
+ *
+ * @tagname mdc-staticchip
+ *
+ * @dependency mdc-icon
+ * @dependency mdc-text
+ *
+ * @cssproperty --mdc-chip-color - The color of the static chip.
+ * @cssproperty --mdc-chip-border-color - The border color of the static chip.
+ * @cssproperty --mdc-chip-background-color - The background color of the static chip.
+ *
+ */
+declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {}>;
+export default reactWrapper;

package/dist/react/staticchip/index.js

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import { createComponent } from '@lit/react';
+import Component from '../../components/staticchip';
+import { TAG_NAME } from '../../components/staticchip/staticchip.constants';
+/**
+ * mdc-staticchip is an static element that can be used to represent a chip. It supports a leading icon along with label.
+ *
+ * It is recommended to keep the label text for the chip component concise and compact.
+ * For best results, we recommend limiting the <b>maximum length of the label text to 20 characters</b>, including empty spaces to split words.
+ *
+ *
+ * @tagname mdc-staticchip
+ *
+ * @dependency mdc-icon
+ * @dependency mdc-text
+ *
+ * @cssproperty --mdc-chip-color - The color of the static chip.
+ * @cssproperty --mdc-chip-border-color - The border color of the static chip.
+ * @cssproperty --mdc-chip-background-color - The background color of the static chip.
+ *
+ */
+const reactWrapper = createComponent({
+    tagName: TAG_NAME,
+    elementClass: Component,
+    react: React,
+    events: {},
+    displayName: 'StaticChip',
+});
+export default reactWrapper;

package/package.json

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