@momentum-design/components 0.104.7 → 0.104.9

package/dist/components/menuitemcheckbox/menuitemcheckbox.component.js

@@ -154,23 +154,25 @@ class MenuItemCheckbox extends MenuItem {
     }
     render() {
         return html `
-      <div part="leading">
-        ${this.staticCheckbox()}
-        <slot name="leading-controls"></slot>
-        <div part="leading-text">
-          ${this.getText('leading-text-primary-label', TYPE.BODY_MIDSIZE_REGULAR, this.label)}
-          ${this.getText('leading-text-secondary-label', TYPE.BODY_SMALL_REGULAR, this.secondaryLabel)}
-          ${this.getText('leading-text-tertiary-label', TYPE.BODY_SMALL_REGULAR, this.tertiaryLabel)}
+      <slot name="content">
+        <div part="leading">
+          ${this.staticCheckbox()}
+          <slot name="leading-controls"></slot>
+          <div part="leading-text">
+            ${this.getText('leading-text-primary-label', TYPE.BODY_MIDSIZE_REGULAR, this.label)}
+            ${this.getText('leading-text-secondary-label', TYPE.BODY_SMALL_REGULAR, this.secondaryLabel)}
+            ${this.getText('leading-text-tertiary-label', TYPE.BODY_SMALL_REGULAR, this.tertiaryLabel)}
+          </div>
         </div>
-      </div>
-      <div part="trailing">
-        <div part="trailing-text">
-          ${this.getText('trailing-text-side-header', TYPE.BODY_MIDSIZE_REGULAR, this.sideHeaderText)}
-          ${this.getText('trailing-text-subline', TYPE.BODY_SMALL_REGULAR, this.sublineText)}
+        <div part="trailing">
+          <div part="trailing-text">
+            ${this.getText('trailing-text-side-header', TYPE.BODY_MIDSIZE_REGULAR, this.sideHeaderText)}
+            ${this.getText('trailing-text-subline', TYPE.BODY_SMALL_REGULAR, this.sublineText)}
+          </div>
+          <slot name="trailing-controls"></slot>
+          ${this.staticToggle()} ${this.getCheckmarkIcon()}
         </div>
-        <slot name="trailing-controls"></slot>
-        ${this.staticToggle()} ${this.getCheckmarkIcon()}
-      </div>
+      </slot>
     `;
     }
 }

package/dist/components/menuitemradio/menuitemradio.component.js

@@ -163,23 +163,25 @@ class MenuItemRadio extends MenuItem {
     }
     render() {
         return html `
-      <div part="leading">
-        ${this.renderStaticRadio()}
-        <slot name="leading-controls"></slot>
-        <div part="leading-text">
-          ${this.getText('leading-text-primary-label', TYPE.BODY_MIDSIZE_REGULAR, this.label)}
-          ${this.getText('leading-text-secondary-label', TYPE.BODY_SMALL_REGULAR, this.secondaryLabel)}
-          ${this.getText('leading-text-tertiary-label', TYPE.BODY_SMALL_REGULAR, this.tertiaryLabel)}
+      <slot name="content">
+        <div part="leading">
+          ${this.renderStaticRadio()}
+          <slot name="leading-controls"></slot>
+          <div part="leading-text">
+            ${this.getText('leading-text-primary-label', TYPE.BODY_MIDSIZE_REGULAR, this.label)}
+            ${this.getText('leading-text-secondary-label', TYPE.BODY_SMALL_REGULAR, this.secondaryLabel)}
+            ${this.getText('leading-text-tertiary-label', TYPE.BODY_SMALL_REGULAR, this.tertiaryLabel)}
+          </div>
         </div>
-      </div>
-      <div part="trailing">
-        <div part="trailing-text">
-          ${this.getText('trailing-text-side-header', TYPE.BODY_MIDSIZE_REGULAR, this.sideHeaderText)}
-          ${this.getText('trailing-text-subline', TYPE.BODY_SMALL_REGULAR, this.sublineText)}
+        <div part="trailing">
+          <div part="trailing-text">
+            ${this.getText('trailing-text-side-header', TYPE.BODY_MIDSIZE_REGULAR, this.sideHeaderText)}
+            ${this.getText('trailing-text-subline', TYPE.BODY_SMALL_REGULAR, this.sublineText)}
+          </div>
+          <slot name="trailing-controls"></slot>
+          ${this.renderCheckmarkIcon()}
         </div>
-        <slot name="trailing-controls"></slot>
-        ${this.renderCheckmarkIcon()}
-      </div>
+      </slot>
     `;
     }
 }

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

