@momentum-design/components 0.92.1 → 0.92.3

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

@@ -24,8 +24,9 @@ import { Component } from '../../models';
  * @slot default - Contains the menu items and their associated popovers
  */
 declare class MenuBar extends Component {
+    menusections: Array<HTMLElement>;
     constructor();
-    connectedCallback(): void;
+    connectedCallback(): Promise<void>;
     /**
      * Returns all menuitem elements, including those nested inside menusection.
      */

package/dist/components/menubar/menubar.component.js

@@ -1,4 +1,14 @@
+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 { queryAssignedElements } from 'lit/decorators.js';
 import { Component } from '../../models';
 import { ROLE } from '../../utils/roles';
 import { POPOVER_PLACEMENT } from '../popover/popover.constants';
@@ -37,10 +47,16 @@ class MenuBar extends Component {
         super();
         this.addEventListener('keydown', this.handleKeyDown);
     }
-    connectedCallback() {
+    async connectedCallback() {
+        var _a;
         super.connectedCallback();
         this.role = ROLE.MENUBAR;
         this.ariaOrientation = DEFAULTS.ORIENTATION;
+        await this.updateComplete;
+        // to make sure menusection dividers have the correct divider variant
+        (_a = this.menusections) === null || _a === void 0 ? void 0 : _a.forEach(section => {
+            section.setAttribute('divider-variant', 'gradient');
+        });
     }
     /**
      * Returns all menuitem elements, including those nested inside menusection.
@@ -178,7 +194,8 @@ class MenuBar extends Component {
         const grandParentTag = (_a = parent.parentElement) === null || _a === void 0 ? void 0 : _a.tagName.toLowerCase();
         if (parentTag === MENUBAR_TAGNAME || parentTag === SIDENAV_TAGNAME)
             return true;
-        if (parentTag === MENUSECTION_TAGNAME && (grandParentTag === MENUBAR_TAGNAME || grandParentTag === SIDENAV_TAGNAME)) {
+        if (parentTag === MENUSECTION_TAGNAME &&
+            (grandParentTag === MENUBAR_TAGNAME || grandParentTag === SIDENAV_TAGNAME)) {
             return true;
         }
         return false;
@@ -280,4 +297,8 @@ class MenuBar extends Component {
     }
 }
 MenuBar.styles = [...Component.styles, ...styles];
+__decorate([
+    queryAssignedElements({ selector: 'mdc-menusection', flatten: true }),
+    __metadata("design:type", Array)
+], MenuBar.prototype, "menusections", void 0);
 export default MenuBar;

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

@@ -39,6 +39,15 @@ declare class MenuSection extends Component {
      * This is useful for visually separating sections in the menu.
      */
     showDivider: boolean;
+    /**
+     * The variant of the divider.
+     * Can be set to 'solid' or 'gradient'.
+     *
+     * Keep 'solid' if used in MenuPopovers, as it is the default style.
+     *
+     * @default 'solid'
+     */
+    dividerVariant: "solid";
     /**
      * Shows or hides the section headers based on the expanded state of the side navigation.
      *

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

@@ -15,6 +15,7 @@ import providerUtils from '../../utils/provider';
 import { ROLE } from '../../utils/roles';
 import SideNavigation from '../sidenavigation/sidenavigation.component';
 import styles from './menusection.styles';
+import { DEFAULTS } from './menusection.constants';
 /**
  * `mdc-menusection` is a container element used to group a set of menu items.
  *
@@ -49,6 +50,15 @@ class MenuSection extends Component {
          * This is useful for visually separating sections in the menu.
          */
         this.showDivider = false;
+        /**
+         * The variant of the divider.
+         * Can be set to 'solid' or 'gradient'.
+         *
+         * Keep 'solid' if used in MenuPopovers, as it is the default style.
+         *
+         * @default 'solid'
+         */
+        this.dividerVariant = DEFAULTS.DIVIDER_VARIANT;
         /**
          * Shows or hides the section headers based on the expanded state of the side navigation.
          *
@@ -97,7 +107,7 @@ class MenuSection extends Component {
         return html `
       ${!this.hideHeaderText ? this.renderHeader() : null}
       <slot></slot>
-      ${this.showDivider ? html `<mdc-divider variant="gradient" part="divider"></mdc-divider>` : null}
+      ${this.showDivider ? html `<mdc-divider variant="${this.dividerVariant}" part="divider"></mdc-divider>` : null}
     `;
     }
 }
@@ -118,6 +128,10 @@ __decorate([
     property({ type: Boolean, reflect: true, attribute: 'show-divider' }),
     __metadata("design:type", Object)
 ], MenuSection.prototype, "showDivider", void 0);
+__decorate([
+    property({ type: String, reflect: true, attribute: 'divider-variant' }),
+    __metadata("design:type", Object)
+], MenuSection.prototype, "dividerVariant", void 0);
 __decorate([
     property({ type: Boolean, reflect: true, attribute: 'hide-header-text' }),
     __metadata("design:type", Object)

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

@@ -1,2 +1,5 @@
 declare const TAG_NAME: "mdc-menusection";
-export { TAG_NAME };
+declare const DEFAULTS: {
+    readonly DIVIDER_VARIANT: "solid";
+};
+export { TAG_NAME, DEFAULTS };

package/dist/components/menusection/menusection.constants.js

@@ -1,3 +1,6 @@
 import utils from '../../utils/tag-name';
 const TAG_NAME = utils.constructTagName('menusection');
-export { TAG_NAME };
+const DEFAULTS = {
+    DIVIDER_VARIANT: 'solid',
+};
+export { TAG_NAME, DEFAULTS };

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

@@ -1,6 +1,6 @@
 import { CSSResult, PropertyValues } from 'lit';
 import { Component } from '../../models';
-import { PopoverColor, PopoverPlacement, PopoverTrigger } from './popover.types';
+import type { PopoverColor, PopoverPlacement, PopoverTrigger } from './popover.types';
 declare const Popover_base: import("../../utils/mixins/index.types").Constructor<Component & import("../../utils/mixins/PreventScrollMixin").PreventScrollMixinInterface> & import("../../utils/mixins/index.types").Constructor<Component & import("../../utils/mixins/FocusTrapMixin").FocusTrapClassInterface> & typeof Component;
 /**
  * Popover component is a lightweight floating UI element that displays additional content when triggered.
@@ -88,10 +88,41 @@ declare class Popover extends Popover_base {
      */
     offset: number;
     /**
-     *Virtual padding around the boundary to check for overflow.
-     * @default 16
+     * This describes the clipping element(s) or area that overflow will be checked relative to.
+     * The default is 'clippingAncestors', which are the overflow ancestors which will cause the
+     * element to be clipped.
+     *
+     * Possible values:
+     *  - 'clippingAncestors'
+     *  - any css selector
+     *
+     * @default 'clippingAncestors'
+     *
+     * @see [Floating UI - boundary](https://floating-ui.com/docs/detectOverflow#boundary)
+     */
+    boundary: 'clippingAncestors' | string;
+    /**
+     * This describes the root boundary that the element will be checked for overflow relative to.
+     * The default is 'viewport', which is the area of the page the user can see on the screen.
+     *
+     * The other string option is 'document', which is the entire page outside the viewport.
+     *
+     * @default 'viewport'
+     *
+     * @see [Floating UI - rootBoundary](https://floating-ui.com/docs/detectOverflow#rootboundary)
+     */
+    boundaryRoot: 'viewport' | 'document';
+    /**
+     * Virtual padding around the boundary to check for overflow.
+     * So the popover will not be placed on top of the edge of the boundary.
+     *
+     * Default works well for most cases, but you can set this to customise it when necessary.
+     *
+     * @default undefined
+     *
+     * @see [Floating UI - padding](https://floating-ui.com/docs/detectOverflow#padding)
      */
-    boundaryPadding: number;
+    boundaryPadding: undefined | number;
     /**
      * Determines whether the focus trap is enabled.
      * If true, focus will be restricted to the content within this component.

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

@@ -107,10 +107,30 @@ class Popover extends PreventScrollMixin(FocusTrapMixin(Component)) {
          */
         this.offset = DEFAULTS.OFFSET;
         /**
-         *Virtual padding around the boundary to check for overflow.
-         * @default 16
+         * This describes the clipping element(s) or area that overflow will be checked relative to.
+         * The default is 'clippingAncestors', which are the overflow ancestors which will cause the
+         * element to be clipped.
+         *
+         * Possible values:
+         *  - 'clippingAncestors'
+         *  - any css selector
+         *
+         * @default 'clippingAncestors'
+         *
+         * @see [Floating UI - boundary](https://floating-ui.com/docs/detectOverflow#boundary)
+         */
+        this.boundary = DEFAULTS.BOUNDARY;
+        /**
+         * This describes the root boundary that the element will be checked for overflow relative to.
+         * The default is 'viewport', which is the area of the page the user can see on the screen.
+         *
+         * The other string option is 'document', which is the entire page outside the viewport.
+         *
+         * @default 'viewport'
+         *
+         * @see [Floating UI - rootBoundary](https://floating-ui.com/docs/detectOverflow#rootboundary)
          */
-        this.boundaryPadding = DEFAULTS.BOUNDARY_PADDING;
+        this.boundaryRoot = DEFAULTS.BOUNDARY_ROOT;
         /**
          * Determines whether the focus trap is enabled.
          * If true, focus will be restricted to the content within this component.
@@ -262,6 +282,7 @@ class Popover extends PreventScrollMixin(FocusTrapMixin(Component)) {
             const clickedOnBackdrop = this.backdropElement ? path.includes(this.backdropElement) : false;
             if (!insidePopoverClick || clickedOnBackdrop) {
                 this.hidePopover();
+                PopoverEventManager.onClickOutside(this);
             }
         };
         /**
@@ -281,6 +302,7 @@ class Popover extends PreventScrollMixin(FocusTrapMixin(Component)) {
             }
             event.preventDefault();
             this.hidePopover();
+            PopoverEventManager.onEscapeKeyPressed(this);
         };
         /**
          * Handles the popover focus out event.
@@ -472,6 +494,13 @@ class Popover extends PreventScrollMixin(FocusTrapMixin(Component)) {
     }
     async updated(changedProperties) {
         super.updated(changedProperties);
+        // If the role is changed to an empty string, set it to null
+        // to avoid setting an invalid role on the popover element.
+        if (changedProperties.has('role')) {
+            if (this.role === '') {
+                this.role = null;
+            }
+        }
         if (changedProperties.has('visible')) {
             const oldValue = changedProperties.get('visible') || false;
             await this.isOpenUpdated(oldValue, this.visible);
@@ -622,7 +651,15 @@ class Popover extends PreventScrollMixin(FocusTrapMixin(Component)) {
     positionPopover() {
         if (!this.triggerElement)
             return;
-        const middleware = [shift({ padding: this.boundaryPadding })];
+        const middleware = [
+            shift({
+                boundary: !this.boundary || this.boundary === 'clippingAncestors'
+                    ? 'clippingAncestors'
+                    : Array.from(document.querySelectorAll(this.boundary)),
+                rootBoundary: this.boundaryRoot,
+                padding: this.boundaryPadding,
+            }),
+        ];
         let popoverOffset = this.offset;
         if (this.flip) {
             middleware.push(flip());
@@ -730,9 +767,17 @@ __decorate([
     property({ type: Number, reflect: true }),
     __metadata("design:type", Number)
 ], Popover.prototype, "offset", void 0);
+__decorate([
+    property({ type: String, reflect: true, attribute: 'boundary' }),
+    __metadata("design:type", String)
+], Popover.prototype, "boundary", void 0);
+__decorate([
+    property({ type: String, reflect: true, attribute: 'boundary-root' }),
+    __metadata("design:type", String)
+], Popover.prototype, "boundaryRoot", void 0);
 __decorate([
     property({ type: Number, reflect: true, attribute: 'boundary-padding' }),
-    __metadata("design:type", Number)
+    __metadata("design:type", Object)
 ], Popover.prototype, "boundaryPadding", void 0);
 __decorate([
     property({ type: Boolean, reflect: true, attribute: 'focus-trap' }),

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

@@ -28,7 +28,9 @@ declare const DEFAULTS: {
     readonly TRIGGER: "click";
     readonly COLOR: "tonal";
     readonly OFFSET: 4;
-    readonly BOUNDARY_PADDING: 16;
+    readonly BOUNDARY: "clippingAncestors";
+    readonly BOUNDARY_ROOT: "viewport";
+    readonly BOUNDARY_PADDING: 0;
     readonly VISIBLE: false;
     readonly ARROW: false;
     readonly CLOSE_BUTTON: false;

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

@@ -29,7 +29,9 @@ const DEFAULTS = {
     TRIGGER: TRIGGER.CLICK,
     COLOR: COLOR.TONAL,
     OFFSET: 4,
-    BOUNDARY_PADDING: 16,
+    BOUNDARY: 'clippingAncestors',
+    BOUNDARY_ROOT: 'viewport',
+    BOUNDARY_PADDING: 0,
     VISIBLE: false,
     ARROW: false,
     CLOSE_BUTTON: false,

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

@@ -31,4 +31,16 @@ export declare class PopoverEventManager {
      * @param instance - The popover instance.
      */
     static onDestroyedPopover(instance: Popover): void;
+    /**
+     * Custom event that is fired when the popover is closed by pressing the Escape key.
+     *
+     * @param instance - The popover instance.
+     */
+    static onEscapeKeyPressed(instance: Popover): void;
+    /**
+     * Custom event that is fired when the popover is closed by clicking outside of it.
+     *
+     * @param instance - The popover instance.
+     */
+    static onClickOutside(instance: Popover): void;
 }

package/dist/components/popover/popover.events.js

@@ -44,4 +44,20 @@ export class PopoverEventManager {
     static onDestroyedPopover(instance) {
         this.dispatchPopoverEvent('destroyed', instance);
     }
+    /**
+     * Custom event that is fired when the popover is closed by pressing the Escape key.
+     *
+     * @param instance - The popover instance.
+     */
+    static onEscapeKeyPressed(instance) {
+        this.dispatchPopoverEvent('closebyescape', instance);
+    }
+    /**
+     * Custom event that is fired when the popover is closed by clicking outside of it.
+     *
+     * @param instance - The popover instance.
+     */
+    static onClickOutside(instance) {
+        this.dispatchPopoverEvent('closebyoutsideclick', instance);
+    }
 }

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

@@ -96,7 +96,7 @@ export class PopoverUtils {
         else {
             this.popover.removeAttribute('aria-modal');
         }
-        if (this.popover.interactive) {
+        if (this.popover.interactive && this.popover.role) {
             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) || '';

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

@@ -1,8 +1,9 @@
-import type { PropertyValues, TemplateResult } from 'lit';
+import type { PropertyValues } from 'lit';
 import { CSSResult } from 'lit';
 import { AssociatedFormControl } from '../../utils/mixins/FormInternalsMixin';
 import FormfieldWrapper from '../formfieldwrapper/formfieldwrapper.component';
 import type { IconNames } from '../icon/icon.types';
+import type { Placement } from './select.types';
 declare const Select_base: import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/FormInternalsMixin").FormInternalsMixinInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/DataAriaLabelMixin").DataAriaLabelMixinInterface> & typeof FormfieldWrapper;
 /**
  * The mdc-select component is a dropdown selection control that allows users to pick an option from a predefined list.
@@ -12,6 +13,8 @@ declare const Select_base: import("../../utils/mixins/index.types").Constructor<
  *
  * To set a default option, use the `selected` attribute on the `mdc-option` element.
  *
+ * **Note:** Make sure to add `mdc-selectlistbox` as a child of `mdc-select` and wrap options/optgroup in it to ensure proper accessibility functionality. Read more about it in SelectListBox documentation.
+ *
  * @dependency mdc-button
  * @dependency mdc-icon
  * @dependency mdc-popover
@@ -44,8 +47,20 @@ declare class Select extends Select_base implements AssociatedFormControl {
      * @default auto
      */
     height: string;
+    /**
+     * The placeholder text which will be shown on the text if provided.
+     */
+    placement: Placement;
+    /**
+     * Indicates whether the select is soft disabled.
+     * When set to `true`, the select appears visually disabled but still allows
+     * focus.
+     *
+     * @default undefined
+     */
+    softDisabled?: boolean;
     /** @internal */
-    optionsList: Array<HTMLElement>;
+    slottedListboxes: Array<HTMLElement>;
     /** @internal */
     private baseIconName;
     /** @internal */
@@ -56,21 +71,26 @@ declare class Select extends Select_base implements AssociatedFormControl {
     selectedValue: string;
     /** @internal */
     displayPopover: boolean;
-    /** @internal */
-    activeDescendant: string;
     /**
      * @internal
      * The native select element
      */
     inputElement: HTMLInputElement;
     /**
-     * A helper function which returns a flattened array of all valid options from the assigned slot.
+     * Modifies the listbox wrapper to ensure it has the correct attributes
+     * and IDs for accessibility.
+     *
+     * Once [ariaOwnsElements](https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/ariaOwnsElements) is supported in browsers,
+     * this an be removed and mdc-option can be used directly in the select component with a listbox in a different
+     * shadow root and aria-owns attribute to connect them.
+     */
+    private modifyListBoxWrapper;
+    /**
+     * A helper function which returns a flattened array of all valid options from within the slotted listbox.
      * It takes care of the edge cases where the option is either a direct child or a
      * child of an option group.
      */
     private getAllValidOptions;
-    private handlePopoverOpen;
-    private handlePopoverClose;
     /**
      * Updates the tabindex and selected attribute of the options.
      * If selectedOption is provided, it will be set as the selected option.
@@ -119,6 +139,7 @@ declare class Select extends Select_base implements AssociatedFormControl {
      * @param event - The keyboard event.
      */
     private handlePopoverOnOpen;
+    private handleClickCombobox;
     /**
      * Handles the keydown event on the select element when the popover is closed.
      * The options are as follows:
@@ -128,7 +149,7 @@ declare class Select extends Select_base implements AssociatedFormControl {
      * - END: Opens the popover and sets focus and tabindex on the last option.
      * @param event - The keyboard event.
      */
-    private handlePopoverOnClose;
+    private handleKeydownCombobox;
     /**
      * Handles the navigation of options when the user presses
      * ArrowUp, ArrowDown, PageUp, or PageDown keys.
@@ -149,8 +170,6 @@ declare class Select extends Select_base implements AssociatedFormControl {
      * @returns The new index to focus on, or -1 if no movement is possible.
      */
     private getNewIndexBasedOnKey;
-    private updateActivedescendant;
-    private resetActivedescendant;
     private setFocusAndTabIndex;
     private openPopover;
     private closePopover;
@@ -159,34 +178,10 @@ declare class Select extends Select_base implements AssociatedFormControl {
      * If an option is selected, use that as the value.
      * If not, use the placeholder if it exists, otherwise use the first option.
      */
-    firstUpdated(): void;
-    /**
-     * Generates the native select element.
-     * The native select element is not rendered directly and is not visible on the UI.
-     * It's rendered only on the DOM for accessibility purposes.
-     * Instead, the overlay uses the native select element to generate the list of options.
-     * @returns A TemplateResult representing the native select element.
-     */
-    private getNativeSelect;
-    /**
-     * This method maps over all valid options and constructs their corresponding
-     * HTML `<option>` elements. The attributes such as `value`, `label`, `disabled`,
-     * and `selected` are extracted from the respective option elements.
-     * If the attribute is not present, a default value or fallback is used.
-     * The content of each `<option>` is set to the text content of the option element.
-     * @returns An array of `TemplateResult` representing the option elements.
-     */
-    private getOptionsContentFromSlot;
-    /**
-     * Generates the content for the popover associated with the select component.
-     * If the component is disabled or readonly, returns `nothing`.
-     * Otherwise, returns a `TemplateResult` that renders a popover with various configurations
-     * such as visibility, interaction, and event handlers.
-     * The popover acts as a dropdown list with options, allowing user interaction.
-     */
-    private getPopoverContent;
+    firstUpdated(): Promise<void>;
     updated(changedProperties: PropertyValues): void;
-    render(): TemplateResult<1>;
+    private handleOnChange;
+    render(): import("lit-html").TemplateResult<1>;
     static styles: Array<CSSResult>;
 }
 export default Select;