@momentum-design/components 0.66.1 → 0.66.3

package/dist/react/index.d.ts

@@ -7,12 +7,12 @@ 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 TabList } from './tablist';
-export { default as StaticToggle } from './statictoggle';
-export { default as Textarea } from './textarea';
 export { default as Text } from './text';
+export { default as Textarea } from './textarea';
 export { default as ThemeProvider } from './themeprovider';
 export { default as Toggle } from './toggle';
 export { default as ToggleTip } from './toggletip';

package/dist/react/index.js

@@ -7,12 +7,12 @@ 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 TabList } from './tablist';
-export { default as StaticToggle } from './statictoggle';
-export { default as Textarea } from './textarea';
 export { default as Text } from './text';
+export { default as Textarea } from './textarea';
 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/mixins/ButtonComponentMixin.d.ts

@@ -2,15 +2,15 @@ import type { ButtonColor, ButtonTypeInternal, ButtonVariant, IconButtonSize, Pi
 import type { IconNames } from '../../components/icon/icon.types';
 import type { Component } from '../../models';
 import type { Constructor } from './index.types';
-export interface ButtonComponentMixinInterface {
+export declare class ButtonComponentMixinInterface {
     prefixIcon?: IconNames;
     postfixIcon?: IconNames;
     variant: ButtonVariant;
     color: ButtonColor;
-    typeInternal: ButtonTypeInternal;
-    setSize(size: PillButtonSize | IconButtonSize): void;
-    setVariant(variant: ButtonVariant): void;
-    setColor(color: ButtonColor): void;
-    inferButtonType(): void;
+    protected typeInternal: ButtonTypeInternal;
+    protected setSize(size: PillButtonSize | IconButtonSize): void;
+    protected setVariant(variant: ButtonVariant): void;
+    protected setColor(color: ButtonColor): void;
+    protected inferButtonType(): void;
 }
 export declare const ButtonComponentMixin: <T extends Constructor<Component>>(superClass: T) => Constructor<ButtonComponentMixinInterface> & T;

package/dist/utils/mixins/ButtonComponentMixin.js

@@ -7,6 +7,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 var __metadata = (this && this.__metadata) || function (k, v) {
     if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
 };
+/* eslint-disable max-classes-per-file */
 import { property, state } from 'lit/decorators.js';
 import { BUTTON_COLORS, BUTTON_TYPE_INTERNAL, BUTTON_VARIANTS, DEFAULTS, ICON_BUTTON_SIZES, PILL_BUTTON_SIZES } from '../../components/button/button.constants';
 export const ButtonComponentMixin = (superClass) => {

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

@@ -3,7 +3,7 @@ import type { CardOrientation, CardVariant } from '../../components/card/card.ty
 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 {
+export declare class CardComponentMixinInterface {
     cardTitle: string;
     subtitle: string;
     imageSrc: string;
@@ -13,8 +13,8 @@ export interface CardComponentMixinInterface {
     titleTagName: TagNameType;
     subtitleTagName: TagNameType;
     iconName?: IconNames;
-    renderIcon: () => TemplateResult;
-    renderImage: () => TemplateResult;
-    renderTitle: () => TemplateResult;
+    protected renderIcon: () => TemplateResult;
+    protected renderImage: () => TemplateResult;
+    protected renderTitle: () => TemplateResult;
 }
 export declare const CardComponentMixin: <T extends Constructor<LitElement>>(superClass: T) => Constructor<CardComponentMixinInterface> & T;

package/dist/utils/mixins/CardComponentMixin.js

@@ -7,6 +7,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 var __metadata = (this && this.__metadata) || function (k, v) {
     if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
 };
+/* eslint-disable max-classes-per-file */
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import { DEFAULTS } from '../../components/card/card.constants';
@@ -15,9 +16,9 @@ export const CardComponentMixin = (superClass) => {
         constructor() {
             super(...arguments);
             /**
-           * The title of the card - part of header section
-           * @default ''
-           */
+             * The title of the card - part of header section
+             * @default ''
+             */
             this.cardTitle = '';
             /**
              * The subtitle of the card - part of header section
@@ -56,37 +57,42 @@ export const CardComponentMixin = (superClass) => {
             this.subtitleTagName = DEFAULTS.TAGNAME;
         }
         /**
-      * Renders the image on the card if image source is provided
-      * @returns The image element
-      */
+         * Renders the image on the card if image source is provided
+         * @returns The image element
+         */
         renderImage() {
             if (!this.imageSrc) {
                 return nothing;
             }
-            return html `<img part="image" src="${this.imageSrc}" alt="${this.imageAlt}"/>`;
+            return html `<img part="image" src="${this.imageSrc}" alt="${this.imageAlt}" />`;
         }
         /**
-       * Renders the icon on the card if icon name is provided
-       * @returns The icon element
-       */
+         * Renders the icon on the card if icon name is provided
+         * @returns The icon element
+         */
         renderIcon() {
-            return this.iconName ? html `<mdc-icon part="icon"
-       size="${DEFAULTS.ICON_SIZE}" 
-       length-unit="${DEFAULTS.ICON_LENGTH_UNIT}" 
-       name="${this.iconName}"></mdc-icon>`
+            return this.iconName
+                ? html `<mdc-icon
+            part="icon"
+            size="${DEFAULTS.ICON_SIZE}"
+            length-unit="${DEFAULTS.ICON_LENGTH_UNIT}"
+            name="${this.iconName}"
+          ></mdc-icon>`
                 : nothing;
         }
         /**
-       * Renders the title and subtitle on the card
-       * @returns The title and subtitle elements
-       */
+         * Renders the title and subtitle on the card
+         * @returns The title and subtitle elements
+         */
         renderTitle() {
             return html `<div part="title-container">
         <mdc-text part="title" type="${DEFAULTS.TITLE_TYPE}" tagname="${this.titleTagName}">${this.cardTitle}</mdc-text>
-        ${this.subtitle ? html `<mdc-text part="subtitle"
-            type="${DEFAULTS.SUBTITLE_TYPE}" 
-            tagname="${this.subtitleTagName}">${this.subtitle}</mdc-text>` : nothing}
-        </div>`;
+        ${this.subtitle
+                ? html `<mdc-text part="subtitle" type="${DEFAULTS.SUBTITLE_TYPE}" tagname="${this.subtitleTagName}"
+              >${this.subtitle}</mdc-text
+            >`
+                : nothing}
+      </div>`;
         }
     }
     __decorate([

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

@@ -1,5 +1,5 @@
 import type { Constructor } from './index.types';
-export interface FocusTrapClassInterface {
+export declare class FocusTrapClassInterface {
     enabledFocusTrap: boolean;
     enabledPreventScroll: boolean;
     setFocusableElements(): void;

package/dist/utils/mixins/FocusTrapMixin.js

@@ -7,6 +7,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 var __metadata = (this && this.__metadata) || function (k, v) {
     if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
 };
+/* eslint-disable max-classes-per-file */
 import { property } from 'lit/decorators.js';
 import { DEFAULTS as POPOVER_DEFAULTS } from '../../components/popover/popover.constants';
 export const FocusTrapMixin = (superClass) => {

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

@@ -22,15 +22,15 @@ export interface AssociatedFormControl {
     formResetCallback(): void;
     formStateRestoreCallback(state: string | FormData | File, mode: 'restore' | 'autocomplete'): void;
 }
-export interface FormInternalsMixinInterface {
+export declare class FormInternalsMixinInterface {
     name: string;
     value: string;
     form: HTMLFormElement | null;
     validity: ValidityState;
     validationMessage: string;
     willValidate: boolean;
-    internals: ElementInternals;
-    inputElement: HTMLInputElement | HTMLTextAreaElement;
+    protected internals: ElementInternals;
+    protected inputElement: HTMLInputElement | HTMLTextAreaElement;
     setValidity(): void;
     checkValidity(): boolean;
     reportValidity(): boolean;

package/dist/utils/mixins/FormInternalsMixin.js

@@ -14,15 +14,15 @@ export const FormInternalsMixin = (superClass) => {
         constructor() {
             super(...arguments);
             /**
-         * Indicates the name of the component group.
-         * They are used to group elements in a form together.
-         * @default ''
-         */
+             * Indicates the name of the component group.
+             * They are used to group elements in a form together.
+             * @default ''
+             */
             this.name = '';
             /**
-         * Indicates the value of the component group (ex: input, checkbox, radio, select etc...)
-         * @default ''
-         */
+             * Indicates the value of the component group (ex: input, checkbox, radio, select etc...)
+             * @default ''
+             */
             this.value = '';
             /** @internal */
             this.internals = this.attachInternals();
@@ -43,9 +43,9 @@ export const FormInternalsMixin = (superClass) => {
             this.id = `mdc-input-${uuidv4()}`;
         }
         /**
-       * Sets the validity of the input field based on the input field's validity.
-       * @returns void
-       */
+         * Sets the validity of the input field based on the input field's validity.
+         * @returns void
+         */
         setValidity() {
             if (this.inputElement) {
                 this.internals.setValidity(this.inputElement.validity, this.inputElement.validationMessage, this.inputElement);

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.3"
 }