@momentum-design/components 0.95.0 → 0.95.2

package/dist/react/index.d.ts

@@ -1,5 +1,5 @@
-export { default as AlertChip } from './alertchip';
 export { default as Animation } from './animation';
+export { default as AlertChip } from './alertchip';
 export { default as Appheader } from './appheader';
 export { default as Avatar } from './avatar';
 export { default as AvatarButton } from './avatarbutton';
@@ -13,17 +13,17 @@ 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 Checkbox } from './checkbox';
 export { default as CardRadio } from './cardradio';
+export { default as Checkbox } from './checkbox';
+export { default as Chip } from './chip';
 export { default as Coachmark } from './coachmark';
 export { default as Dialog } from './dialog';
-export { default as Chip } from './chip';
 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 IconProvider } from './iconprovider';
+export { default as Icon } from './icon';
 export { default as Input } from './input';
 export { default as InputChip } from './inputchip';
 export { default as Link } from './link';

package/dist/react/index.js

@@ -1,5 +1,5 @@
-export { default as AlertChip } from './alertchip';
 export { default as Animation } from './animation';
+export { default as AlertChip } from './alertchip';
 export { default as Appheader } from './appheader';
 export { default as Avatar } from './avatar';
 export { default as AvatarButton } from './avatarbutton';
@@ -13,17 +13,17 @@ 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 Checkbox } from './checkbox';
 export { default as CardRadio } from './cardradio';
+export { default as Checkbox } from './checkbox';
+export { default as Chip } from './chip';
 export { default as Coachmark } from './coachmark';
 export { default as Dialog } from './dialog';
-export { default as Chip } from './chip';
 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 IconProvider } from './iconprovider';
+export { default as Icon } from './icon';
 export { default as Input } from './input';
 export { default as InputChip } from './inputchip';
 export { default as Link } from './link';

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

@@ -1,9 +1,17 @@
 import { type EventName } from '@lit/react';
 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.
+ * Option component, which is used within Selectlistbox within Select component.
+ *
+ * The label and secondary label of the option can be set using the `label` and `secondaryLabel` properties respectively.
+ * The `label` is the primary text displayed in the option, while the `secondaryLabel` is the secondary text displayed below the primary label.
+ *
+ * The `selected` property is used to indicate whether the option is selected or not.
+ * When the `selected` property is set to true, a checkmark icon will be displayed
+ * on the right side of the option to indicate that it is selected.
+ *
+ * The `prefixIcon` property can be used to display an icon on the left side of the option label.
+ * We can show a tooltip by setting `tooltip-text` attribute. This will be displayed on hover or focus of the option.
  * The tooltip will be helpful for a long label text which is truncated with ellipsis.
  *
  * @dependency mdc-icon
@@ -12,8 +20,6 @@ import Component from '../../components/option';
  *
  * @tagname mdc-option
  *
- * @slot default - This is a default/unnamed slot
- *
  * @event click - (React: onClick) This event is dispatched when the option is clicked.
  * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the option.
  * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the option.

package/dist/react/option/index.js

@@ -3,9 +3,17 @@ import { createComponent } from '@lit/react';
 import Component from '../../components/option';
 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.
+ * Option component, which is used within Selectlistbox within Select component.
+ *
+ * The label and secondary label of the option can be set using the `label` and `secondaryLabel` properties respectively.
+ * The `label` is the primary text displayed in the option, while the `secondaryLabel` is the secondary text displayed below the primary label.
+ *
+ * The `selected` property is used to indicate whether the option is selected or not.
+ * When the `selected` property is set to true, a checkmark icon will be displayed
+ * on the right side of the option to indicate that it is selected.
+ *
+ * The `prefixIcon` property can be used to display an icon on the left side of the option label.
+ * We can show a tooltip by setting `tooltip-text` attribute. This will be displayed on hover or focus of the option.
  * The tooltip will be helpful for a long label text which is truncated with ellipsis.
  *
  * @dependency mdc-icon
@@ -14,8 +22,6 @@ import { TAG_NAME } from '../../components/option/option.constants';
  *
  * @tagname mdc-option
  *
- * @slot default - This is a default/unnamed slot
- *
  * @event click - (React: onClick) This event is dispatched when the option is clicked.
  * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the option.
  * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the option.

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

@@ -6,6 +6,8 @@ import Component from '../../components/select';
  * The component ensures accessibility and usability while handling various use cases,
  * including long text truncation with tooltip support.
  *
+ * Every mdc-option should have a `value` attribute set to ensure proper form submission.
+ *
  * To set a default option, use the `selected` attribute on the `mdc-option` element.
  *
  * **Note:** Make sure to add `mdc-selectlistbox` as a child of `mdc-select` and wrap options/optgroup in it to ensure proper accessibility functionality. Read more about it in SelectListBox documentation.
