@momentum-design/components 0.86.0 → 0.87.1

package/dist/index.d.ts

@@ -39,6 +39,7 @@ import NavItem from './components/navitem';
 import NavItemList from './components/navitemlist';
 import OptGroup from './components/optgroup';
 import Option from './components/option';
+import Password from './components/password';
 import Popover from './components/popover';
 import Presence from './components/presence';
 import Progressbar from './components/progressbar';
@@ -74,6 +75,6 @@ import type { MenuSectionChangeEvent } from './components/menusection/menusectio
 import { inMemoryCache, webAPIIconsCache } from './utils/icon-cache';
 import { BUTTON_COLORS, BUTTON_VARIANTS, ICON_BUTTON_SIZES, PILL_BUTTON_SIZES } from './components/button/button.constants';
 import { SKELETON_VARIANTS } from './components/skeleton/skeleton.constants';
-export { 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, Linksimple, List, ListItem, Marker, MenuBar, MenuItem, MenuItemCheckbox, MenuItemRadio, MenuPopover, MenuSection, NavItem, NavItemList, OptGroup, Option, Popover, Presence, Progressbar, Progressspinner, Radio, RadioGroup, ScreenreaderAnnouncer, Searchfield, Select, SideNavigation, Skeleton, Spinner, StaticCheckbox, StaticRadio, StaticToggle, Tab, TabList, Text, Textarea, ThemeProvider, Toggle, ToggleTip, Tooltip, VirtualizedList, };
+export { 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, Linksimple, List, ListItem, Marker, MenuBar, MenuItem, MenuItemCheckbox, MenuItemRadio, MenuPopover, MenuSection, NavItem, NavItemList, OptGroup, Option, Password, Popover, Presence, Progressbar, Progressspinner, Radio, RadioGroup, ScreenreaderAnnouncer, Searchfield, Select, SideNavigation, Skeleton, Spinner, StaticCheckbox, StaticRadio, StaticToggle, Tab, TabList, Text, Textarea, ThemeProvider, Toggle, ToggleTip, Tooltip, VirtualizedList, };
 export type { BadgeType, ButtonColor, ButtonVariant, IconButtonSize, MenuPopoverActionEvent, MenuPopoverChangeEvent, MenuSectionChangeEvent, PillButtonSize, PopoverPlacement, SkeletonVariant, SpinnerSize, SpinnerVariant, TextType, };
-export { inMemoryCache, webAPIIconsCache, BUTTON_COLORS, BUTTON_VARIANTS, ICON_BUTTON_SIZES, PILL_BUTTON_SIZES, SKELETON_VARIANTS, };
+export { BUTTON_COLORS, BUTTON_VARIANTS, ICON_BUTTON_SIZES, inMemoryCache, PILL_BUTTON_SIZES, SKELETON_VARIANTS, webAPIIconsCache, };

package/dist/index.js

@@ -41,6 +41,7 @@ import NavItem from './components/navitem';
 import NavItemList from './components/navitemlist';
 import OptGroup from './components/optgroup';
 import Option from './components/option';
+import Password from './components/password';
 import Popover from './components/popover';
 import Presence from './components/presence';
 import Progressbar from './components/progressbar';
@@ -70,6 +71,6 @@ import { inMemoryCache, webAPIIconsCache } from './utils/icon-cache';
 import { BUTTON_COLORS, BUTTON_VARIANTS, ICON_BUTTON_SIZES, PILL_BUTTON_SIZES, } from './components/button/button.constants';
 import { SKELETON_VARIANTS } from './components/skeleton/skeleton.constants';
 // Components Exports
-export { 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, Linksimple, List, ListItem, Marker, MenuBar, MenuItem, MenuItemCheckbox, MenuItemRadio, MenuPopover, MenuSection, NavItem, NavItemList, OptGroup, Option, Popover, Presence, Progressbar, Progressspinner, Radio, RadioGroup, ScreenreaderAnnouncer, Searchfield, Select, SideNavigation, Skeleton, Spinner, StaticCheckbox, StaticRadio, StaticToggle, Tab, TabList, Text, Textarea, ThemeProvider, Toggle, ToggleTip, Tooltip, VirtualizedList, };
+export { 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, Linksimple, List, ListItem, Marker, MenuBar, MenuItem, MenuItemCheckbox, MenuItemRadio, MenuPopover, MenuSection, NavItem, NavItemList, OptGroup, Option, Password, Popover, Presence, Progressbar, Progressspinner, Radio, RadioGroup, ScreenreaderAnnouncer, Searchfield, Select, SideNavigation, Skeleton, Spinner, StaticCheckbox, StaticRadio, StaticToggle, Tab, TabList, Text, Textarea, ThemeProvider, Toggle, ToggleTip, Tooltip, VirtualizedList, };
 // Constants / Utils Exports
