@momentum-design/components 0.54.2 → 0.55.0

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

@@ -1,6 +1,6 @@
 import { CSSResult, PropertyValues } from 'lit';
 import { Component } from '../../models';
-import type { PopoverPlacement, PopoverTrigger, PopoverColor } from './popover.types';
+import { PopoverColor, PopoverPlacement, PopoverTrigger } from './popover.types';
 declare const Popover_base: import("../../utils/mixins/index.types").Constructor<HTMLElement & import("../../utils/mixins/FocusTrapMixin").FocusTrapClassInterface> & typeof Component;
 /**
  * Popover component is a lightweight floating UI element that displays additional content when triggered.
@@ -185,6 +185,7 @@ declare class Popover extends Popover_base {
     ariaDescribedby: string | null;
     /**
      * Disable aria-expanded attribute on trigger element.
+     * Make sure to set this to false when the popover is interactive.
      * @default false
      */
     disableAriaExpanded: boolean;

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

@@ -7,16 +7,16 @@ 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 { arrow, autoUpdate, computePosition, flip, offset, shift, size } from '@floating-ui/dom';
 import { html, nothing } from 'lit';
-import { ifDefined } from 'lit/directives/if-defined.js';
 import { property } from 'lit/decorators.js';
-import { computePosition, autoUpdate, offset, flip, shift, arrow, size } from '@floating-ui/dom';
-import styles from './popover.styles';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import { Component } from '../../models';
 import { FocusTrapMixin } from '../../utils/mixins/FocusTrapMixin';
-import { popoverStack } from './popover.stack';
-import { DEFAULTS, POPOVER_PLACEMENT, TRIGGER, COLOR } from './popover.constants';
+import { COLOR, DEFAULTS, POPOVER_PLACEMENT, TRIGGER } from './popover.constants';
 import { PopoverEventManager } from './popover.events';
+import { popoverStack } from './popover.stack';
+import styles from './popover.styles';
 import { PopoverUtils } from './popover.utils';
 /**
  * Popover component is a lightweight floating UI element that displays additional content when triggered.
@@ -203,6 +203,7 @@ class Popover extends FocusTrapMixin(Component) {
         this.ariaDescribedby = null;
         /**
          * Disable aria-expanded attribute on trigger element.
+         * Make sure to set this to false when the popover is interactive.
          * @default false
          */
         this.disableAriaExpanded = DEFAULTS.DISABLE_ARIA_EXPANDED;
