@momentum-design/components 0.122.19 → 0.122.20

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

@@ -35,6 +35,8 @@ declare const Badge_base: import("../../utils/mixins/index.types").Constructor<i
  * @cssproperty --mdc-badge-error-foreground-color - The foreground color of the error badge.
  * @cssproperty --mdc-badge-error-background-color - The background color of the error badge.
  * @cssproperty --mdc-badge-overlay-background-color - The background color of the badge overlay.
+ * @cssproperty --mdc-badge-dot-width - The width of the dot badge. Default is 0.75rem (12px).
+ * @cssproperty --mdc-badge-dot-height - The height of the dot badge. Default is 0.75rem (12px).
  *
  * @csspart badge-dot - The dot notification badge.
  * @csspart badge-icon - The icon badge.

package/dist/components/badge/badge.component.js

@@ -49,6 +49,8 @@ import styles from './badge.styles';
  * @cssproperty --mdc-badge-error-foreground-color - The foreground color of the error badge.
  * @cssproperty --mdc-badge-error-background-color - The background color of the error badge.
  * @cssproperty --mdc-badge-overlay-background-color - The background color of the badge overlay.
+ * @cssproperty --mdc-badge-dot-width - The width of the dot badge. Default is 0.75rem (12px).
+ * @cssproperty --mdc-badge-dot-height - The height of the dot badge. Default is 0.75rem (12px).
  *
  * @csspart badge-dot - The dot notification badge.
  * @csspart badge-icon - The icon badge.

package/dist/components/badge/badge.styles.js

