@momentum-design/components 0.85.9 → 0.86.0

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

@@ -77,6 +77,8 @@ declare class Dialog extends Dialog_base {
     visible: boolean;
     /**
      * The z-index of the dialog
+     *
+     * The backdrop will have z-index of `zIndex - 1`
      * @default 1000
      */
     zIndex: number;
@@ -165,6 +167,13 @@ declare class Dialog extends Dialog_base {
     protected lastActiveElement: HTMLElement | null;
     connectedCallback(): void;
     disconnectedCallback(): void;
+    /**
+     * Applies the z-index to the dialog and backdrop elements.
+     * The dialog will have a z-index of `zIndex` and the backdrop will have a z-index of `zIndex - 1`.
+     *
+     * @internal
+     */
+    private applyZIndex;
     protected firstUpdated(changedProperties: PropertyValues): Promise<void>;
     protected updated(changedProperties: PropertyValues): Promise<void>;
     /**

package/dist/components/dialog/dialog.component.js

@@ -90,6 +90,8 @@ class Dialog extends PreventScrollMixin(FocusTrapMixin(CardAndDialogFooterMixin(
         this.visible = DEFAULTS.VISIBLE;
         /**
          * The z-index of the dialog
+         *
+         * The backdrop will have z-index of `zIndex - 1`
          * @default 1000
          */
         this.zIndex = DEFAULTS.Z_INDEX;
@@ -203,11 +205,22 @@ class Dialog extends PreventScrollMixin(FocusTrapMixin(CardAndDialogFooterMixin(
         this.focusBackToTrigger();
         DialogEventManager.onDestroyedDialog(this);
     }
+    /**
+     * Applies the z-index to the dialog and backdrop elements.
+     * The dialog will have a z-index of `zIndex` and the backdrop will have a z-index of `zIndex - 1`.
+     *
+     * @internal
+     */
+    applyZIndex() {
+        var _a;
+        this.style.setProperty('z-index', `${this.zIndex}`);
+        (_a = this.backdropElement) === null || _a === void 0 ? void 0 : _a.style.setProperty('z-index', `${this.zIndex - 1}`);
+    }
     async firstUpdated(changedProperties) {
         super.firstUpdated(changedProperties);
         this.setAttribute('aria-modal', 'true');
         this.setupAriaLabelledDescribedBy();
-        this.style.zIndex = `${this.zIndex}`;
+        this.applyZIndex();
         DialogEventManager.onCreatedDialog(this);
     }
     async updated(changedProperties) {
@@ -221,7 +234,12 @@ class Dialog extends PreventScrollMixin(FocusTrapMixin(CardAndDialogFooterMixin(
             await this.isOpenUpdated(oldValue, this.visible);
         }
         if (changedProperties.has('zIndex')) {
-            this.setAttribute('z-index', `${this.zIndex}`);
+            // If zIndex is not set, use the default value
+            // This is to ensure that the dialog has always a z-index set even if not explicitly defined
+            if (this.zIndex === null) {
+                this.zIndex = DEFAULTS.Z_INDEX;
+            }
+            this.applyZIndex();
         }
         if (changedProperties.has('variant')) {
             this.updateFooterButtonColors(this.variant);

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

@@ -62,7 +62,7 @@ declare class MenuItemCheckbox extends MenuItem {
      * If the menuitemcheckbox is disabled, it does nothing.
      * If the menuitemcheckbox is not disabled, it toggles the `checked` state between `true` and `false`.
      */
-    private menuitemcheckboxHandleClick;
+    private handleMouseClick;
     update(changedProperties: PropertyValues): void;
     /**
      * Returns a static checkbox element if the indicator is set to checkbox.

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

@@ -76,14 +76,14 @@ class MenuItemCheckbox extends MenuItem {
          * If the menuitemcheckbox is disabled, it does nothing.
          * If the menuitemcheckbox is not disabled, it toggles the `checked` state between `true` and `false`.
          */
-        this.menuitemcheckboxHandleClick = (event) => {
+        this.handleMouseClick = (event) => {
             event.stopPropagation();
             if (this.disabled)
                 return;
             this.checked = !this.checked;
             this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
         };
-        this.addEventListener('click', this.menuitemcheckboxHandleClick);
+        this.addEventListener('click', this.handleMouseClick);
     }
     connectedCallback() {
         super.connectedCallback();
@@ -101,16 +101,16 @@ class MenuItemCheckbox extends MenuItem {
      * @returns TemplateResult | typeof nothing
      */
     staticCheckbox() {
-        if (this.indicator !== INDICATOR.CHECKBOX) {
-            return nothing;
+        if (this.indicator === INDICATOR.CHECKBOX) {
+            return html `
+        <mdc-staticcheckbox
+          slot="leading-controls"
+          ?checked="${this.checked}"
+          ?disabled="${this.disabled}"
+        ></mdc-staticcheckbox>
+      `;
         }
-        return html `
-      <mdc-staticcheckbox
-        slot="leading-controls"
-        ?checked="${this.checked}"
-        ?disabled="${this.disabled}"
-      ></mdc-staticcheckbox>
-    `;
+        return nothing;
     }
     /**
      * Returns a static toggle element if the indicator is set to toggle.
@@ -120,17 +120,17 @@ class MenuItemCheckbox extends MenuItem {
      * @returns TemplateResult | typeof nothing
      */
     staticToggle() {
-        if (this.indicator !== INDICATOR.TOGGLE) {
-            return nothing;
+        if (this.indicator === INDICATOR.TOGGLE) {
+            return html `
+        <mdc-statictoggle
+          slot="trailing-controls"
+          ?checked="${this.checked}"
+          ?disabled="${this.disabled}"
+          size="${TOGGLE_SIZE.COMPACT}"
+        ></mdc-statictoggle>
+      `;
         }
-        return html `
-      <mdc-statictoggle
-        slot="trailing-controls"
-        ?checked="${this.checked}"
-        ?disabled="${this.disabled}"
-        size="${TOGGLE_SIZE.COMPACT}"
-      ></mdc-statictoggle>
-    `;
+        return nothing;
     }
     /**
      * Returns a checkmark icon if the indicator is set to checkmark and the checked state is true.

package/dist/components/menuitemradio/index.d.ts

@@ -1,3 +1,4 @@
+import '../icon';
 import '../staticradio';
 import '../text';
 import '../tooltip';

package/dist/components/menuitemradio/index.js

@@ -1,3 +1,4 @@
+import '../icon';
 import '../staticradio';
 import '../text';
 import '../tooltip';

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

@@ -27,8 +27,10 @@ import { Indicator } from './menuitemradio.types';
  * For example, you can use a custom icon or a different visual element to indicate the state of the menu item.
  * Make sure the new indicator is accessible.
  *
+ * @dependency mdc-icon
  * @dependency mdc-staticradio
  * @dependency mdc-text
+ * @dependency mdc-tooltip
  *
  * @tagname mdc-menuitemradio
  *
@@ -72,7 +74,7 @@ declare class MenuItemRadio extends MenuItem {
      * If the menuitemradio is not checked, it sets its checked state to `true`
      * and sets all other menuitemradio elements of the same group with checked state to `false`.
      */
-    private radioHandleClick;
+    private handleMouseClick;
     update(changedProperties: PropertyValues): void;
     /**
      * Returns a static checkbox element if the indicator is set to checkbox.

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

@@ -42,8 +42,10 @@ import styles from './menuitemradio.styles';
  * For example, you can use a custom icon or a different visual element to indicate the state of the menu item.
  * Make sure the new indicator is accessible.
  *
+ * @dependency mdc-icon
  * @dependency mdc-staticradio
  * @dependency mdc-text
+ * @dependency mdc-tooltip
  *
  * @tagname mdc-menuitemradio
  *
@@ -77,7 +79,7 @@ class MenuItemRadio extends MenuItem {
          * If the menuitemradio is not checked, it sets its checked state to `true`
          * and sets all other menuitemradio elements of the same group with checked state to `false`.
          */
-        this.radioHandleClick = (event) => {
+        this.handleMouseClick = (event) => {
             event.stopPropagation();
             if (this.disabled || this.checked)
                 return;
@@ -85,7 +87,7 @@ class MenuItemRadio extends MenuItem {
             this.checked = true;
             this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
         };
-        this.addEventListener('click', this.radioHandleClick);
+        this.addEventListener('click', this.handleMouseClick);
     }
     connectedCallback() {
         super.connectedCallback();
@@ -108,9 +110,9 @@ class MenuItemRadio extends MenuItem {
     updateOtherRadiosCheckedState() {
         const radios = this.getAllRadiosWithinSameGroup();
         radios.forEach(radio => {
-            // eslint-disable-next-line no-param-reassign
-            if (radio !== this)
-                radio.checked = false;
+            if (radio !== this) {
+                radio.removeAttribute('checked');
+            }
         });
     }
     update(changedProperties) {
@@ -128,16 +130,16 @@ class MenuItemRadio extends MenuItem {
      * @returns TemplateResult | typeof nothing
      */
     renderStaticRadio() {
-        if (this.indicator !== INDICATOR.RADIO) {
-            return nothing;
+        if (this.indicator === INDICATOR.RADIO) {
+            return html `
+        <mdc-staticradio
+          slot="leading-controls"
+          ?checked="${this.checked}"
+          ?disabled="${this.disabled}"
+        ></mdc-staticradio>
+      `;
         }
-        return html `
-      <mdc-staticradio
-        slot="leading-controls"
-        ?checked="${this.checked}"
-        ?disabled="${this.disabled}"
-      ></mdc-staticradio>
-    `;
+        return nothing;
     }
     /**
      * Returns a checkmark icon if the indicator is set to checkmark and the checked state is true.

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

@@ -75,7 +75,7 @@ __decorate([
     __metadata("design:type", Object)
 ], MenuSection.prototype, "ariaLabel", void 0);
 __decorate([
-    property({ type: String, reflect: true }),
+    property({ type: String, reflect: true, attribute: 'header-text' }),
     __metadata("design:type", Object)
 ], MenuSection.prototype, "headerText", void 0);
 export default MenuSection;