@momentum-design/components 0.66.1 → 0.66.2

package/dist/react/index.d.ts

@@ -1,18 +1,18 @@
-export { default as AlertChip } from './alertchip';
 export { default as Appheader } from './appheader';
 export { default as Avatar } from './avatar';
+export { default as AlertChip } from './alertchip';
 export { default as AvatarButton } from './avatarbutton';
 export { default as Badge } from './badge';
 export { default as Brandvisual } from './brandvisual';
 export { default as Bullet } from './bullet';
 export { default as Button } from './button';
 export { default as ButtonLink } from './buttonlink';
-export { default as Card } from './card';
 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 CardButton } from './cardbutton';
 export { default as Chip } from './chip';
 export { default as Coachmark } from './coachmark';
 export { default as Divider } from './divider';
@@ -31,23 +31,23 @@ 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 Presence } from './presence';
 export { default as Popover } from './popover';
+export { default as Presence } from './presence';
 export { default as Progressbar } from './progressbar';
+export { default as Progressspinner } from './progressspinner';
 export { default as Radio } from './radio';
 export { default as RadioGroup } from './radiogroup';
-export { default as Progressspinner } from './progressspinner';
 export { default as ScreenreaderAnnouncer } from './screenreaderannouncer';
 export { default as Searchfield } from './searchfield';
 export { default as Select } from './select';
 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 Tab } from './tab';
+export { default as Text } from './text';
 export { default as TabList } from './tablist';
-export { default as StaticToggle } from './statictoggle';
 export { default as Textarea } from './textarea';
-export { default as Text } from './text';
 export { default as ThemeProvider } from './themeprovider';
 export { default as Toggle } from './toggle';
 export { default as ToggleTip } from './toggletip';

package/dist/react/index.js

@@ -1,18 +1,18 @@
-export { default as AlertChip } from './alertchip';
 export { default as Appheader } from './appheader';
 export { default as Avatar } from './avatar';
+export { default as AlertChip } from './alertchip';
 export { default as AvatarButton } from './avatarbutton';
 export { default as Badge } from './badge';
 export { default as Brandvisual } from './brandvisual';
 export { default as Bullet } from './bullet';
 export { default as Button } from './button';
 export { default as ButtonLink } from './buttonlink';
-export { default as Card } from './card';
 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 CardButton } from './cardbutton';
 export { default as Chip } from './chip';
 export { default as Coachmark } from './coachmark';
 export { default as Divider } from './divider';
@@ -31,23 +31,23 @@ 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 Presence } from './presence';
 export { default as Popover } from './popover';
+export { default as Presence } from './presence';
 export { default as Progressbar } from './progressbar';
+export { default as Progressspinner } from './progressspinner';
 export { default as Radio } from './radio';
 export { default as RadioGroup } from './radiogroup';
-export { default as Progressspinner } from './progressspinner';
 export { default as ScreenreaderAnnouncer } from './screenreaderannouncer';
 export { default as Searchfield } from './searchfield';
 export { default as Select } from './select';
 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 Tab } from './tab';
+export { default as Text } from './text';
 export { default as TabList } from './tablist';
-export { default as StaticToggle } from './statictoggle';
 export { default as Textarea } from './textarea';
-export { default as Text } from './text';
 export { default as ThemeProvider } from './themeprovider';
 export { default as Toggle } from './toggle';
 export { default as ToggleTip } from './toggletip';

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

@@ -11,6 +11,11 @@ import Component from '../../components/listitem';
  * Based on the leading/trailing slot, the position of the controls and text can be adjusted. <br/>
  * Please use mdc-list as a parent element even when there is only listitem for a11y purpose.
  *
+ * By providing the tooltip-text attribute, a tooltip will be displayed on hover of the listitem.
+ * The placement of the tooltip can be adjusted using the tooltip-placement attribute.
+ * This will be helpful when the listitem text is truncated or
+ * when you want to display additional information about the listitem.
+ *
  * @tagname mdc-listitem
  *
  * @dependency mdc-text
@@ -32,6 +37,7 @@ 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.
  *
  * @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

@@ -13,6 +13,11 @@ import { TAG_NAME } from '../../components/listitem/listitem.constants';
  * Based on the leading/trailing slot, the position of the controls and text can be adjusted. <br/>
  * Please use mdc-list as a parent element even when there is only listitem for a11y purpose.
  *
+ * By providing the tooltip-text attribute, a tooltip will be displayed on hover of the listitem.
+ * The placement of the tooltip can be adjusted using the tooltip-placement attribute.
+ * This will be helpful when the listitem text is truncated or
+ * when you want to display additional information about the listitem.
+ *
  * @tagname mdc-listitem
  *
  * @dependency mdc-text
@@ -34,6 +39,7 @@ 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.
  *
  * @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/option/index.d.ts

@@ -3,6 +3,8 @@ import Component from '../../components/option';
 /**
  * option component, which is used as a list item in a select component.<br/>
  * We can pass an icon which will be displayed in leading position of the option label text.
+ * We can pass a tooltip which will be displayed on hover of the option label text.
+ * The tooltip will be helpful for a long label text which is truncated with ellipsis.
  *
  * @dependency mdc-icon
  * @dependency mdc-text

package/dist/react/option/index.js

@@ -5,6 +5,8 @@ import { TAG_NAME } from '../../components/option/option.constants';
 /**
  * option component, which is used as a list item in a select component.<br/>
  * We can pass an icon which will be displayed in leading position of the option label text.
+ * We can pass a tooltip which will be displayed on hover of the option label text.
+ * The tooltip will be helpful for a long label text which is truncated with ellipsis.
  *
  * @dependency mdc-icon
  * @dependency mdc-text

package/dist/utils/roles.d.ts

@@ -0,0 +1,17 @@
+import type { ValueOf } from './types';
+declare const ROLE: {
+    readonly BUTTON: "button";
+    readonly CHECKBOX: "checkbox";
+    readonly GROUP: "group";
+    readonly LIST: "list";
+    readonly LISTITEM: "listitem";
+    readonly MENU: "menu";
+    readonly MENUBAR: "menubar";
+    readonly MENUITEM: "menuitem";
+    readonly MENUITEMCHECKBOX: "menuitemcheckbox";
+    readonly MENUITEMRADIO: "menuitemradio";
+    readonly RADIOGROUP: "radiogroup";
+    readonly TOOLTIP: "tooltip";
+};
+type RoleType = ValueOf<typeof ROLE>;
+export { ROLE, RoleType };

package/dist/utils/roles.js

@@ -0,0 +1,16 @@
+// When adding a new role in this list, please sort this list.
+const ROLE = {
+    BUTTON: 'button',
+    CHECKBOX: 'checkbox',
+    GROUP: 'group',
+    LIST: 'list',
+    LISTITEM: 'listitem',
+    MENU: 'menu',
+    MENUBAR: 'menubar',
+    MENUITEM: 'menuitem',
+    MENUITEMCHECKBOX: 'menuitemcheckbox',
+    MENUITEMRADIO: 'menuitemradio',
+    RADIOGROUP: 'radiogroup',
+    TOOLTIP: 'tooltip',
+};
+export { ROLE };

package/package.json

@@ -39,5 +39,5 @@
     "lit": "^3.2.0",
     "uuid": "^11.0.5"
   },
-  "version": "0.66.1"
+  "version": "0.66.2"
 }