@momentum-design/components 0.85.10 → 0.87.0

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

@@ -11,9 +11,9 @@ export { default as ButtonGroup } from './buttongroup';
 export { default as ButtonLink } from './buttonlink';
 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 CardButton } from './cardbutton';
 export { default as Checkbox } from './checkbox';
 export { default as Chip } from './chip';
 export { default as Coachmark } from './coachmark';
@@ -41,6 +41,7 @@ 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

@@ -11,9 +11,9 @@ export { default as ButtonGroup } from './buttongroup';
 export { default as ButtonLink } from './buttonlink';
 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 CardButton } from './cardbutton';
 export { default as Checkbox } from './checkbox';
 export { default as Chip } from './chip';
 export { default as Coachmark } from './coachmark';
@@ -41,6 +41,7 @@ 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/menuitemradio/index.d.ts

@@ -26,8 +26,10 @@ import Component from '../../components/menuitemradio';
  * For example, you can use a custom icon or a different visual element to indicate the state of the menu item.
  * Make sure the new indicator is accessible.
  *
+ * @dependency mdc-icon
  * @dependency mdc-staticradio
  * @dependency mdc-text
+ * @dependency mdc-tooltip
  *
  * @tagname mdc-menuitemradio
  *

package/dist/react/menuitemradio/index.js

@@ -28,8 +28,10 @@ import { TAG_NAME } from '../../components/menuitemradio/menuitemradio.constants
  * For example, you can use a custom icon or a different visual element to indicate the state of the menu item.
  * Make sure the new indicator is accessible.
  *
+ * @dependency mdc-icon
  * @dependency mdc-staticradio
  * @dependency mdc-text
+ * @dependency mdc-tooltip
  *
  * @tagname mdc-menuitemradio
  *

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/package.json

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