@momentum-design/components 0.122.20 → 0.122.22

package/dist/components/announcementdialog/announcementdialog.styles.js

@@ -16,7 +16,7 @@ const styles = css `
     background-position: right;
   }
   :host::part(body) {
-    margin-top: 2rem !important;
+    padding-top: 2rem !important;
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(0px, 1fr));
   }

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

@@ -8,6 +8,10 @@ declare const Dialog_base: import("../../utils/mixins/index.types").Constructor<
  * The dialog is available in 5 sizes: small, medium, large, xlarge and fullscreen. It may also receive custom styling/sizing.
  * The dialog interrupts the user and will block interaction with the rest of the application until it is closed.
  *
+ * Dialog component have 2 variants: default and promotional.
+ *
+ * ## Visibility
+ *
  * The dialog can be controlled solely through the `visible` property, no trigger element is required.
  * If a `triggerId` is provided, the dialog will manage focus with that element, otherwise it will
  * remember the previously focused element before the dialog was opened.
@@ -17,16 +21,21 @@ declare const Dialog_base: import("../../utils/mixins/index.types").Constructor<
  * Use the `onClose` event to handle the close action of the dialog (fired when Close button is clicked
  * or Escape is pressed).
  *
- * Dialog component have 2 variants: default and promotional.
+ * ## Accessibility
  *
- * **Accessibility notes for consuming (have to be explicitly set when you consume the component)**
+ * Some attributes have to be explicitly set by the consumer of the component:
  *
  * - The dialog should have an aria-label or aria-labelledby attribute to provide a label for screen readers.
  * - Use aria-labelledby to reference the ID of the element that labels the dialog when there is no visible title.
  *
- * **Note: Programmatic show/hide requires the ? prefix on the visible attribute**
- * - Use `?visible=true/false` as an attribute instead of `visible=true/false`
- * - Reference docs for more info: https://lit.dev/docs/templates/expressions/#boolean-attribute-expressions
+ * ## Responsive design
+ *
+ * Dialog has few built in logic to prevent content clipping on small screens
+ *
+ * - maximum height limited to the viewport height
+ * - dialog body has `overflow: auto` by default
+ * - dialog itself also has `overflow: auto`, it activates only when the body can not shrink more
+ *
  *
  * @dependency mdc-button
  * @dependency mdc-text

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

@@ -26,6 +26,10 @@ import styles from './dialog.styles';
  * The dialog is available in 5 sizes: small, medium, large, xlarge and fullscreen. It may also receive custom styling/sizing.
  * The dialog interrupts the user and will block interaction with the rest of the application until it is closed.
  *
+ * Dialog component have 2 variants: default and promotional.
+ *
+ * ## Visibility
+ *
  * The dialog can be controlled solely through the `visible` property, no trigger element is required.
  * If a `triggerId` is provided, the dialog will manage focus with that element, otherwise it will
  * remember the previously focused element before the dialog was opened.
@@ -35,16 +39,21 @@ import styles from './dialog.styles';
  * Use the `onClose` event to handle the close action of the dialog (fired when Close button is clicked
  * or Escape is pressed).
  *
- * Dialog component have 2 variants: default and promotional.
+ * ## Accessibility
  *
- * **Accessibility notes for consuming (have to be explicitly set when you consume the component)**
+ * Some attributes have to be explicitly set by the consumer of the component:
  *
  * - The dialog should have an aria-label or aria-labelledby attribute to provide a label for screen readers.
  * - Use aria-labelledby to reference the ID of the element that labels the dialog when there is no visible title.
  *
- * **Note: Programmatic show/hide requires the ? prefix on the visible attribute**
- * - Use `?visible=true/false` as an attribute instead of `visible=true/false`
- * - Reference docs for more info: https://lit.dev/docs/templates/expressions/#boolean-attribute-expressions
+ * ## Responsive design
+ *
+ * Dialog has few built in logic to prevent content clipping on small screens
+ *
+ * - maximum height limited to the viewport height
+ * - dialog body has `overflow: auto` by default
+ * - dialog itself also has `overflow: auto`, it activates only when the body can not shrink more
+ *
  *
  * @dependency mdc-button
  * @dependency mdc-text

package/dist/components/dialog/dialog.styles.js

@@ -25,22 +25,22 @@ const styles = css `
     transform: translate(50%, 50%);
   }
 