-export { inMemoryCache, webAPIIconsCache, BUTTON_COLORS, BUTTON_VARIANTS, ICON_BUTTON_SIZES, PILL_BUTTON_SIZES, SKELETON_VARIANTS, };
+export { BUTTON_COLORS, BUTTON_VARIANTS, ICON_BUTTON_SIZES, inMemoryCache, PILL_BUTTON_SIZES, SKELETON_VARIANTS, webAPIIconsCache, };

package/dist/react/index.d.ts

@@ -17,8 +17,8 @@ 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 Divider } from './divider';
+export { default as Dialog } from './dialog';
 export { default as FilterChip } from './filterchip';
 export { default as FormfieldGroup } from './formfieldgroup';
 export { default as FormfieldWrapper } from './formfieldwrapper';
@@ -32,15 +32,16 @@ export { default as List } from './list';
 export { default as ListItem } from './listitem';
 export { default as Marker } from './marker';
 export { default as MenuBar } from './menubar';
+export { default as MenuItem } from './menuitem';
 export { default as MenuItemCheckbox } from './menuitemcheckbox';
 export { default as MenuItemRadio } from './menuitemradio';
-export { default as MenuItem } from './menuitem';
 export { default as MenuPopover } from './menupopover';
 export { default as MenuSection } from './menusection';
 export { default as NavItem } from './navitem';
 export { default as NavItemList } from './navitemlist';
 export { default as OptGroup } from './optgroup';
 export { default as Option } from './option';
+export { default as Password } from './password';
 export { default as Popover } from './popover';
 export { default as Presence } from './presence';
 export { default as Progressbar } from './progressbar';

package/dist/react/index.js

@@ -17,8 +17,8 @@ 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 Divider } from './divider';
+export { default as Dialog } from './dialog';
 export { default as FilterChip } from './filterchip';
 export { default as FormfieldGroup } from './formfieldgroup';
 export { default as FormfieldWrapper } from './formfieldwrapper';
@@ -32,15 +32,16 @@ export { default as List } from './list';
 export { default as ListItem } from './listitem';
 export { default as Marker } from './marker';
 export { default as MenuBar } from './menubar';
+export { default as MenuItem } from './menuitem';
 export { default as MenuItemCheckbox } from './menuitemcheckbox';
 export { default as MenuItemRadio } from './menuitemradio';
-export { default as MenuItem } from './menuitem';
 export { default as MenuPopover } from './menupopover';
 export { default as MenuSection } from './menusection';
 export { default as NavItem } from './navitem';
 export { default as NavItemList } from './navitemlist';
 export { default as OptGroup } from './optgroup';
 export { default as Option } from './option';
+export { default as Password } from './password';
 export { default as Popover } from './popover';
 export { default as Presence } from './presence';
 export { default as Progressbar } from './progressbar';

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

@@ -0,0 +1,50 @@
+import { type EventName } from '@lit/react';
+import Component from '../../components/password';
+/**
+ * `mdc-password` is a component that allows users to input their password.
+ *  It extends the `mdc-input` component and provides additional features specific to password fields.
+ *  It contains:
+ * - `label` field - describe the password field.
+ * - `password` field - contains the value
+ * - `help-text` or `validation-message` - displayed below the password field.
+ * - `help-text-type` - type of the help text, can be 'default', 'error', 'warning', 'success', 'priority'.
+ * - `show-hide-button-aria-label` - aria label for the trailing show/hide button.
+ * - all the attributes of the native password field.
+ *
+ * @tagname mdc-password
+ *
+ * @event input - (React: onInput) This event is dispatched when the value of the password field changes (every press).
+ * @event change - (React: onChange) This event is dispatched when the value of the password field changes (on blur).
+ * @event focus - (React: onFocus) This event is dispatched when the password receives focus.
+ * @event blur - (React: onBlur) This event is dispatched when the password loses focus.
+ *
+ * @dependency mdc-icon
+ * @dependency mdc-text
+ * @dependency mdc-button
+ * @dependency mdc-toggletip
+ *
+ * @cssproperty --mdc-input-disabled-border-color - Border color for the password container when disabled
+ * @cssproperty --mdc-input-disabled-text-color - Text color for the password field when disabled
+ * @cssproperty --mdc-input-disabled-background-color - Background color for the password field when disabled
+ * @cssproperty --mdc-input-border-color - Border color for the password container
+ * @cssproperty --mdc-input-text-color - Text color for the password field
+ * @cssproperty --mdc-input-background-color - Background color for the password field
+ * @cssproperty --mdc-input-selection-background-color - Background color for the selected text
+ * @cssproperty --mdc-input-selection-text-color - Text color for the selected text
+ * @cssproperty --mdc-input-support-text-color - Text color for the help text
+ * @cssproperty --mdc-input-hover-background-color - Background color for the password field when hovered
+ * @cssproperty --mdc-input-focused-background-color - Background color for the password field when focused
+ * @cssproperty --mdc-input-focused-border-color - Border color for the password container when focused
+ * @cssproperty --mdc-input-error-border-color - Border color for the password container when error
+ * @cssproperty --mdc-input-warning-border-color - Border color for the password container when warning
+ * @cssproperty --mdc-input-success-border-color - Border color for the password container when success
+ * @cssproperty --mdc-input-primary-border-color - Border color for the password container when primary
+ *
+ */
+declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {
+    onInput: EventName<InputEvent>;
+    onChange: EventName<Event>;
+    onFocus: EventName<FocusEvent>;
+    onBlur: EventName<FocusEvent>;
+}>;
+export default reactWrapper;

