@momentum-design/components 0.66.0 → 0.66.2

package/dist/react/index.d.ts

@@ -1,7 +1,7 @@
 export { default as Appheader } from './appheader';
 export { default as Avatar } from './avatar';
-export { default as AvatarButton } from './avatarbutton';
 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';
@@ -45,8 +45,8 @@ 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 TabList } from './tablist';
 export { default as Text } from './text';
+export { default as TabList } from './tablist';
 export { default as Textarea } from './textarea';
 export { default as ThemeProvider } from './themeprovider';
 export { default as Toggle } from './toggle';

package/dist/react/index.js

@@ -1,7 +1,7 @@
 export { default as Appheader } from './appheader';
 export { default as Avatar } from './avatar';
-export { default as AvatarButton } from './avatarbutton';
 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';
@@ -45,8 +45,8 @@ 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 TabList } from './tablist';
 export { default as Text } from './text';
+export { default as TabList } from './tablist';
 export { default as Textarea } from './textarea';
 export { default as ThemeProvider } from './themeprovider';
 export { default as Toggle } from './toggle';

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.0"
+  "version": "0.66.2"
 }