-  :host > [part="body"]:first-of-type {
-    margin-top: 0;
+  :host > [part='body']:first-of-type {
+    padding-top: 0;
   }
 
-  :host > [part="dialog-close-btn"] {
+  :host > [part='dialog-close-btn'] {
     margin-top: 0;
   }
 
-  :host > slot[name="footer"] {
+  :host > slot[name='footer'] {
     margin-top: 0;
   }
 
-  slot[name="footer-link"]::slotted(*),
-  slot[name="footer-button-primary"]::slotted(*),
-  slot[name="footer-button-secondary"]::slotted(*),
-  slot[name="footer"]::slotted(*) {
+  slot[name='footer-link']::slotted(*),
+  slot[name='footer-button-primary']::slotted(*),
+  slot[name='footer-button-secondary']::slotted(*),
+  slot[name='footer']::slotted(*) {
     margin-top: 1rem;
   }
 
@@ -75,12 +75,15 @@ const styles = css `
     height: 100%;
     border: none;
     border-radius: 0;
+    max-height: 100vh;
   }
 
   :host {
     width: var(--mdc-dialog-width);
     height: var(--mdc-dialog-height);
     max-width: 100%;
+    max-height: calc(100vh - 2rem);
+    overflow-y: auto;
   }
 
   :host::part(header-section),
@@ -118,7 +121,8 @@ const styles = css `
     align-items: center;
     height: 100%;
     width: 100%;
-    margin-top: 1rem;
+    padding-top: 1rem;
+    overflow-y: auto;
   }
 
   :host::part(footer) {

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

@@ -15194,7 +15194,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "Dialog component is a modal dialog that can be used to display information or prompt the user for input.\nIt can be used to create custom dialogs where content for the body and footer actions is provided by the consumer.\nThe dialog is available in 5 sizes: small, medium, large, xlarge and fullscreen. It may also receive custom styling/sizing.\nThe dialog interrupts the user and will block interaction with the rest of the application until it is closed.\n\nThe dialog can be controlled solely through the `visible` property, no trigger element is required.\nIf a `triggerId` is provided, the dialog will manage focus with that element, otherwise it will\nremember the previously focused element before the dialog was opened.\n\nThe dialog is a controlled component, meaning it does not have its own state management for visibility.\nUse the `visible` property to control the visibility of the dialog.\nUse the `onClose` event to handle the close action of the dialog (fired when Close button is clicked\nor Escape is pressed).\n\nDialog component have 2 variants: default and promotional.\n\n**Accessibility notes for consuming (have to be explicitly set when you consume the component)**\n\n- The dialog should have an aria-label or aria-labelledby attribute to provide a label for screen readers.\n- Use aria-labelledby to reference the ID of the element that labels the dialog when there is no visible title.\n\n**Note: Programmatic show/hide requires the ? prefix on the visible attribute**\n- Use `?visible=true/false` as an attribute instead of `visible=true/false`\n- Reference docs for more info: https://lit.dev/docs/templates/expressions/#boolean-attribute-expressions",
+          "description": "Dialog component is a modal dialog that can be used to display information or prompt the user for input.\nIt can be used to create custom dialogs where content for the body and footer actions is provided by the consumer.\nThe dialog is available in 5 sizes: small, medium, large, xlarge and fullscreen. It may also receive custom styling/sizing.\nThe dialog interrupts the user and will block interaction with the rest of the application until it is closed.\n\nDialog component have 2 variants: default and promotional.\n\n## Visibility\n\nThe dialog can be controlled solely through the `visible` property, no trigger element is required.\nIf a `triggerId` is provided, the dialog will manage focus with that element, otherwise it will\nremember the previously focused element before the dialog was opened.\n\nThe dialog is a controlled component, meaning it does not have its own state management for visibility.\nUse the `visible` property to control the visibility of the dialog.\nUse the `onClose` event to handle the close action of the dialog (fired when Close button is clicked\nor Escape is pressed).\n\n## Accessibility\n\nSome attributes have to be explicitly set by the consumer of the component:\n\n- The dialog should have an aria-label or aria-labelledby attribute to provide a label for screen readers.\n- Use aria-labelledby to reference the ID of the element that labels the dialog when there is no visible title.\n\n## Responsive design\n\nDialog has few built in logic to prevent content clipping on small screens\n\n- maximum height limited to the viewport height\n- dialog body has `overflow: auto` by default\n- dialog itself also has `overflow: auto`, it activates only when the body can not shrink more",
           "name": "Dialog",
           "cssProperties": [
             {
@@ -16262,7 +16262,7 @@
             "module": "/src/models"
           },
           "tagName": "mdc-dialog",
-          "jsDoc": "/**\n * Dialog component is a modal dialog that can be used to display information or prompt the user for input.\n * It can be used to create custom dialogs where content for the body and footer actions is provided by the consumer.\n * The dialog is available in 5 sizes: small, medium, large, xlarge and fullscreen. It may also receive custom styling/sizing.\n * The dialog interrupts the user and will block interaction with the rest of the application until it is closed.\n *\n * The dialog can be controlled solely through the `visible` property, no trigger element is required.\n * If a `triggerId` is provided, the dialog will manage focus with that element, otherwise it will\n * remember the previously focused element before the dialog was opened.\n *\n * The dialog is a controlled component, meaning it does not have its own state management for visibility.\n * Use the `visible` property to control the visibility of the dialog.\n * Use the `onClose` event to handle the close action of the dialog (fired when Close button is clicked\n * or Escape is pressed).\n *\n * Dialog component have 2 variants: default and promotional.\n *\n * **Accessibility notes for consuming (have to be explicitly set when you consume the component)**\n *\n * - The dialog should have an aria-label or aria-labelledby attribute to provide a label for screen readers.\n * - Use aria-labelledby to reference the ID of the element that labels the dialog when there is no visible title.\n *\n * **Note: Programmatic show/hide requires the ? prefix on the visible attribute**\n * - Use `?visible=true/false` as an attribute instead of `visible=true/false`\n * - Reference docs for more info: https://lit.dev/docs/templates/expressions/#boolean-attribute-expressions\n *\n * @dependency mdc-button\n * @dependency mdc-text\n *\n * @tagname mdc-dialog\n *\n * @event shown - (React: onShown) Dispatched when the dialog is shown\n * @event hidden - (React: onHidden) Dispatched when the dialog is hidden\n * @event created - (React: onCreated) Dispatched when the dialog is created (added to the DOM)\n * @event destroyed - (React: onDestroyed) Dispatched when the dialog is destroyed (removed from the DOM)\n * @event close - (React: onClose) Dispatched when the Close Button is clicked or Escape key is pressed\n * (this does not hide the dialog)\n *\n * @cssproperty --mdc-dialog-primary-background-color - primary background color of the dialog\n * @cssproperty --mdc-dialog-border-color - border color of the dialog\n * @cssproperty --mdc-dialog-header-text-color - text color of the header/title of the dialog\n * @cssproperty --mdc-dialog-description-text-color - text color of the below header description of the dialog\n * @cssproperty --mdc-dialog-elevation-3 - elevation of the dialog\n * @cssproperty --mdc-dialog-width - width of the dialog\n * @cssproperty --mdc-dialog-height - height of the dialog\n *\n * @csspart body - The body section of the dialog.\n * @csspart description-text - The description text of the dialog.\n * @csspart dialog-close-btn - The close button of the dialog.\n * @csspart header - The header of the dialog.\n * @csspart header-section - The header section of the dialog.\n * @csspart header-text - The header text of the dialog.\n *\n * @slot header-prefix - Slot for the dialog header content. This can be used to pass custom header content.\n * @slot dialog-body - Slot for the dialog body content\n * @slot footer-link - This slot is for passing `mdc-link` component within the footer section.\n * @slot footer-button-secondary - This slot is for passing secondary variant of `mdc-button` component\n * within the footer section.\n * @slot footer-button-primary - This slot is for passing primary variant of\n * `mdc-button` component within the footer section.\n * @slot footer -  This slot is for passing custom footer content. Only use this if really needed,\n * using the footer-link and footer-button slots is preferred\n */",
+          "jsDoc": "/**\n * Dialog component is a modal dialog that can be used to display information or prompt the user for input.\n * It can be used to create custom dialogs where content for the body and footer actions is provided by the consumer.\n * The dialog is available in 5 sizes: small, medium, large, xlarge and fullscreen. It may also receive custom styling/sizing.\n * The dialog interrupts the user and will block interaction with the rest of the application until it is closed.\n *\n * Dialog component have 2 variants: default and promotional.\n *\n * ## Visibility\n *\n * The dialog can be controlled solely through the `visible` property, no trigger element is required.\n * If a `triggerId` is provided, the dialog will manage focus with that element, otherwise it will\n * remember the previously focused element before the dialog was opened.\n *\n * The dialog is a controlled component, meaning it does not have its own state management for visibility.\n * Use the `visible` property to control the visibility of the dialog.\n * Use the `onClose` event to handle the close action of the dialog (fired when Close button is clicked\n * or Escape is pressed).\n *\n * ## Accessibility\n *\n * Some attributes have to be explicitly set by the consumer of the component:\n *\n * - The dialog should have an aria-label or aria-labelledby attribute to provide a label for screen readers.\n * - Use aria-labelledby to reference the ID of the element that labels the dialog when there is no visible title.\n *\n * ## Responsive design\n *\n * Dialog has few built in logic to prevent content clipping on small screens\n *\n * - maximum height limited to the viewport height\n * - dialog body has `overflow: auto` by default\n * - dialog itself also has `overflow: auto`, it activates only when the body can not shrink more\n *\n *\n * @dependency mdc-button\n * @dependency mdc-text\n *\n * @tagname mdc-dialog\n *\n * @event shown - (React: onShown) Dispatched when the dialog is shown\n * @event hidden - (React: onHidden) Dispatched when the dialog is hidden\n * @event created - (React: onCreated) Dispatched when the dialog is created (added to the DOM)\n * @event destroyed - (React: onDestroyed) Dispatched when the dialog is destroyed (removed from the DOM)\n * @event close - (React: onClose) Dispatched when the Close Button is clicked or Escape key is pressed\n * (this does not hide the dialog)\n *\n * @cssproperty --mdc-dialog-primary-background-color - primary background color of the dialog\n * @cssproperty --mdc-dialog-border-color - border color of the dialog\n * @cssproperty --mdc-dialog-header-text-color - text color of the header/title of the dialog\n * @cssproperty --mdc-dialog-description-text-color - text color of the below header description of the dialog\n * @cssproperty --mdc-dialog-elevation-3 - elevation of the dialog\n * @cssproperty --mdc-dialog-width - width of the dialog\n * @cssproperty --mdc-dialog-height - height of the dialog\n *\n * @csspart body - The body section of the dialog.\n * @csspart description-text - The description text of the dialog.\n * @csspart dialog-close-btn - The close button of the dialog.\n * @csspart header - The header of the dialog.\n * @csspart header-section - The header section of the dialog.\n * @csspart header-text - The header text of the dialog.\n *\n * @slot header-prefix - Slot for the dialog header content. This can be used to pass custom header content.\n * @slot dialog-body - Slot for the dialog body content\n * @slot footer-link - This slot is for passing `mdc-link` component within the footer section.\n * @slot footer-button-secondary - This slot is for passing secondary variant of `mdc-button` component\n * within the footer section.\n * @slot footer-button-primary - This slot is for passing primary variant of\n * `mdc-button` component within the footer section.\n * @slot footer -  This slot is for passing custom footer content. Only use this if really needed,\n * using the footer-link and footer-button slots is preferred\n */",
           "customElement": true
         }
       ],
@@ -51085,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/dialog/index.d.ts

@@ -7,6 +7,10 @@ import type { Events } from '../../components/dialog/dialog.types';
  * The dialog is available in 5 sizes: small, medium, large, xlarge and fullscreen. It may also receive custom styling/sizing.
  * The dialog interrupts the user and will block interaction with the rest of the application until it is closed.
  *
+ * Dialog component have 2 variants: default and promotional.
+ *
+ * ## Visibility
+ *
  * The dialog can be controlled solely through the `visible` property, no trigger element is required.
  * If a `triggerId` is provided, the dialog will manage focus with that element, otherwise it will
  * remember the previously focused element before the dialog was opened.
@@ -16,16 +20,21 @@ import type { Events } from '../../components/dialog/dialog.types';
  * Use the `onClose` event to handle the close action of the dialog (fired when Close button is clicked
  * or Escape is pressed).
  *
- * Dialog component have 2 variants: default and promotional.
+ * ## Accessibility
  *
- * **Accessibility notes for consuming (have to be explicitly set when you consume the component)**
+ * Some attributes have to be explicitly set by the consumer of the component:
  *
  * - The dialog should have an aria-label or aria-labelledby attribute to provide a label for screen readers.
  * - Use aria-labelledby to reference the ID of the element that labels the dialog when there is no visible title.
  *
- * **Note: Programmatic show/hide requires the ? prefix on the visible attribute**
- * - Use `?visible=true/false` as an attribute instead of `visible=true/false`
- * - Reference docs for more info: https://lit.dev/docs/templates/expressions/#boolean-attribute-expressions
+ * ## Responsive design
+ *
+ * Dialog has few built in logic to prevent content clipping on small screens
+ *
+ * - maximum height limited to the viewport height
+ * - dialog body has `overflow: auto` by default
+ * - dialog itself also has `overflow: auto`, it activates only when the body can not shrink more
+ *
  *
  * @dependency mdc-button
  * @dependency mdc-text

package/dist/react/dialog/index.js

@@ -8,6 +8,10 @@ import { TAG_NAME } from '../../components/dialog/dialog.constants';
  * The dialog is available in 5 sizes: small, medium, large, xlarge and fullscreen. It may also receive custom styling/sizing.
  * The dialog interrupts the user and will block interaction with the rest of the application until it is closed.
  *
+ * Dialog component have 2 variants: default and promotional.
+ *
+ * ## Visibility
+ *
  * The dialog can be controlled solely through the `visible` property, no trigger element is required.
  * If a `triggerId` is provided, the dialog will manage focus with that element, otherwise it will
  * remember the previously focused element before the dialog was opened.
@@ -17,16 +21,21 @@ import { TAG_NAME } from '../../components/dialog/dialog.constants';
  * Use the `onClose` event to handle the close action of the dialog (fired when Close button is clicked
  * or Escape is pressed).
  *
- * Dialog component have 2 variants: default and promotional.
+ * ## Accessibility
  *
- * **Accessibility notes for consuming (have to be explicitly set when you consume the component)**
+ * Some attributes have to be explicitly set by the consumer of the component:
  *
  * - The dialog should have an aria-label or aria-labelledby attribute to provide a label for screen readers.
  * - Use aria-labelledby to reference the ID of the element that labels the dialog when there is no visible title.
  *
- * **Note: Programmatic show/hide requires the ? prefix on the visible attribute**
- * - Use `?visible=true/false` as an attribute instead of `visible=true/false`
- * - Reference docs for more info: https://lit.dev/docs/templates/expressions/#boolean-attribute-expressions
+ * ## Responsive design
+ *
+ * Dialog has few built in logic to prevent content clipping on small screens
+ *
+ * - maximum height limited to the viewport height
+ * - dialog body has `overflow: auto` by default
+ * - dialog itself also has `overflow: auto`, it activates only when the body can not shrink more
+ *
  *
  * @dependency mdc-button
  * @dependency mdc-text

package/package.json

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