@@ -397,6 +398,7 @@ class Popover extends FocusTrapMixin(Component) {
         if (changedProperties.has('visible')) {
             const oldValue = changedProperties.get('visible') || false;
             await this.isOpenUpdated(oldValue, this.visible);
+            this.utils.updateAriaExpandedAttribute();
         }
         if (changedProperties.has('placement')) {
             this.setAttribute('placement', Object.values(POPOVER_PLACEMENT).includes(this.placement) ? this.placement : DEFAULTS.PLACEMENT);
@@ -425,6 +427,12 @@ class Popover extends FocusTrapMixin(Component) {
             || changedProperties.has('aria-labelledby')) {
             this.utils.setupAccessibility();
         }
+        if (changedProperties.has('disableAriaExpanded')) {
+            this.utils.updateAriaExpandedAttribute();
+        }
+        if (changedProperties.has('interactive')) {
+            this.utils.updateAriaHasPopupAttribute();
+        }
     }
     /**
      * Handles the popover visibility change and position the popover.
@@ -462,12 +470,6 @@ class Popover extends FocusTrapMixin(Component) {
             if (this.hideOnEscape) {
                 document.addEventListener('keydown', this.onEscapeKeydown);
             }
-            if (!this.disableAriaExpanded) {
-                this.triggerElement.setAttribute('aria-expanded', 'true');
-            }
-            if (this.interactive) {
-                this.triggerElement.setAttribute('aria-haspopup', this.triggerElement.getAttribute('aria-haspopup') || 'dialog');
-            }
             PopoverEventManager.onShowPopover(this);
         }
         else {
@@ -536,6 +538,7 @@ class Popover extends FocusTrapMixin(Component) {
                         return;
                     Object.assign(popoverContent.style, {
                         maxHeight: `${availableHeight}px`,
+                        overflowY: 'auto',
                     });
                 },
                 padding: 50,
@@ -677,7 +680,7 @@ __decorate([
     __metadata("design:type", String)
 ], Popover.prototype, "appendTo", void 0);
 __decorate([
-    property({ type: String, attribute: 'close-button-aria-label' }),
+    property({ type: String, attribute: 'close-button-aria-label', reflect: true }),
     __metadata("design:type", Object)
 ], Popover.prototype, "closeButtonAriaLabel", void 0);
 __decorate([

package/dist/components/popover/popover.styles.js

@@ -48,7 +48,6 @@ const styles = css `
   :host::part(popover-content) {
     position: relative;
     padding: 0.75rem;
-    overflow-y: auto;
     min-width: max-content;
     z-index: 9998;
     max-height: var(--mdc-popover-max-height);

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

@@ -28,6 +28,14 @@ export declare class PopoverUtils {
      * Sets up the accessibility attributes for the popover.
      */
     setupAccessibility(): void;
+    /**
+     * Updates the aria-haspopup attribute on the trigger element.
+     */
+    updateAriaHasPopupAttribute(): void;
+    /**
+     * Updates the aria-expanded attribute on the trigger element.
+     */
+    updateAriaExpandedAttribute(): void;
     /**
      * Updates the arrow style based on the arrow data and placement.
      *

package/dist/components/popover/popover.utils.js

@@ -93,6 +93,7 @@ export class PopoverUtils {
             this.popover.toggleAttribute('aria-modal', this.popover.interactive);
         }
         if (this.popover.interactive) {
+            this.popover.setAttribute('aria-modal', 'true');
             if (!this.popover.ariaLabel) {
                 this.popover.ariaLabel = ((_a = this.popover.triggerElement) === null || _a === void 0 ? void 0 : _a.ariaLabel)
                     || ((_b = this.popover.triggerElement) === null || _b === void 0 ? void 0 : _b.textContent)
@@ -102,6 +103,33 @@ export class PopoverUtils {
                 this.popover.ariaLabelledby = ((_c = this.popover.triggerElement) === null || _c === void 0 ? void 0 : _c.id) || '';
             }
         }
+        else {
+            this.popover.removeAttribute('aria-modal');
+        }
+    }
+    /**
+     * Updates the aria-haspopup attribute on the trigger element.
+     */
+    updateAriaHasPopupAttribute() {
+        var _a, _b, _c;
+        if (this.popover.interactive) {
+            (_a = this.popover.triggerElement) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-haspopup', ((_b = this.popover.triggerElement) === null || _b === void 0 ? void 0 : _b.getAttribute('aria-haspopup')) || 'dialog');
+        }
+        else {
+            (_c = this.popover.triggerElement) === null || _c === void 0 ? void 0 : _c.removeAttribute('aria-haspopup');
+        }
+    }
+    /**
+     * Updates the aria-expanded attribute on the trigger element.
+     */
+    updateAriaExpandedAttribute() {
+        var _a, _b;
+        if (this.popover.disableAriaExpanded) {
+            (_a = this.popover.triggerElement) === null || _a === void 0 ? void 0 : _a.removeAttribute('aria-expanded');
+        }
+        else {
+            (_b = this.popover.triggerElement) === null || _b === void 0 ? void 0 : _b.setAttribute('aria-expanded', `${this.popover.visible}`);
+        }
     }
     /**
      * Updates the arrow style based on the arrow data and placement.

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

@@ -35,7 +35,7 @@ declare class Select extends Select_base implements AssociatedFormControl {
     /**
      * height attribute of the select field. If set,
      * then a scroll bar will be visible when there more options than the adjusted height.
-     * @default 'auto'
+     * @default auto
      */
     height: string;
     /** @internal */
@@ -50,6 +50,8 @@ declare class Select extends Select_base implements AssociatedFormControl {
     displayPopover: boolean;
     /** @internal */
     activeDescendant: string;
+    /** @internal */
+    popoverWidth: string;
     /**
      * @internal
      * The native select element

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

@@ -50,7 +50,7 @@ class Select extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)) {
         /**
          * height attribute of the select field. If set,
          * then a scroll bar will be visible when there more options than the adjusted height.
-         * @default 'auto'
+         * @default auto
          */
         this.height = 'auto';
         /** @internal */
@@ -61,6 +61,8 @@ class Select extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)) {
         this.displayPopover = false;
         /** @internal */
         this.activeDescendant = '';
+        /** @internal */
+        this.popoverWidth = '100%';
     }
     connectedCallback() {
         super.connectedCallback();
@@ -233,6 +235,7 @@ class Select extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)) {
                 break;
             case KEYS.ESCAPE:
                 this.closePopover();
+                event.stopPropagation();
                 break;
             case KEYS.HOME:
                 this.setFocusAndTabIndex(0);
@@ -453,7 +456,7 @@ class Select extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)) {
         placement="${POPOVER_PLACEMENT.BOTTOM_START}"
         @shown="${this.handlePopoverOpen}"
         @hidden="${this.handlePopoverClose}"
-        style="--mdc-popover-max-width: 100%; --mdc-popover-max-height: ${this.height};"
+        style="--mdc-popover-max-width: ${this.popoverWidth}; --mdc-popover-max-height: ${this.height};"
       >
         <slot @click="${this.handleOptionsClick}"></slot>
       </mdc-popover>
@@ -511,7 +514,7 @@ __decorate([
     __metadata("design:type", Object)
 ], Select.prototype, "readonly", void 0);
 __decorate([
-    property({ type: String, attribute: 'height' }),
+    property({ type: String }),
     __metadata("design:type", Object)
 ], Select.prototype, "height", void 0);
 __decorate([
@@ -538,6 +541,10 @@ __decorate([
     state(),
     __metadata("design:type", Object)
 ], Select.prototype, "activeDescendant", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], Select.prototype, "popoverWidth", void 0);
 __decorate([
     query('select'),
     __metadata("design:type", HTMLInputElement)

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

@@ -0,0 +1,9 @@
+import ToggleTip from './toggletip.component';
+import '../button';
+import '../screenreaderannouncer';
+declare global {
+    interface HTMLElementTagNameMap {
+        ['mdc-toggletip']: ToggleTip;
+    }
+}
+export default ToggleTip;

package/dist/components/toggletip/index.js

@@ -0,0 +1,6 @@
+import ToggleTip from './toggletip.component';
+import { TAG_NAME } from './toggletip.constants';
+import '../button';
+import '../screenreaderannouncer';
+ToggleTip.register(TAG_NAME);
+export default ToggleTip;

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

@@ -0,0 +1,66 @@
+import { CSSResult, PropertyValueMap } from 'lit';
+import Popover from '../popover/popover.component';
+/**
+ * A toggletip is triggered by clicking a trigger element.
+ *
+ * It can contain interactive content and can be closed by
+ * clicking outside the toggletip or pressing the escape key.
+ *
+ * It can have optional close button to close the toggletip.
+ *
+ * Toggletip component uses `mdc-screenreaderannouncer` internally to
+ * announce the toggletip text content with screen readers when the toggletip is shown.
+ *
+ * `screenreader-announcer-identity` attribute can be used to provide ID of an element
+ * in DOM to which announcement elements are added. If not set, a visually hidden
+ * div element is created in DOM to which announcement elements are added.
+ *
+ * Please refer to the `mdc-screenreaderannouncer` component for more details.
+ *
+ * @dependency mdc-screenreaderannouncer
+ * @dependency mdc-button
+ *
+ * @tagname mdc-toggletip
+ *
+ * @event shown - (React: onShown) This event is dispatched when the toggletip is shown
+ * @event hidden - (React: onHidden) This event is dispatched when the toggletip is hidden
+ * @event created - (React: onCreated) This event is dispatched when the toggletip is created (added to the DOM)
+ * @event destroyed - (React: onDestroyed) This event is dispatched when the toggletip
+ * is destroyed (removed from the DOM)
+ *
+ * @cssproperty --mdc-toggletip-max-width - The maximum width of the toggletip.
+ * @cssproperty --mdc-toggletip-text-color - The text color of the toggletip.
+ * @cssproperty --mdc-toggletip-text-color-contrast - The text color of the toggletip
+ *  when the color is contrast.
+ *
+ * @slot - Default slot for the toggletip content
+ */
+declare class ToggleTip extends Popover {
+    private defaultSlotNodes;
+    /** @internal */
+    currentAnnouncement: string;
+    /**
+      * Set this attribute with the id of the element in the DOM, to which announcement
+      * elements will be appended.
+      * If an id is provided, the announcement elements will be appended to this element.
+      * If id is not provided, a visually hidden div element will be created in the DOM.
+      *
+      * Please refer to the `mdc-screenreaderannouncer` component for more details.
+    */
+    screenreaderAnnouncerIdentity: string;
+    connectedCallback(): void;
+    /**
+     * @returns The text content of all the nodes in the default slot, joined by a space.
+     *          If there are no nodes, an empty string is returned.
+     */
+    private getToggleTipText;
+    /**
+     * Updates the placement attribute if it is not a valid placement.
+     * Default placement for toggle tip is top.
+     */
+    private onPlacementUpdated;
+    protected update(changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: Array<CSSResult>;
+}
+export default ToggleTip;

package/dist/components/toggletip/toggletip.component.js

@@ -0,0 +1,131 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+import { html } from 'lit';
+import { property, queryAssignedNodes, state } from 'lit/decorators.js';
+import Popover from '../popover/popover.component';
+import { POPOVER_PLACEMENT } from '../popover/popover.constants';
+import { DEFAULTS } from './toggletip.constants';
+import styles from './toggletip.styles';
+/**
+ * A toggletip is triggered by clicking a trigger element.
+ *
+ * It can contain interactive content and can be closed by
+ * clicking outside the toggletip or pressing the escape key.
+ *
+ * It can have optional close button to close the toggletip.
+ *
+ * Toggletip component uses `mdc-screenreaderannouncer` internally to
+ * announce the toggletip text content with screen readers when the toggletip is shown.
+ *
+ * `screenreader-announcer-identity` attribute can be used to provide ID of an element
+ * in DOM to which announcement elements are added. If not set, a visually hidden
+ * div element is created in DOM to which announcement elements are added.
+ *
+ * Please refer to the `mdc-screenreaderannouncer` component for more details.
+ *
+ * @dependency mdc-screenreaderannouncer
+ * @dependency mdc-button
+ *
+ * @tagname mdc-toggletip
+ *
+ * @event shown - (React: onShown) This event is dispatched when the toggletip is shown
+ * @event hidden - (React: onHidden) This event is dispatched when the toggletip is hidden
+ * @event created - (React: onCreated) This event is dispatched when the toggletip is created (added to the DOM)
+ * @event destroyed - (React: onDestroyed) This event is dispatched when the toggletip
+ * is destroyed (removed from the DOM)
+ *
+ * @cssproperty --mdc-toggletip-max-width - The maximum width of the toggletip.
+ * @cssproperty --mdc-toggletip-text-color - The text color of the toggletip.
+ * @cssproperty --mdc-toggletip-text-color-contrast - The text color of the toggletip
+ *  when the color is contrast.
+ *
+ * @slot - Default slot for the toggletip content
+ */
+class ToggleTip extends Popover {
+    constructor() {
+        super(...arguments);
+        /** @internal */
+        this.currentAnnouncement = '';
+        /**
+          * Set this attribute with the id of the element in the DOM, to which announcement
+          * elements will be appended.
+          * If an id is provided, the announcement elements will be appended to this element.
+          * If id is not provided, a visually hidden div element will be created in the DOM.
+          *
+          * Please refer to the `mdc-screenreaderannouncer` component for more details.
+        */
+        this.screenreaderAnnouncerIdentity = '';
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.closeButton = DEFAULTS.CLOSE_BUTTON;
+        this.closeButtonAriaLabel = DEFAULTS.CLOSE_BUTTON_ARIA_LABEL;
+        this.placement = DEFAULTS.PLACEMENT;
+        this.trigger = DEFAULTS.CLICK;
+        this.showArrow = DEFAULTS.SHOW_ARROW;
+        this.interactive = true;
+        this.backdrop = true;
+        this.hideOnBlur = true;
+        this.hideOnEscape = true;
+        this.hideOnOutsideClick = true;
+        this.disableAriaExpanded = false;
+        this.focusBackToTrigger = true;
+    }
+    /**
+     * @returns The text content of all the nodes in the default slot, joined by a space.
+     *          If there are no nodes, an empty string is returned.
+     */
+    getToggleTipText() {
+        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()) || '';
+    }
+    /**
+     * Updates the placement attribute if it is not a valid placement.
+     * Default placement for toggle tip is top.
+     */
+    onPlacementUpdated() {
+        if (!Object.values(POPOVER_PLACEMENT).includes(this.placement)) {
+            this.placement = DEFAULTS.PLACEMENT;
+        }
+    }
+    update(changedProperties) {
+        super.update(changedProperties);
+        if (changedProperties.has('placement')) {
+            this.onPlacementUpdated();
+        }
+        if (changedProperties.has('visible')) {
+            this.currentAnnouncement = this.visible ? this.getToggleTipText() : '';
+        }
+    }
+    render() {
+        return html `
+      ${super.render()}
+      <mdc-screenreaderannouncer
+        identity="${this.screenreaderAnnouncerIdentity}"
+        announcement="${this.currentAnnouncement}"
+        delay="300">
+      </mdc-screenreaderannouncer>
+    `;
+    }
+}
+ToggleTip.styles = [...Popover.styles, ...styles];
+__decorate([
+    queryAssignedNodes(),
+    __metadata("design:type", Array)
+], ToggleTip.prototype, "defaultSlotNodes", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], ToggleTip.prototype, "currentAnnouncement", void 0);
+__decorate([
+    property({ type: String, reflect: true, attribute: 'screenreader-announcer-identity' }),
+    __metadata("design:type", Object)
+], ToggleTip.prototype, "screenreaderAnnouncerIdentity", void 0);
+export default ToggleTip;

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

@@ -0,0 +1,10 @@
+declare const TAG_NAME: "mdc-toggletip";
+declare const DEFAULTS: {
+    CLOSE_BUTTON: boolean;
+    CLOSE_BUTTON_ARIA_LABEL: string;
+    OFFSET: number;
+    PLACEMENT: "top";
+    CLICK: "click";
+    SHOW_ARROW: boolean;
+};
+export { DEFAULTS, TAG_NAME };

package/dist/components/toggletip/toggletip.constants.js

@@ -0,0 +1,12 @@
+import utils from '../../utils/tag-name';
+import { POPOVER_PLACEMENT, TRIGGER } from '../popover/popover.constants';
+const TAG_NAME = utils.constructTagName('toggletip');
+const DEFAULTS = {
+    CLOSE_BUTTON: true,
+    CLOSE_BUTTON_ARIA_LABEL: 'Close',
+    OFFSET: 4,
+    PLACEMENT: POPOVER_PLACEMENT.TOP,
+    CLICK: TRIGGER.CLICK,
+    SHOW_ARROW: true,
+};
+export { DEFAULTS, TAG_NAME };

package/dist/components/toggletip/toggletip.styles.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("lit").CSSResult[];
+export default _default;

package/dist/components/toggletip/toggletip.styles.js

@@ -0,0 +1,25 @@
+import { css } from 'lit';
+const styles = css `
+  :host {
+    --mdc-toggletip-max-width: 400px;
+    --mdc-toggletip-text-color: var(--mds-color-theme-text-primary-normal);
+    --mdc-toggletip-text-color-contrast: var(--mds-color-theme-inverted-text-primary-normal);
+  }
+
+  :host::part(popover-content) {
+    color: var(--mdc-toggletip-text-color);
+    min-width: fit-content;
+    max-width: var(--mdc-toggletip-max-width);
+
+    font-size: var(--mds-font-apps-body-midsize-regular-font-size);
+    font-weight: var(--mds-font-apps-body-midsize-regular-font-weight);
+    line-height: var(--mds-font-apps-body-midsize-regular-line-height);
+    text-decoration: var(--mds-font-apps-body-midsize-regular-text-decoration);
+    text-transform: var(--mds-font-apps-body-midsize-regular-text-case);
+  }
+
+  :host([color='contrast'])::part(popover-content) {
+    color: var(--mdc-toggletip-text-color-contrast);
+  }
+`;
+export default [styles];

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

@@ -0,0 +1,7 @@
+interface Events {
+    onShownEvent: Event;
+    onHiddenEvent: Event;
+    onCreatedEvent: Event;
+    onDestroyedEvent: Event;
+}
+export type { Events };

package/dist/components/toggletip/toggletip.types.js

@@ -0,0 +1 @@
+export {};