@momentum-design/components 0.53.8 → 0.54.0

package/dist/index.d.ts

@@ -9,6 +9,8 @@ import Button from './components/button';
 import Checkbox from './components/checkbox';
 import Chip from './components/chip';
 import Coachmark from './components/coachmark';
+import StaticCheckbox from './components/staticcheckbox';
+import StaticRadio from './components/staticradio';
 import Divider from './components/divider';
 import FilterChip from './components/filterchip';
 import FormfieldGroup from './components/formfieldgroup';
@@ -47,6 +49,6 @@ import type { SpinnerSize, SpinnerVariant } from './components/spinner/spinner.t
 import type { TextType } from './components/text/text.types';
 import { inMemoryCache, webAPIIconsCache } from './utils/icon-cache';
 import { BUTTON_COLORS, BUTTON_VARIANTS, ICON_BUTTON_SIZES, PILL_BUTTON_SIZES } from './components/button/button.constants';
-export { AlertChip, Avatar, AvatarButton, Badge, Bullet, Button, Checkbox, Chip, Coachmark, Divider, FilterChip, FormfieldGroup, Icon, IconProvider, Input, InputChip, Link, List, ListItem, Marker, Popover, Presence, Radio, RadioGroup, Spinner, Tab, Text, ThemeProvider, Toggle, VirtualizedList, Option, OptGroup, Progressbar, ScreenreaderAnnouncer, Textarea, Tooltip, Searchfield, Brandvisual, Appheader, Select, TabList, Progressspinner, };
+export { AlertChip, Avatar, AvatarButton, Badge, Bullet, Button, Checkbox, Chip, Coachmark, Divider, FilterChip, FormfieldGroup, Icon, IconProvider, Input, InputChip, Link, List, ListItem, Marker, Popover, Presence, Radio, RadioGroup, Spinner, Tab, Text, ThemeProvider, Toggle, VirtualizedList, Option, OptGroup, Progressbar, ScreenreaderAnnouncer, StaticCheckbox, StaticRadio, Textarea, Tooltip, Searchfield, Brandvisual, Appheader, Select, TabList, Progressspinner, };
 export type { TextType, SpinnerSize, SpinnerVariant, PopoverPlacement, BadgeType, IconButtonSize, PillButtonSize, ButtonVariant, ButtonColor, };
 export { inMemoryCache, webAPIIconsCache, BUTTON_COLORS, BUTTON_VARIANTS, ICON_BUTTON_SIZES, PILL_BUTTON_SIZES };

package/dist/index.js

@@ -10,6 +10,8 @@ import Button from './components/button';
 import Checkbox from './components/checkbox';
 import Chip from './components/chip';
 import Coachmark from './components/coachmark';
+import StaticCheckbox from './components/staticcheckbox';
+import StaticRadio from './components/staticradio';
 import Divider from './components/divider';
 import FilterChip from './components/filterchip';
 import FormfieldGroup from './components/formfieldgroup';
@@ -45,6 +47,6 @@ import { inMemoryCache, webAPIIconsCache } from './utils/icon-cache';
 // Constants / Utils Imports
 import { BUTTON_COLORS, BUTTON_VARIANTS, ICON_BUTTON_SIZES, PILL_BUTTON_SIZES, } from './components/button/button.constants';
 // Components Exports
-export { AlertChip, Avatar, AvatarButton, Badge, Bullet, Button, Checkbox, Chip, Coachmark, Divider, FilterChip, FormfieldGroup, Icon, IconProvider, Input, InputChip, Link, List, ListItem, Marker, Popover, Presence, Radio, RadioGroup, Spinner, Tab, Text, ThemeProvider, Toggle, VirtualizedList, Option, OptGroup, Progressbar, ScreenreaderAnnouncer, Textarea, Tooltip, Searchfield, Brandvisual, Appheader, Select, TabList, Progressspinner, };
+export { AlertChip, Avatar, AvatarButton, Badge, Bullet, Button, Checkbox, Chip, Coachmark, Divider, FilterChip, FormfieldGroup, Icon, IconProvider, Input, InputChip, Link, List, ListItem, Marker, Popover, Presence, Radio, RadioGroup, Spinner, Tab, Text, ThemeProvider, Toggle, VirtualizedList, Option, OptGroup, Progressbar, ScreenreaderAnnouncer, StaticCheckbox, StaticRadio, Textarea, Tooltip, Searchfield, Brandvisual, Appheader, Select, TabList, Progressspinner, };
 // Constants / Utils Exports
 export { inMemoryCache, webAPIIconsCache, BUTTON_COLORS, BUTTON_VARIANTS, ICON_BUTTON_SIZES, PILL_BUTTON_SIZES };

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

