@momentum-design/components 0.122.19 → 0.122.21

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/components/tooltip/tooltip.component.d.ts

@@ -30,12 +30,7 @@ declare class Tooltip extends Popover {
      * @default 'description'
      */
     tooltipType: TooltipType;
-    private defaultSlotNodes;
     connectedCallback(): void;
-    /**
-     * @returns The tooltip text.
-     */
-    private getTooltipText;
     /**
      * Sets the type attribute for the tooltip component.
      * If the provided type is not included in the TOOLTIP_TYPES,

package/dist/components/tooltip/tooltip.component.js

@@ -7,7 +7,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 var __metadata = (this && this.__metadata) || function (k, v) {
     if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
 };
-import { property, queryAssignedNodes } from 'lit/decorators.js';
+import { property } from 'lit/decorators.js';
 import { v4 as uuidv4 } from 'uuid';
 import { ROLE } from '../../utils/roles';
 import Popover from '../popover/popover.component';
@@ -66,13 +66,6 @@ class Tooltip extends Popover {
         this.size = false;
         this.disableAriaExpanded = true;
     }
-    /**
-     * @returns The tooltip text.
-     */
-    getTooltipText() {
-        var _a, _b;
-        return (((_b = (_a = this.defaultSlotNodes) === null || _a === void 0 ? void 0 : _a.map(node => node.textContent).join(' ')) === null || _b === void 0 ? void 0 : _b.trim()) || '');
-    }
     /**
      * Sets the type attribute for the tooltip component.
      * If the provided type is not included in the TOOLTIP_TYPES,
@@ -125,7 +118,6 @@ class Tooltip extends Popover {
             this.setTooltipType(DEFAULTS.TOOLTIP_TYPE);
         }
         if (this.triggerElement) {
-            const tooltipText = this.getTooltipText();
             switch (this.tooltipType) {
                 case TOOLTIP_TYPES.DESCRIPTION:
                     if (previousTooltipType === TOOLTIP_TYPES.LABEL) {
@@ -148,9 +140,6 @@ class Tooltip extends Popover {
                     }
                     break;
             }
-            if (tooltipText.length > 0 && this.tooltipType !== TOOLTIP_TYPES.NONE && !this.ariaLabel) {
-                this.ariaLabel = tooltipText;
-            }
         }
     }
     async update(changedProperties) {
@@ -171,8 +160,4 @@ __decorate([
     property({ type: String, attribute: 'tooltip-type', reflect: true }),
     __metadata("design:type", String)
 ], Tooltip.prototype, "tooltipType", void 0);
-__decorate([
-    queryAssignedNodes(),
-    __metadata("design:type", Array)
-], Tooltip.prototype, "defaultSlotNodes", void 0);
 export default Tooltip;

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
         }
       ],
@@ -51077,24 +51085,6 @@
               "attribute": "tooltip-type",
               "reflects": true
             },
-            {
-              "kind": "field",
-              "name": "defaultSlotNodes",
-              "type": {
-                "text": "Array<Node>"
-              },
-              "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "getTooltipText",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": ""
-                }
-              }
-            },
             {
               "kind": "method",
               "name": "setTooltipType",

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.21",
   "engines": {
     "node": ">=20.0.0",
     "npm": ">=8.0.0"