@momentum-design/components 0.122.18 → 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/buttongroup/buttongroup.component.d.ts

@@ -2,9 +2,24 @@ import { CSSResult, PropertyValues } from 'lit';
 import { Component } from '../../models';
 import type { ButtonGroupOrientation, ButtonGroupSize, ButtonGroupVariant } from './buttongroup.types';
 /**
- * buttongroup component, is a styled wrapper for multiple buttons.
+ * buttongroup component, is a wrapper to group multiple buttons.
  * It can support icon buttons, combination of icon and pill buttons, and text buttons.
- * They are available in horizontal and vertical orientation.
+ * Button group can be positioned in horizontal orientation and vertical orientation.
+ *
+ * The sizes of buttons within the button group can be set using the `size` attribute on the button group,
+ * which will apply the size to all buttons within the group.
+ *
+ * Buttons of sizes 24, 28, 32, and 40 are only supported inside a button group. Default size is 28.
+ *
+ * The variant of buttons within the button group can be set using the `variant` attribute on the button group,
+ * which will apply the variant to all buttons within the group. Default variant is `primary`.
+ *
+ * All buttons are placed horizontally by default. To change the orientation to vertical, set the `orientation` attribute to `vertical`.
+ *
+ * Things to note:
+ * - Button group will allow only `mdc-button` components as its direct children.
+ * - Button group will set the `size` and `variant` attributes on the buttons within it,
+ *   so any `size` or `variant` set directly on any button will be overridden.
  *
  * @tagname mdc-buttongroup
  *

package/dist/components/buttongroup/buttongroup.component.js

@@ -13,9 +13,24 @@ import { Component } from '../../models';
 import { DEFAULTS } from './buttongroup.constants';
 import styles from './buttongroup.styles';
 /**
- * buttongroup component, is a styled wrapper for multiple buttons.
+ * buttongroup component, is a wrapper to group multiple buttons.
  * It can support icon buttons, combination of icon and pill buttons, and text buttons.
- * They are available in horizontal and vertical orientation.
+ * Button group can be positioned in horizontal orientation and vertical orientation.
+ *
+ * The sizes of buttons within the button group can be set using the `size` attribute on the button group,
+ * which will apply the size to all buttons within the group.
+ *
+ * Buttons of sizes 24, 28, 32, and 40 are only supported inside a button group. Default size is 28.
+ *
+ * The variant of buttons within the button group can be set using the `variant` attribute on the button group,
+ * which will apply the variant to all buttons within the group. Default variant is `primary`.
+ *
+ * All buttons are placed horizontally by default. To change the orientation to vertical, set the `orientation` attribute to `vertical`.
+ *
+ * Things to note:
+ * - Button group will allow only `mdc-button` components as its direct children.
+ * - Button group will set the `size` and `variant` attributes on the buttons within it,
+ *   so any `size` or `variant` set directly on any button will be overridden.
  *
  * @tagname mdc-buttongroup
  *

package/dist/components/buttongroup/buttongroup.styles.js

@@ -57,14 +57,14 @@ const styles = css `
     position: absolute;
     height: 100%;
     border-inline-end: var(--mdc-buttongroup-border-width) solid var(--mdc-buttongroup-divider-color);
-    inset-inline-end: calc(var(--mdc-buttongroup-border-width) / 2);
+    inset-inline-start: 100%;
   }
   :host([variant='secondary'][orientation='vertical']) ::slotted(mdc-button:not(:last-of-type))::after {
     content: '';
     position: absolute;
     width: 100%;
     border-block-end: var(--mdc-buttongroup-border-width) solid var(--mdc-buttongroup-divider-color);
-    inset-block-end: calc(var(--mdc-buttongroup-border-width) / 2);
+    inset-block-end: 0%;
   }
 
   :host([orientation='vertical']) ::slotted(mdc-button:first-of-type) {

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(),
 ];