@@ -16,18 +16,10 @@ import Component from '../../components/checkbox';
  * @event focus - (React: onFocus) Event that gets dispatched when the checkbox receives focus.
  *
  * @cssproperty --mdc-checkbox-background-color-hover - Allows customization of the background color on hover.
- * @cssproperty --mdc-checkbox-border-color - Border color in high contrast.
- * @cssproperty --mdc-checkbox-checked-background-color - Background color for a selected checkbox.
  * @cssproperty --mdc-checkbox-checked-background-color-hover - Background color for a selected checkbox when hovered.
  * @cssproperty --mdc-checkbox-checked-pressed-icon-color - Background color for a selected checkbox when pressed.
- * @cssproperty --mdc-checkbox-disabled-background-color - Background color for a disabled checkbox.
- * @cssproperty --mdc-checkbox-disabled-border-color - Border color for a disabled checkbox.
- * @cssproperty --mdc-checkbox-disabled-checked-icon-color - Background color for a disabled, selected checkbox.
- * @cssproperty --mdc-checkbox-disabled-icon-color - Icon color for a disabled checkbox.
- * @cssproperty --mdc-checkbox-icon-background-color - Background color for an unselected checkbox.
- * @cssproperty --mdc-checkbox-icon-border-color - Default background color for an unselected checkbox.
- * @cssproperty --mdc-checkbox-icon-color - Icon color for an unselected checkbox.
  * @cssproperty --mdc-checkbox-pressed-icon-color - Background color for a selected checkbox when pressed.