@@ -18,7 +20,7 @@ import Component from '../../components/select';
  *
  * @tagname mdc-select
  *
- * @slot default - This is a default/unnamed slot for options and/or option group.
+ * @slot default - This is a default/unnamed slot for Selectlistbox including options and/or option group.
  *
  * @event click - (React: onClick) This event is dispatched when the select is clicked.
  * @event change - (React: onChange) This event is dispatched when the select is changed.
@@ -27,8 +29,12 @@ import Component from '../../components/select';
  * @event focus - (React: onFocus) This event is dispatched when the select receives focus.
  */
 declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {
-    onChange: EventName<Event>;
-    onInput: EventName<Event>;
+    onChange: EventName<import("../../utils/types").TypedEvent<Component, {
+        value: string;
+    }>>;
+    onInput: EventName<import("../../utils/types").TypedEvent<Component, {
+        value: string;
+    }>>;
     onClick: EventName<MouseEvent>;
     onKeyDown: EventName<KeyboardEvent>;
     onFocus: EventName<FocusEvent>;

package/dist/react/select/index.js

@@ -8,6 +8,8 @@ import { TAG_NAME } from '../../components/select/select.constants';
  * The component ensures accessibility and usability while handling various use cases,
  * including long text truncation with tooltip support.
  *
+ * Every mdc-option should have a `value` attribute set to ensure proper form submission.
+ *
  * To set a default option, use the `selected` attribute on the `mdc-option` element.
  *
  * **Note:** Make sure to add `mdc-selectlistbox` as a child of `mdc-select` and wrap options/optgroup in it to ensure proper accessibility functionality. Read more about it in SelectListBox documentation.
@@ -20,7 +22,7 @@ import { TAG_NAME } from '../../components/select/select.constants';
  *
  * @tagname mdc-select
  *
- * @slot default - This is a default/unnamed slot for options and/or option group.
+ * @slot default - This is a default/unnamed slot for Selectlistbox including options and/or option group.
  *
  * @event click - (React: onClick) This event is dispatched when the select is clicked.
  * @event change - (React: onChange) This event is dispatched when the select is changed.

package/dist/utils/mixins/CardComponentMixin.js

@@ -46,12 +46,12 @@ export const CardComponentMixin = (superClass) => {
              */
             this.orientation = DEFAULTS.ORIENTATION;
             /**
-             * The tag name for the card title. It supports all the types that `msc-text` supports
+             * The tag name for the card title. It supports all the types that `mdc-text` supports
              * @default 'span'
              */
             this.titleTagName = DEFAULTS.TAGNAME;
             /**
-             * The tag name for the subtitle. It supports all the types that `msc-text` supports
+             * The tag name for the subtitle. It supports all the types that `mdc-text` supports
              * @default 'span'
              */
             this.subtitleTagName = DEFAULTS.TAGNAME;

package/dist/utils/mixins/{CardAndDialogFooterMixin.d.ts → FooterMixin.d.ts}

@@ -1,6 +1,6 @@
 import { LitElement, TemplateResult } from 'lit';
 import type { Constructor } from './index.types';
-export declare class CardAndDialogFooterMixinInterface {
+export declare class FooterMixinInterface {
     protected footerLink?: Array<HTMLElement>;
     protected footerButtonPrimary?: Array<HTMLElement>;
     protected footerButtonSecondary?: Array<HTMLElement>;
@@ -8,4 +8,4 @@ export declare class CardAndDialogFooterMixinInterface {
     protected handleFooterSlot(tagname: string, variant?: string): void;
     protected renderFooter(): TemplateResult;
 }
-export declare const CardAndDialogFooterMixin: <T extends Constructor<LitElement>>(superClass: T) => Constructor<CardAndDialogFooterMixinInterface> & T;
+export declare const FooterMixin: <T extends Constructor<LitElement>>(superClass: T) => Constructor<FooterMixinInterface> & T;

package/dist/utils/mixins/{CardAndDialogFooterMixin.js → FooterMixin.js}

@@ -12,7 +12,7 @@ import { html } from 'lit';
 import { queryAssignedElements } from 'lit/decorators.js';
 import { DEFAULTS, VARIANTS } from '../../components/card/card.constants';
 import { BUTTON_COLORS, BUTTON_VARIANTS } from '../../components/button/button.constants';
-export const CardAndDialogFooterMixin = (superClass) => {
+export const FooterMixin = (superClass) => {
     class InnerMixinClass extends superClass {
         /**
          * Updates the color of the footer buttons based on the variant.

package/package.json

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