package/dist/react/password/index.js

@@ -0,0 +1,58 @@
+import * as React from 'react';
+import { createComponent } from '@lit/react';
+import Component from '../../components/password';
+import { TAG_NAME } from '../../components/password/password.constants';
+/**
+ * `mdc-password` is a component that allows users to input their password.
+ *  It extends the `mdc-input` component and provides additional features specific to password fields.
+ *  It contains:
+ * - `label` field - describe the password field.
+ * - `password` field - contains the value
+ * - `help-text` or `validation-message` - displayed below the password field.
+ * - `help-text-type` - type of the help text, can be 'default', 'error', 'warning', 'success', 'priority'.
+ * - `show-hide-button-aria-label` - aria label for the trailing show/hide button.
+ * - all the attributes of the native password field.
+ *
+ * @tagname mdc-password
+ *
+ * @event input - (React: onInput) This event is dispatched when the value of the password field changes (every press).
+ * @event change - (React: onChange) This event is dispatched when the value of the password field changes (on blur).
+ * @event focus - (React: onFocus) This event is dispatched when the password receives focus.
+ * @event blur - (React: onBlur) This event is dispatched when the password loses focus.
+ *
+ * @dependency mdc-icon
+ * @dependency mdc-text
+ * @dependency mdc-button
+ * @dependency mdc-toggletip
+ *
+ * @cssproperty --mdc-input-disabled-border-color - Border color for the password container when disabled
+ * @cssproperty --mdc-input-disabled-text-color - Text color for the password field when disabled
+ * @cssproperty --mdc-input-disabled-background-color - Background color for the password field when disabled
+ * @cssproperty --mdc-input-border-color - Border color for the password container
+ * @cssproperty --mdc-input-text-color - Text color for the password field
+ * @cssproperty --mdc-input-background-color - Background color for the password field
+ * @cssproperty --mdc-input-selection-background-color - Background color for the selected text
+ * @cssproperty --mdc-input-selection-text-color - Text color for the selected text
+ * @cssproperty --mdc-input-support-text-color - Text color for the help text
+ * @cssproperty --mdc-input-hover-background-color - Background color for the password field when hovered
+ * @cssproperty --mdc-input-focused-background-color - Background color for the password field when focused
+ * @cssproperty --mdc-input-focused-border-color - Border color for the password container when focused
+ * @cssproperty --mdc-input-error-border-color - Border color for the password container when error
+ * @cssproperty --mdc-input-warning-border-color - Border color for the password container when warning
+ * @cssproperty --mdc-input-success-border-color - Border color for the password container when success
+ * @cssproperty --mdc-input-primary-border-color - Border color for the password container when primary
+ *
+ */
+const reactWrapper = createComponent({
+    tagName: TAG_NAME,
+    elementClass: Component,
+    react: React,
+    events: {
+        onInput: 'input',
+        onChange: 'change',
+        onFocus: 'focus',
+        onBlur: 'blur',
+    },
+    displayName: 'Password',
+});
+export default reactWrapper;

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.
  *
+ * To set a default option, use the `selected` attribute on the `mdc-option` element.
+ *
  * @dependency mdc-button
  * @dependency mdc-icon
  * @dependency mdc-popover
@@ -18,11 +20,13 @@ import Component from '../../components/select';
  *
  * @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.
+ * @event input - (React: onInput) This event is dispatched when the select is changed.
  * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the 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>;
     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.
  *
+ * To set a default option, use the `selected` attribute on the `mdc-option` element.
+ *
  * @dependency mdc-button
  * @dependency mdc-icon
  * @dependency mdc-popover
@@ -20,6 +22,7 @@ import { TAG_NAME } from '../../components/select/select.constants';
  *
  * @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.
+ * @event input - (React: onInput) This event is dispatched when the select is changed.
  * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the select.
  * @event focus - (React: onFocus) This event is dispatched when the select receives focus.
  */
@@ -29,6 +32,7 @@ const reactWrapper = createComponent({
     react: React,
     events: {
         onChange: 'change',
+        onInput: 'input',
         onClick: 'click',
         onKeyDown: 'keydown',
         onFocus: 'focus',

package/package.json

@@ -41,5 +41,5 @@
     "lottie-web": "^5.12.2",
     "uuid": "^11.0.5"
   },
-  "version": "0.86.0"
+  "version": "0.87.1"
 }