+ * @cssproperty --mdc-checkbox-disabled-checked-icon-color - Background color for a selected checkbox when disabled.
  */
 declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {
     onChange: EventName<Event>;

package/dist/react/checkbox/index.js

@@ -18,18 +18,10 @@ import { TAG_NAME } from '../../components/checkbox/checkbox.constants';
  * @event focus - (React: onFocus) Event that gets dispatched when the checkbox receives focus.
  *
  * @cssproperty --mdc-checkbox-background-color-hover - Allows customization of the background color on hover.
- * @cssproperty --mdc-checkbox-border-color - Border color in high contrast.
- * @cssproperty --mdc-checkbox-checked-background-color - Background color for a selected checkbox.
  * @cssproperty --mdc-checkbox-checked-background-color-hover - Background color for a selected checkbox when hovered.
  * @cssproperty --mdc-checkbox-checked-pressed-icon-color - Background color for a selected checkbox when pressed.
- * @cssproperty --mdc-checkbox-disabled-background-color - Background color for a disabled checkbox.
- * @cssproperty --mdc-checkbox-disabled-border-color - Border color for a disabled checkbox.
- * @cssproperty --mdc-checkbox-disabled-checked-icon-color - Background color for a disabled, selected checkbox.
- * @cssproperty --mdc-checkbox-disabled-icon-color - Icon color for a disabled checkbox.
- * @cssproperty --mdc-checkbox-icon-background-color - Background color for an unselected checkbox.
- * @cssproperty --mdc-checkbox-icon-border-color - Default background color for an unselected checkbox.
- * @cssproperty --mdc-checkbox-icon-color - Icon color for an unselected checkbox.
  * @cssproperty --mdc-checkbox-pressed-icon-color - Background color for a selected checkbox when pressed.
+ * @cssproperty --mdc-checkbox-disabled-checked-icon-color - Background color for a selected checkbox when disabled.
  */
 const reactWrapper = createComponent({
     tagName: TAG_NAME,

package/dist/react/index.d.ts

@@ -1,13 +1,13 @@
 export { default as AlertChip } from './alertchip';
+export { default as Appheader } from './appheader';
 export { default as Avatar } from './avatar';
 export { default as AvatarButton } from './avatarbutton';
 export { default as Badge } from './badge';
-export { default as Appheader } from './appheader';
 export { default as Brandvisual } from './brandvisual';
 export { default as Bullet } from './bullet';
 export { default as Button } from './button';
-export { default as Checkbox } from './checkbox';
 export { default as Buttonsimple } from './buttonsimple';
+export { default as Checkbox } from './checkbox';
 export { default as Chip } from './chip';
 export { default as Coachmark } from './coachmark';
 export { default as Divider } from './divider';
@@ -34,6 +34,8 @@ 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 Tab } from './tab';
 export { default as TabList } from './tablist';
 export { default as Text } from './text';

package/dist/react/index.js

@@ -1,13 +1,13 @@
 export { default as AlertChip } from './alertchip';
+export { default as Appheader } from './appheader';
 export { default as Avatar } from './avatar';
 export { default as AvatarButton } from './avatarbutton';
 export { default as Badge } from './badge';
-export { default as Appheader } from './appheader';
 export { default as Brandvisual } from './brandvisual';
 export { default as Bullet } from './bullet';
 export { default as Button } from './button';
-export { default as Checkbox } from './checkbox';
 export { default as Buttonsimple } from './buttonsimple';
+export { default as Checkbox } from './checkbox';
 export { default as Chip } from './chip';
 export { default as Coachmark } from './coachmark';
 export { default as Divider } from './divider';
@@ -34,6 +34,8 @@ 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 Tab } from './tab';
 export { default as TabList } from './tablist';
 export { default as Text } from './text';

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

@@ -1,11 +1,11 @@
+import { type EventName } from '@lit/react';
 import Component from '../../components/link';
 /**
  * `mdc-link` component can be used to navigate to a different page
  * within the application or to an external site. It can be used to link to
  * emails or phone numbers.
  *
- * The `children` of the link component is expected to be an anchor element
- * containing the text, href, and other attributes.
+ * The `children` of the link component is expected to be the text content.
  *
  * For `icon`, the `mdc-icon` component is used to render the icon.
  *
@@ -13,6 +13,11 @@ import Component from '../../components/link';
  *
  * @tagname mdc-link
  *
+ * @event click - (React: onClick) Fired when the user activates the buttonLink using a mouse or assistive technology.
+ * @event keydown - (React: onKeyDown) Fired when the user presses a key while the buttonLink has focus.
+ * @event focus - (React: onFocus) Fired when the buttonLink receives keyboard or mouse focus.
+ * @event blur - (React: onBlur) Fired when the buttonLink loses keyboard or mouse focus.
+ *
  * @cssproperty --mdc-link-border-radius - Border radius of the link
  * @cssproperty --mdc-link-color-active - Text and icon color of the link in active state
  * @cssproperty --mdc-link-color-disabled - Text and icon color of the link in disabled state
@@ -25,5 +30,10 @@ import Component from '../../components/link';
  * @cssproperty --mdc-link-inverted-color-normal - Text and icon color of the inverted link in normal state
  * @cssproperty --mdc-link-text-decoration-disabled - Text decoration of the link in disabled state for all variants
  */
-declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {}>;
+declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {
+    onClick: EventName<MouseEvent>;
+    onKeyDown: EventName<KeyboardEvent>;
+    onFocus: EventName<FocusEvent>;
+    onBlur: EventName<Event>;
+}>;
 export default reactWrapper;

package/dist/react/link/index.js

@@ -7,8 +7,7 @@ import { TAG_NAME } from '../../components/link/link.constants';
  * within the application or to an external site. It can be used to link to
  * emails or phone numbers.
  *
- * The `children` of the link component is expected to be an anchor element
- * containing the text, href, and other attributes.
+ * The `children` of the link component is expected to be the text content.
  *
  * For `icon`, the `mdc-icon` component is used to render the icon.
  *
@@ -16,6 +15,11 @@ import { TAG_NAME } from '../../components/link/link.constants';
  *
  * @tagname mdc-link
  *
+ * @event click - (React: onClick) Fired when the user activates the buttonLink using a mouse or assistive technology.
+ * @event keydown - (React: onKeyDown) Fired when the user presses a key while the buttonLink has focus.
+ * @event focus - (React: onFocus) Fired when the buttonLink receives keyboard or mouse focus.
+ * @event blur - (React: onBlur) Fired when the buttonLink loses keyboard or mouse focus.
+ *
  * @cssproperty --mdc-link-border-radius - Border radius of the link
  * @cssproperty --mdc-link-color-active - Text and icon color of the link in active state
  * @cssproperty --mdc-link-color-disabled - Text and icon color of the link in disabled state
@@ -32,7 +36,12 @@ const reactWrapper = createComponent({
     tagName: TAG_NAME,
     elementClass: Component,
     react: React,
-    events: {},
+    events: {
+        onClick: 'click',
+        onKeyDown: 'keydown',
+        onFocus: 'focus',
+        onBlur: 'blur',
+    },
     displayName: 'Link',
 });
 export default reactWrapper;

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

@@ -12,22 +12,14 @@ import Component from '../../components/radio';
  * @event change - (React: onChange) Event that gets dispatched when the radio state changes.
  * @event focus - (React: onFocus) Event that gets dispatched when the radio receives focus.
  *
- * @cssproperty --mdc-radio-inner-circle-size - size of the inner circle
  * @cssproperty --mdc-radio-text-disabled-color - color of the label when disabled
- * @cssproperty --mdc-radio-disabled-border-color - color of the radio button border when disabled
- * @cssproperty --mdc-radio-normal-border-color - color of the radio button border when normal
- * @cssproperty --mdc-radio-inner-circle-normal-background - background color of the inner circle when normal
- * @cssproperty --mdc-radio-inner-circle-disabled-background - background color of the inner circle when disabled
- * @cssproperty --mdc-radio-control-inactive-color - color of the radio button when inactive
  * @cssproperty --mdc-radio-control-inactive-hover - color of the radio button when inactive and hovered
  * @cssproperty --mdc-radio-control-inactive-pressed-color - color of the radio button when inactive and pressed
- * @cssproperty --mdc-radio-control-inactive-disabled-background - background color of the radio button when
- *  inactive and disabled
- * @cssproperty --mdc-radio-control-active-color - color of the radio button when active
  * @cssproperty --mdc-radio-control-active-hover-color - color of the radio button when active and hovered
  * @cssproperty --mdc-radio-control-active-pressed-color - color of the radio button when active and pressed
- * @cssproperty --mdc-radio-control-active-disabled-background - background color of the radio button
- *  when active and disabled
+ * @cssproperty --mdc-radio-disabled-border-color - color of the radio button when disabled
+ * @cssproperty --mdc-radio-control-active-disabled-background - color of the radio button when active and disabled
+ * @cssproperty --mdc-radio-control-inactive-disabled-background - color of the radio button when inactive and disabled
  *
  */
 declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {

package/dist/react/radio/index.js

@@ -14,22 +14,14 @@ import { TAG_NAME } from '../../components/radio/radio.constants';
  * @event change - (React: onChange) Event that gets dispatched when the radio state changes.
  * @event focus - (React: onFocus) Event that gets dispatched when the radio receives focus.
  *
- * @cssproperty --mdc-radio-inner-circle-size - size of the inner circle
  * @cssproperty --mdc-radio-text-disabled-color - color of the label when disabled
- * @cssproperty --mdc-radio-disabled-border-color - color of the radio button border when disabled
- * @cssproperty --mdc-radio-normal-border-color - color of the radio button border when normal
- * @cssproperty --mdc-radio-inner-circle-normal-background - background color of the inner circle when normal
- * @cssproperty --mdc-radio-inner-circle-disabled-background - background color of the inner circle when disabled
- * @cssproperty --mdc-radio-control-inactive-color - color of the radio button when inactive
  * @cssproperty --mdc-radio-control-inactive-hover - color of the radio button when inactive and hovered
  * @cssproperty --mdc-radio-control-inactive-pressed-color - color of the radio button when inactive and pressed
- * @cssproperty --mdc-radio-control-inactive-disabled-background - background color of the radio button when
- *  inactive and disabled
- * @cssproperty --mdc-radio-control-active-color - color of the radio button when active
  * @cssproperty --mdc-radio-control-active-hover-color - color of the radio button when active and hovered
  * @cssproperty --mdc-radio-control-active-pressed-color - color of the radio button when active and pressed
- * @cssproperty --mdc-radio-control-active-disabled-background - background color of the radio button
- *  when active and disabled
+ * @cssproperty --mdc-radio-disabled-border-color - color of the radio button when disabled
+ * @cssproperty --mdc-radio-control-active-disabled-background - color of the radio button when active and disabled
+ * @cssproperty --mdc-radio-control-inactive-disabled-background - color of the radio button when inactive and disabled
  *
  */
 const reactWrapper = createComponent({

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

@@ -0,0 +1,25 @@
+import Component from '../../components/staticcheckbox';
+/**
+ * This is a decorative component that is styled to look as a checkbox.
+ *
+ * It has 3 properties - checked, indeterminate and disabled.
+ *
+ * We are using the same styling that has been created for the `mdc-checkbox` component.
+ *
+ * @tagname mdc-staticcheckbox
+ *
+ * @dependency mdc-icon
+ *
+ * @cssproperty --mdc-staticcheckbox-border-color - Border color in high contrast.
+ * @cssproperty --mdc-staticcheckbox-checked-background-color - Background color for a selected checkbox.
+ * @cssproperty --mdc-staticcheckbox-disabled-background-color - Background color for a disabled checkbox.
+ * @cssproperty --mdc-checkbox-disabled-border-color - Border color for a disabled checkbox.
+ * @cssproperty --mdc-checkbox-disabled-checked-icon-color - Background color for a disabled, selected checkbox.
+ * @cssproperty --mdc-staticcheckbox-disabled-icon-color - Icon color for a disabled checkbox.
+ * @cssproperty --mdc-staticcheckbox-icon-background-color - Background color for an unselected checkbox.
+ * @cssproperty --mdc-staticcheckbox-icon-border-color - Default background color for an unselected checkbox.
+ * @cssproperty --mdc-staticcheckbox-icon-color - Icon color for an unselected checkbox.
+ *
+ */
+declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {}>;
+export default reactWrapper;

package/dist/react/staticcheckbox/index.js

@@ -0,0 +1,34 @@
+import * as React from 'react';
+import { createComponent } from '@lit/react';
+import Component from '../../components/staticcheckbox';
+import { TAG_NAME } from '../../components/staticcheckbox/staticcheckbox.constants';
+/**
+ * This is a decorative component that is styled to look as a checkbox.
+ *
+ * It has 3 properties - checked, indeterminate and disabled.
+ *
+ * We are using the same styling that has been created for the `mdc-checkbox` component.
+ *
+ * @tagname mdc-staticcheckbox
+ *
+ * @dependency mdc-icon
+ *
+ * @cssproperty --mdc-staticcheckbox-border-color - Border color in high contrast.
+ * @cssproperty --mdc-staticcheckbox-checked-background-color - Background color for a selected checkbox.
+ * @cssproperty --mdc-staticcheckbox-disabled-background-color - Background color for a disabled checkbox.
+ * @cssproperty --mdc-checkbox-disabled-border-color - Border color for a disabled checkbox.
+ * @cssproperty --mdc-checkbox-disabled-checked-icon-color - Background color for a disabled, selected checkbox.
+ * @cssproperty --mdc-staticcheckbox-disabled-icon-color - Icon color for a disabled checkbox.
+ * @cssproperty --mdc-staticcheckbox-icon-background-color - Background color for an unselected checkbox.
+ * @cssproperty --mdc-staticcheckbox-icon-border-color - Default background color for an unselected checkbox.
+ * @cssproperty --mdc-staticcheckbox-icon-color - Icon color for an unselected checkbox.
+ *
+ */
+const reactWrapper = createComponent({
+    tagName: TAG_NAME,
+    elementClass: Component,
+    react: React,
+    events: {},
+    displayName: 'StaticCheckbox',
+});
+export default reactWrapper;

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

@@ -0,0 +1,24 @@
+import Component from '../../components/staticradio';
+/**
+ * This is a decorative component that is styled to look as a radio.
+ * It has 2 properties - checked and disabled.
+ *
+ * We are using the same styling that has been created for the `mdc-radio` component.
+ *
+ * @tagname mdc-staticradio
+ *
+ * @cssproperty --mdc-staticradio-inner-circle-size - size of the inner circle
+ * @cssproperty --mdc-staticradio-text-disabled-color - color of the label when disabled
+ * @cssproperty --mdc-staticradio-normal-border-color - color of the radio button border when normal
+ * @cssproperty --mdc-staticradio-disabled-border-color - color of the radio button border when disabled
+ * @cssproperty --mdc-staticradio-inner-circle-normal-background - background color of the inner circle when normal
+ * @cssproperty --mdc-staticradio-inner-circle-disabled-background - background color of the inner circle when disabled
+ * @cssproperty --mdc-staticradio-control-inactive-color - color of the radio button when inactive
+ * @cssproperty --mdc-staticradio-control-inactive-disabled-background - background color of the radio button when
+ *  inactive and disabled
+ * @cssproperty --mdc-staticradio-control-active-color - color of the radio button when active
+ * @cssproperty --mdc-staticradio-control-active-disabled-background - background color of the radio button
+ *  when active and disabled
+ */
+declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {}>;
+export default reactWrapper;

package/dist/react/staticradio/index.js

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import { createComponent } from '@lit/react';
+import Component from '../../components/staticradio';
+import { TAG_NAME } from '../../components/staticradio/staticradio.constants';
+/**
+ * This is a decorative component that is styled to look as a radio.
+ * It has 2 properties - checked and disabled.
+ *
+ * We are using the same styling that has been created for the `mdc-radio` component.
+ *
+ * @tagname mdc-staticradio
+ *
+ * @cssproperty --mdc-staticradio-inner-circle-size - size of the inner circle
+ * @cssproperty --mdc-staticradio-text-disabled-color - color of the label when disabled
+ * @cssproperty --mdc-staticradio-normal-border-color - color of the radio button border when normal
+ * @cssproperty --mdc-staticradio-disabled-border-color - color of the radio button border when disabled
+ * @cssproperty --mdc-staticradio-inner-circle-normal-background - background color of the inner circle when normal
+ * @cssproperty --mdc-staticradio-inner-circle-disabled-background - background color of the inner circle when disabled
+ * @cssproperty --mdc-staticradio-control-inactive-color - color of the radio button when inactive
+ * @cssproperty --mdc-staticradio-control-inactive-disabled-background - background color of the radio button when
+ *  inactive and disabled
+ * @cssproperty --mdc-staticradio-control-active-color - color of the radio button when active
+ * @cssproperty --mdc-staticradio-control-active-disabled-background - background color of the radio button
+ *  when active and disabled
+ */
+const reactWrapper = createComponent({
+    tagName: TAG_NAME,
+    elementClass: Component,
+    react: React,
+    events: {},
+    displayName: 'StaticRadio',
+});
+export default reactWrapper;

package/package.json

@@ -39,5 +39,5 @@
     "lit": "^3.2.0",
     "uuid": "^11.0.5"
   },
-  "version": "0.53.8"
+  "version": "0.54.0"
 }