@momentum-design/components 0.100.0 → 0.100.2

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

@@ -50,5 +50,6 @@ declare const DEFAULTS: {
     readonly DISABLE_ARIA_EXPANDED: false;
     readonly DISABLE_ARIA_HAS_POPUP: false;
     readonly PROPAGATE_EVENT_ON_ESCAPE: false;
+    readonly KEEP_CONNECTED_TOOLTIP_CLOSED: true;
 };
 export { TAG_NAME, POPOVER_PLACEMENT, COLOR, TRIGGER, DEFAULTS };

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

@@ -51,5 +51,6 @@ const DEFAULTS = {
     DISABLE_ARIA_EXPANDED: false,
     DISABLE_ARIA_HAS_POPUP: false,
     PROPAGATE_EVENT_ON_ESCAPE: false,
+    KEEP_CONNECTED_TOOLTIP_CLOSED: true,
 };
 export { TAG_NAME, POPOVER_PLACEMENT, COLOR, TRIGGER, DEFAULTS };

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

@@ -1,12 +1,25 @@
-import type { ValueOf } from '../../utils/types';
+import type { ValueOf, TypedEvent } from '../../utils/types';
+import type Popover from './popover.component';
 import { POPOVER_PLACEMENT, TRIGGER, COLOR } from './popover.constants';
 type PopoverPlacement = ValueOf<typeof POPOVER_PLACEMENT>;
 type PopoverColor = ValueOf<typeof COLOR>;
 type PopoverTrigger = ValueOf<typeof TRIGGER> | `${ValueOf<typeof TRIGGER>} ${ValueOf<typeof TRIGGER>}`;
+type PopoverShownEvent = TypedEvent<Popover, {
+    show: boolean;
+}>;
+type PopoverHiddenEvent = TypedEvent<Popover, {
+    show: boolean;
+}>;
+type PopoverCreatedEvent = TypedEvent<Popover, {
+    show: boolean;
+}>;
+type PopoverDestroyedEvent = TypedEvent<Popover, {
+    show: boolean;
+}>;
 interface Events {
-    onShownEvent: Event;
-    onHiddenEvent: Event;
-    onCreatedEvent: Event;
-    onDestroyedEvent: Event;
+    onShownEvent: PopoverShownEvent;
+    onHiddenEvent: PopoverHiddenEvent;
+    onCreatedEvent: PopoverCreatedEvent;
+    onDestroyedEvent: PopoverDestroyedEvent;
 }
-export type { PopoverPlacement, PopoverColor, PopoverTrigger, Events };
+export type { PopoverPlacement, PopoverColor, PopoverTrigger, Events, PopoverShownEvent, PopoverHiddenEvent };

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

@@ -25,9 +25,13 @@ export declare class PopoverUtils {
      */
     setupAppendTo(): void;
     /**
-     * Sets up the accessibility attributes for the popover.
+     * Sets up the aria labels
      */
-    setupAccessibility(): void;
+    updateAriaLabels(): void;
+    /**
+     * Updates the aria-modal attribute based on the popover's role.
+     */
+    updateAriaModal(): void;
     /**
      * Updates the aria-haspopup attribute on the trigger element.
      */
@@ -54,4 +58,5 @@ export declare class PopoverUtils {
      */
     updatePopoverStyle(x: number, y: number): void;
     createBackdrop(): void;
+    removeBackdrop(): void;
 }

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

@@ -86,16 +86,10 @@ export class PopoverUtils {
         }
     }
     /**
-     * Sets up the accessibility attributes for the popover.
+     * Sets up the aria labels
      */