@@ -21,6 +21,9 @@ const styles = [
 
       --mdc-badge-overlay-background-color: var(--mds-color-theme-background-solid-primary-normal);
 
+      --mdc-badge-dot-width: 0.75rem;
+      --mdc-badge-dot-height: 0.75rem;
+
       color: var(--mdc-badge-primary-foreground-color);
     }
     :host::part(badge-overlay) {
@@ -35,8 +38,8 @@ const styles = [
       background-color: var(--mdc-badge-primary-background-color);
     }
     :host::part(badge-dot) {
-      width: 0.75rem;
-      height: 0.75rem;
+      width: var(--mdc-badge-dot-width);
+      height: var(--mdc-badge-dot-height);
       border-radius: 50%;
       background-color: var(--mdc-badge-primary-background-color);
     }

package/dist/components/navmenuitem/navmenuitem.styles.js

@@ -147,6 +147,17 @@ const styles = [
       left: -0.75rem;
       top: 0.875rem;
     }
+
+    :host mdc-badge {
+      --mdc-badge-dot-width: 1rem;
+      --mdc-badge-dot-height: 1rem;
+    }
+
+    @media (forced-colors: active) {
+      :host(:not([in-menupopover]))::before {
+        background-color: ButtonText;
+      }
+    }
   `,
     ...hostFocusRingStyles(),
 ];

package/dist/custom-elements.json

@@ -4389,6 +4389,14 @@
             {
               "description": "The background color of the badge overlay.",
               "name": "--mdc-badge-overlay-background-color"
+            },
+            {
+              "description": "The width of the dot badge. Default is 0.75rem (12px).",
+              "name": "--mdc-badge-dot-width"
+            },
+            {
+              "description": "The height of the dot badge. Default is 0.75rem (12px).",
+              "name": "--mdc-badge-dot-height"
             }
           ],
           "cssParts": [
@@ -4654,7 +4662,7 @@
             "module": "/src/models"
           },
           "tagName": "mdc-badge",
-          "jsDoc": "/**\n * The `mdc-badge` component is a versatile UI element used to\n * display dot, icons, counters, success, warning and error type badge.\n *\n * Supported badge types:\n * - `dot`: Displays a dot notification badge with a blue color.\n * - `icon`: Displays a badge with a specified icon using the `icon-name` attribute.\n * - `counter`: Displays a badge with a counter value. If the counter exceeds the `max-counter`,\n * it shows `maxCounter+`. The maximum value of the counter is 999 and anything above that will be set to `999+`.\n * - `success`: Displays a success badge with a check circle icon and green color.\n * - `warning`: Displays a warning badge with a warning icon and yellow color.\n * - `error`: Displays a error badge with a error legacy icon and red color.\n *\n * For `icon`, `success`, `warning` and `error` types, the `mdc-icon` component is used to render the icon.\n *\n * For the `counter` type, the `mdc-text` component is used to render the counter value.\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @tagname mdc-badge\n *\n * @cssproperty --mdc-badge-primary-foreground-color - The foreground color of the primary badge.\n * @cssproperty --mdc-badge-primary-background-color - The background color of the primary badge.\n * @cssproperty --mdc-badge-secondary-foreground-color - The foreground color of the secondary badge.\n * @cssproperty --mdc-badge-secondary-background-color - The background color of the secondary badge.\n * @cssproperty --mdc-badge-success-foreground-color - The foreground color of the success badge.\n * @cssproperty --mdc-badge-success-background-color - The background color of the success badge.\n * @cssproperty --mdc-badge-warning-foreground-color - The foreground color of the warning badge.\n * @cssproperty --mdc-badge-warning-background-color - The background color of the warning badge.\n * @cssproperty --mdc-badge-error-foreground-color - The foreground color of the error badge.\n * @cssproperty --mdc-badge-error-background-color - The background color of the error badge.\n * @cssproperty --mdc-badge-overlay-background-color - The background color of the badge overlay.\n *\n * @csspart badge-dot - The dot notification badge.\n * @csspart badge-icon - The icon badge.\n * @csspart badge-overlay - The overlay badge.\n * @csspart badge-text - The text badge.\n */",
+          "jsDoc": "/**\n * The `mdc-badge` component is a versatile UI element used to\n * display dot, icons, counters, success, warning and error type badge.\n *\n * Supported badge types:\n * - `dot`: Displays a dot notification badge with a blue color.\n * - `icon`: Displays a badge with a specified icon using the `icon-name` attribute.\n * - `counter`: Displays a badge with a counter value. If the counter exceeds the `max-counter`,\n * it shows `maxCounter+`. The maximum value of the counter is 999 and anything above that will be set to `999+`.\n * - `success`: Displays a success badge with a check circle icon and green color.\n * - `warning`: Displays a warning badge with a warning icon and yellow color.\n * - `error`: Displays a error badge with a error legacy icon and red color.\n *\n * For `icon`, `success`, `warning` and `error` types, the `mdc-icon` component is used to render the icon.\n *\n * For the `counter` type, the `mdc-text` component is used to render the counter value.\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @tagname mdc-badge\n *\n * @cssproperty --mdc-badge-primary-foreground-color - The foreground color of the primary badge.\n * @cssproperty --mdc-badge-primary-background-color - The background color of the primary badge.\n * @cssproperty --mdc-badge-secondary-foreground-color - The foreground color of the secondary badge.\n * @cssproperty --mdc-badge-secondary-background-color - The background color of the secondary badge.\n * @cssproperty --mdc-badge-success-foreground-color - The foreground color of the success badge.\n * @cssproperty --mdc-badge-success-background-color - The background color of the success badge.\n * @cssproperty --mdc-badge-warning-foreground-color - The foreground color of the warning badge.\n * @cssproperty --mdc-badge-warning-background-color - The background color of the warning badge.\n * @cssproperty --mdc-badge-error-foreground-color - The foreground color of the error badge.\n * @cssproperty --mdc-badge-error-background-color - The background color of the error badge.\n * @cssproperty --mdc-badge-overlay-background-color - The background color of the badge overlay.\n * @cssproperty --mdc-badge-dot-width - The width of the dot badge. Default is 0.75rem (12px).\n * @cssproperty --mdc-badge-dot-height - The height of the dot badge. Default is 0.75rem (12px).\n *\n * @csspart badge-dot - The dot notification badge.\n * @csspart badge-icon - The icon badge.\n * @csspart badge-overlay - The overlay badge.\n * @csspart badge-text - The text badge.\n */",
           "customElement": true
         }
       ],

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

@@ -32,6 +32,8 @@ import Component from '../../components/badge';
  * @cssproperty --mdc-badge-error-foreground-color - The foreground color of the error badge.
  * @cssproperty --mdc-badge-error-background-color - The background color of the error badge.
  * @cssproperty --mdc-badge-overlay-background-color - The background color of the badge overlay.
+ * @cssproperty --mdc-badge-dot-width - The width of the dot badge. Default is 0.75rem (12px).
+ * @cssproperty --mdc-badge-dot-height - The height of the dot badge. Default is 0.75rem (12px).
  *
  * @csspart badge-dot - The dot notification badge.
  * @csspart badge-icon - The icon badge.

package/dist/react/badge/index.js

@@ -35,6 +35,8 @@ import { TAG_NAME } from '../../components/badge/badge.constants';
  * @cssproperty --mdc-badge-error-foreground-color - The foreground color of the error badge.
  * @cssproperty --mdc-badge-error-background-color - The background color of the error badge.
  * @cssproperty --mdc-badge-overlay-background-color - The background color of the badge overlay.
+ * @cssproperty --mdc-badge-dot-width - The width of the dot badge. Default is 0.75rem (12px).
+ * @cssproperty --mdc-badge-dot-height - The height of the dot badge. Default is 0.75rem (12px).
  *
  * @csspart badge-dot - The dot notification badge.
  * @csspart badge-icon - The icon badge.

package/package.json

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