@@ -15,6 +15,7 @@ import type { IconNames } from '../icon/icon.types';
  * @slot - Default slot for inserting `menuitem`, `menuitemcheckbox`, or `menuitemradio`
  *
  * @event change - (React: onChange) This event is dispatched when a `menuitemcheckbox`, or `menuitemradio` changes.
+ * @event action - (React: onAction) This event is dispatched when a `menuitem` selected.
  */
 declare class MenuSection extends Component {
     /**

package/dist/components/menusection/menusection.component.js

@@ -30,6 +30,7 @@ import { DEFAULTS } from './menusection.constants';
  * @slot - Default slot for inserting `menuitem`, `menuitemcheckbox`, or `menuitemradio`
  *
  * @event change - (React: onChange) This event is dispatched when a `menuitemcheckbox`, or `menuitemradio` changes.
+ * @event action - (React: onAction) This event is dispatched when a `menuitem` selected.
  */
 class MenuSection extends Component {
     constructor() {
@@ -106,7 +107,7 @@ class MenuSection extends Component {
     render() {
         return html `
       ${!this.hideHeaderText ? this.renderHeader() : null}
-      <slot></slot>
+      <slot part="container"></slot>
       ${this.showDivider ? html `<mdc-divider variant="${this.dividerVariant}" part="divider"></mdc-divider>` : null}
     `;
     }

package/dist/components/menusection/menusection.types.d.ts

@@ -1,6 +1,8 @@
 import type { TypedCustomEvent } from '../../utils/types';
 import type MenuItem from '../menuitem/menuitem.component';
 export type MenuSectionChangeEvent = TypedCustomEvent<MenuItem>;
+export type MenuSectionActionEvent = TypedCustomEvent<MenuItem>;
 export interface Events {
     onChangeEvent: MenuSectionChangeEvent;
+    onActionEvent: MenuSectionActionEvent;
 }

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

@@ -201,10 +201,10 @@ declare class Popover extends Popover_base {
      */
     backdropAppendTo?: string;
     /**
-     * Set this property to true to make the backdrop invisible (if `backdrop` is true).
-     * This is useful for components that do want a backdrop which stops interaction,
-     * but do not want the backdrop to be visible as a overlay.
-     * @default false
+     * Set this property to false to make the backdrop a dimmed visible backdrop (if `backdrop` is true).
+     * This is useful for cases where the popovers backdrop should get dimmed.
+     *
+     * @default true - default is to have a invisible backdrop
      */
     isBackdropInvisible?: boolean;
     /**

package/dist/components/popover/popover.component.js

@@ -206,10 +206,10 @@ class Popover extends BackdropMixin(PreventScrollMixin(FocusTrapMixin(Component)
          */
         this.backdrop = DEFAULTS.BACKDROP;
         /**
-         * Set this property to true to make the backdrop invisible (if `backdrop` is true).
-         * This is useful for components that do want a backdrop which stops interaction,
-         * but do not want the backdrop to be visible as a overlay.
-         * @default false
+         * Set this property to false to make the backdrop a dimmed visible backdrop (if `backdrop` is true).
+         * This is useful for cases where the popovers backdrop should get dimmed.
+         *
+         * @default true - default is to have a invisible backdrop
          */
         this.isBackdropInvisible = DEFAULTS.IS_BACKDROP_INVISIBLE;
         /**

package/dist/components/popover/popover.constants.d.ts

@@ -52,6 +52,6 @@ declare const DEFAULTS: {
     readonly PROPAGATE_EVENT_ON_ESCAPE: false;
     readonly KEEP_CONNECTED_TOOLTIP_CLOSED: true;
     readonly STRATEGY: "absolute";
-    readonly IS_BACKDROP_INVISIBLE: false;
+    readonly IS_BACKDROP_INVISIBLE: true;
 };
 export { TAG_NAME, POPOVER_PLACEMENT, COLOR, TRIGGER, DEFAULTS };

package/dist/components/popover/popover.constants.js

@@ -53,6 +53,6 @@ const DEFAULTS = {
     PROPAGATE_EVENT_ON_ESCAPE: false,
     KEEP_CONNECTED_TOOLTIP_CLOSED: true,
     STRATEGY: 'absolute',
-    IS_BACKDROP_INVISIBLE: false,
+    IS_BACKDROP_INVISIBLE: true,
 };
 export { TAG_NAME, POPOVER_PLACEMENT, COLOR, TRIGGER, DEFAULTS };

package/dist/components/select/select.component.js

@@ -557,7 +557,6 @@ class Select extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)) {
           role=""
           backdrop
           backdrop-append-to="${ifDefined(this.backdropAppendTo)}"
-          is-backdrop-invisible
           hide-on-outside-click
           hide-on-escape
           focus-back-to-trigger