@momentum-design/components 0.30.0 → 0.31.0

package/dist/components/checkbox/checkbox.styles.js

@@ -50,7 +50,9 @@ const styles = [css `
     --mdc-icon-fill-color: var(--mdc-checkbox-disabled-icon-color);
   }
   :host([disabled][checked]) .icon-container,
-  :host([disabled][indeterminate]) .icon-container {
+  :host([disabled][indeterminate]) .icon-container,
+  :host([disabled][checked]) .container:hover .icon-container,
+  :host([disabled][indeterminate]) .container:hover .icon-container {
     background: var(--mdc-checkbox-disabled-checked-icon-color);
     border: 0.0625rem solid var(--mdc-checkbox-disabled-border-color);
   }

package/dist/components/listitem/listitem.component.d.ts

@@ -33,9 +33,17 @@ declare const ListItem_base: import("../../utils/mixins/index.types").Constructo
  *  - Allows customization of the primary label, side header and subline text slot color.
  * @cssproperty --mdc-listitem-secondary-label-color
  *  - Allows customization of the secondary and teritary label text slot color.
+ * @cssproperty --mdc-listitem-disabled-color - Allows customization of the disabled color.
+ *
+ * @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.
+ * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the listitem.
+ * @event focus - (React: onFocus) This event is dispatched when the listitem receives focus.
  */
 declare class ListItem extends ListItem_base {
+    /** @internal */
     leadingControlsSlot: Array<HTMLElement>;
+    /** @internal */
     trailingControlsSlot: Array<HTMLElement>;
     /**
      * The variant of the list item. It can be a pill, rectangle or a full-width.

package/dist/components/listitem/listitem.component.js

@@ -46,6 +46,12 @@ import styles from './listitem.styles';
  *  - Allows customization of the primary label, side header and subline text slot color.
  * @cssproperty --mdc-listitem-secondary-label-color
  *  - Allows customization of the secondary and teritary label text slot color.
+ * @cssproperty --mdc-listitem-disabled-color - Allows customization of the disabled color.
+ *
+ * @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.
+ * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the listitem.
+ * @event focus - (React: onFocus) This event is dispatched when the listitem receives focus.
  */
 class ListItem extends DataAriaLabelMixin(DisabledMixin(TabIndexMixin(Component))) {
     constructor() {

package/dist/custom-elements.json

@@ -5407,6 +5407,10 @@
             {
               "description": "Allows customization of the secondary and teritary label text slot color.",
               "name": "--mdc-listitem-secondary-label-color"
+            },
+            {
+              "description": "Allows customization of the disabled color.",
+              "name": "--mdc-listitem-disabled-color"
             }
           ],
           "slots": [
@@ -5440,20 +5444,6 @@
             }
           ],
           "members": [
-            {
-              "kind": "field",
-              "name": "leadingControlsSlot",
-              "type": {
-                "text": "Array<HTMLElement>"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "trailingControlsSlot",
-              "type": {
-                "text": "Array<HTMLElement>"
-              }
-            },
             {
               "kind": "field",
               "name": "variant",
@@ -5624,6 +5614,32 @@
               }
             }
           ],
+          "events": [
+            {
+              "description": "(React: onClick) This event is dispatched when the listitem is clicked.",
+              "name": "click",
+              "reactName": "onClick",
+              "eventName": "ClickEvent"
+            },
+            {
+              "description": "(React: onKeyDown) This event is dispatched when a key is pressed down on the listitem.",
+              "name": "keydown",
+              "reactName": "onKeyDown",
+              "eventName": "KeydownEvent"
+            },
+            {
+              "description": "(React: onKeyUp) This event is dispatched when a key is released on the listitem.",
+              "name": "keyup",
+              "reactName": "onKeyUp",
+              "eventName": "KeyupEvent"
+            },
+            {
+              "description": "(React: onFocus) This event is dispatched when the listitem receives focus.",
+              "name": "focus",
+              "reactName": "onFocus",
+              "eventName": "FocusEvent"
+            }
+          ],
           "attributes": [
             {
               "name": "variant",
@@ -5733,7 +5749,7 @@
             "module": "/src/models"
           },
           "tagName": "mdc-listitem",
-          "jsDoc": "/**\n * mdc-listitem component is used to display a label with different types of controls.\n * There can be three types of controls, a radio button, a checkbox on the\n * leading side and a toggle on the trailing side.\n * The list item can contain an avatar on the leading side and a badge on the trailing side.\n * Additionally, the list item can contain a side header and a subline text.\n *\n * The leading and trailing slots can be used to display controls and text. <br/>\n * Based on the leading/trailing slot, the position of the controls and text can be adjusted. <br/>\n * Please use mdc-list as a parent element even when there is only listitem for a11y purpose.\n *\n * @tagname mdc-listitem\n *\n * @dependency mdc-text\n *\n * @slot leading-controls - slot for list item controls to appear of leading end.\n * @slot leading-text-primary-label - slot for list item primary label.\n * @slot leading-text-secondary-label - slot for list item secondary label.\n * @slot leading-text-tertiary-label - slot for list item tertiary label.\n * @slot trailing-text-side-header - slot for list item side header text.\n * @slot trailing-text-subline - slot for list item subline text.\n * @slot trailing-controls - slot for list item controls to appear of trailing end.\n *\n * @cssproperty --mdc-listitem-default-background-color - Allows customization of the default background color.\n * @cssproperty --mdc-listitem-background-color-hover - Allows customization of the background color on hover.\n * @cssproperty --mdc-listitem-background-color-active - Allows customization of the background color when pressed.\n * @cssproperty --mdc-listitem-primary-label-color\n *  - Allows customization of the primary label, side header and subline text slot color.\n * @cssproperty --mdc-listitem-secondary-label-color\n *  - Allows customization of the secondary and teritary label text slot color.\n */",
+          "jsDoc": "/**\n * mdc-listitem component is used to display a label with different types of controls.\n * There can be three types of controls, a radio button, a checkbox on the\n * leading side and a toggle on the trailing side.\n * The list item can contain an avatar on the leading side and a badge on the trailing side.\n * Additionally, the list item can contain a side header and a subline text.\n *\n * The leading and trailing slots can be used to display controls and text. <br/>\n * Based on the leading/trailing slot, the position of the controls and text can be adjusted. <br/>\n * Please use mdc-list as a parent element even when there is only listitem for a11y purpose.\n *\n * @tagname mdc-listitem\n *\n * @dependency mdc-text\n *\n * @slot leading-controls - slot for list item controls to appear of leading end.\n * @slot leading-text-primary-label - slot for list item primary label.\n * @slot leading-text-secondary-label - slot for list item secondary label.\n * @slot leading-text-tertiary-label - slot for list item tertiary label.\n * @slot trailing-text-side-header - slot for list item side header text.\n * @slot trailing-text-subline - slot for list item subline text.\n * @slot trailing-controls - slot for list item controls to appear of trailing end.\n *\n * @cssproperty --mdc-listitem-default-background-color - Allows customization of the default background color.\n * @cssproperty --mdc-listitem-background-color-hover - Allows customization of the background color on hover.\n * @cssproperty --mdc-listitem-background-color-active - Allows customization of the background color when pressed.\n * @cssproperty --mdc-listitem-primary-label-color\n *  - Allows customization of the primary label, side header and subline text slot color.\n * @cssproperty --mdc-listitem-secondary-label-color\n *  - Allows customization of the secondary and teritary label text slot color.\n * @cssproperty --mdc-listitem-disabled-color - Allows customization of the disabled color.\n *\n * @event click - (React: onClick) This event is dispatched when the listitem is clicked.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the listitem.\n * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the listitem.\n * @event focus - (React: onFocus) This event is dispatched when the listitem receives focus.\n */",
           "customElement": true
         }
       ],

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

@@ -29,6 +29,17 @@ import Component from '../../components/listitem';
  *  - Allows customization of the primary label, side header and subline text slot color.
  * @cssproperty --mdc-listitem-secondary-label-color
  *  - Allows customization of the secondary and teritary label text slot color.
+ * @cssproperty --mdc-listitem-disabled-color - Allows customization of the disabled color.
+ *
+ * @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.
+ * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the listitem.
+ * @event focus - (React: onFocus) This event is dispatched when the listitem receives focus.
  */
-declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {}>;
+declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {
+    onClick: string;
+    onKeyDown: string;
+    onKeyUp: string;
+    onFocus: string;
+}>;
 export default reactWrapper;

package/dist/react/listitem/index.js

@@ -32,12 +32,23 @@ import { TAG_NAME } from '../../components/listitem/listitem.constants';
  *  - Allows customization of the primary label, side header and subline text slot color.
  * @cssproperty --mdc-listitem-secondary-label-color
  *  - Allows customization of the secondary and teritary label text slot color.
+ * @cssproperty --mdc-listitem-disabled-color - Allows customization of the disabled color.
+ *
+ * @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.
+ * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the listitem.
+ * @event focus - (React: onFocus) This event is dispatched when the listitem receives focus.
  */
 const reactWrapper = createComponent({
     tagName: TAG_NAME,
     elementClass: Component,
     react: React,
-    events: {},
+    events: {
+        onClick: 'click',
+        onKeyDown: 'keydown',
+        onKeyUp: 'keyup',
+        onFocus: 'focus',
+    },
     displayName: 'ListItem',
 });
 export default reactWrapper;

package/package.json

@@ -38,5 +38,5 @@
     "lit": "^3.2.0",
     "uuid": "^11.0.5"
   },
-  "version": "0.30.0"
+  "version": "0.31.0"
 }