-    setupAccessibility() {
+    updateAriaLabels() {
         var _a, _b, _c;
-        if (this.popover.role === ROLE.DIALOG || this.popover.role === ROLE.ALERTDIALOG) {
-            this.popover.setAttribute('aria-modal', 'true');
-        }
-        else {
-            this.popover.removeAttribute('aria-modal');
-        }
         if (this.popover.interactive && this.popover.role) {
             if (!this.popover.ariaLabel) {
                 this.popover.ariaLabel =
@@ -106,6 +100,17 @@ export class PopoverUtils {
             }
         }
     }
+    /**
+     * Updates the aria-modal attribute based on the popover's role.
+     */
+    updateAriaModal() {
+        if (this.popover.role === ROLE.DIALOG || this.popover.role === ROLE.ALERTDIALOG) {
+            this.popover.setAttribute('aria-modal', 'true');
+        }
+        else {
+            this.popover.removeAttribute('aria-modal');
+        }
+    }
     /**
      * Updates the aria-haspopup attribute on the trigger element.
      */
@@ -201,4 +206,10 @@ export class PopoverUtils {
             this.popover.backdropElement = backdrop;
         }
     }
+    removeBackdrop() {
+        if (this.popover.backdropElement) {
+            this.popover.backdropElement.remove();
+            this.popover.backdropElement = null;
+        }
+    }
 }

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

@@ -307,6 +307,7 @@ class Select extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)) {
                 this.displayPopover = true;
                 // Prevent the default browser behavior of scrolling down
                 event.preventDefault();
+                event.stopPropagation();
                 break;
             case KEYS.ENTER:
             case KEYS.SPACE:
@@ -503,6 +504,7 @@ class Select extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)) {
           interactive
           ?visible="${this.displayPopover}"
           role=""
+          backdrop
           hide-on-outside-click
           hide-on-escape
           focus-back-to-trigger

package/dist/components/select/select.styles.js

@@ -78,7 +78,7 @@ const styles = css `
     display: flex;
     padding: 2px;
   }
-  :host::part(popover-content) {
+  :host mdc-popover::part(popover-content) {
     min-width: auto;
     max-height: var(--mdc-popover-max-height);
     padding: 0.75rem 0.5rem;

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

@@ -1,12 +1,14 @@
 import type { ValueOf, TypedEvent } from '../../utils/types';
-import type { PopoverPlacement } from '../popover/popover.types';
+import type { PopoverPlacement, PopoverShownEvent, PopoverHiddenEvent } from '../popover/popover.types';
 import type Select from './select.component';
 import { ARROW_ICON } from './select.constants';
 type SelectChangeEvent = TypedEvent<Select, {
     value: string;
+    label?: string;
 }>;
 type SelectInputEvent = TypedEvent<Select, {
     value: string;
+    label?: string;
 }>;
 interface Events {
     onClickEvent: MouseEvent;
@@ -14,6 +16,8 @@ interface Events {
     onInputEvent: SelectInputEvent;
     onKeyDownEvent: KeyboardEvent;
     onFocusEvent: FocusEvent;
+    onShownEvent: PopoverShownEvent;
+    onHiddenEvent: PopoverHiddenEvent;
 }
 type Placement = Extract<PopoverPlacement, 'bottom-start' | 'top-start'>;
 type ArrowIcon = ValueOf<typeof ARROW_ICON>;

package/dist/components/sidenavigation/sidenavigation.component.js

@@ -145,7 +145,7 @@ class SideNavigation extends Provider {
                 default:
             }
         };
-        this.addEventListener('activechange', this.handleNestedNavMenuItemActiveChange);
+        this.addEventListener('activechange', this.handleNestedNavMenuItemActiveChange.bind(this));
     }
     connectedCallback() {
         super.connectedCallback();

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

@@ -42,7 +42,7 @@ declare class Spinner extends Component {
      * The spinner color can be inverted by setting the inverted attribute to true.
      * @default false
      */
-    inverted: false;
+    inverted?: boolean;
     /**
      * Size of the spinner.
      * Acceptable values include:

package/dist/components/spinner/spinner.component.js

@@ -101,7 +101,7 @@ class Spinner extends Component {
 Spinner.styles = [...Component.styles, ...styles];
 __decorate([
     property({ type: Boolean, reflect: true }),
-    __metadata("design:type", Object)
+    __metadata("design:type", Boolean)
 ], Spinner.prototype, "inverted", void 0);
 __decorate([
     property({ type: String, reflect: true }),

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

@@ -97,6 +97,7 @@ declare class TabList extends Component {
      * Also set up the event listeners.
      */
     protected firstUpdated(): Promise<void>;
+    disconnectedCallback(): void;
     /**
      * Observe the tablist element for changes in the activeTabId attribute.
      * Find the new tab with the new activeTabId.