@momentum-design/components 0.112.5 → 0.112.7

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

@@ -1,2 +1,9 @@
 declare const TAG_NAME: "mdc-combobox";
-export { TAG_NAME };
+declare const ICON_NAME: {
+    readonly ARROW_UP: "arrow-up-bold";
+    readonly ARROW_DOWN: "arrow-down-bold";
+};
+declare const AUTOCOMPLETE_LIST = "list";
+declare const LISTBOX_ID = "combobox-listbox-id";
+declare const TRIGGER_ID = "combobox-trigger-id";
+export { TAG_NAME, ICON_NAME, TRIGGER_ID, LISTBOX_ID, AUTOCOMPLETE_LIST };

package/dist/components/combobox/combobox.constants.js

@@ -1,3 +1,10 @@
 import utils from '../../utils/tag-name';
 const TAG_NAME = utils.constructTagName('combobox');
-export { TAG_NAME };
+const ICON_NAME = {
+    ARROW_UP: 'arrow-up-bold',
+    ARROW_DOWN: 'arrow-down-bold',
+};
+const AUTOCOMPLETE_LIST = 'list';
+const LISTBOX_ID = 'combobox-listbox-id';
+const TRIGGER_ID = 'combobox-trigger-id';
+export { TAG_NAME, ICON_NAME, TRIGGER_ID, LISTBOX_ID, AUTOCOMPLETE_LIST };

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

@@ -0,0 +1,27 @@
+import type Option from '../option/option.component';
+import type Combobox from './combobox.component';
+export declare class ComboboxEventManager {
+    /**
+     * Dispatches a custom event for the Combobox.
+     *
+     * @param instance - The combobox instance.
+     * @param eventName - The name of the event.
+     * @param option - The option that triggered the event.
+     * @param bubbles - Whether the event should bubble up the DOM tree.
+     */
+    static dispatchComboboxEvent(instance: Combobox, eventName: string, option: Option, bubbles?: boolean): void;
+    /**
+     * Dispatches a custom event for the Combobox when the input value changes.
+     *
+     * @param instance - The combobox instance.
+     * @param option - The value and label of the selected option.
+     */
+    static onInputCombobox(instance: Combobox, option: Option): void;
+    /**
+     * Dispatches a custom event for the Combobox when the selected option changes.
+     *
+     * @param instance - The combobox instance.
+     * @param option - The value and label of the selected option.
+     */
+    static onChangeCombobox(instance: Combobox, option: Option): void;
+}

package/dist/components/combobox/combobox.events.js

@@ -0,0 +1,35 @@
+export class ComboboxEventManager {
+    /**
+     * Dispatches a custom event for the Combobox.
+     *
+     * @param instance - The combobox instance.
+     * @param eventName - The name of the event.
+     * @param option - The option that triggered the event.
+     * @param bubbles - Whether the event should bubble up the DOM tree.
+     */
+    static dispatchComboboxEvent(instance, eventName, option, bubbles = true) {
+        instance.dispatchEvent(new CustomEvent(eventName, {
+            detail: { value: option === null || option === void 0 ? void 0 : option.value, label: option === null || option === void 0 ? void 0 : option.label },
+            composed: true,
+            bubbles,
+        }));
+    }
+    /**
+     * Dispatches a custom event for the Combobox when the input value changes.
+     *
+     * @param instance - The combobox instance.
+     * @param option - The value and label of the selected option.
+     */
+    static onInputCombobox(instance, option) {
+        this.dispatchComboboxEvent(instance, 'input', option);
+    }
+    /**
+     * Dispatches a custom event for the Combobox when the selected option changes.
+     *
+     * @param instance - The combobox instance.
+     * @param option - The value and label of the selected option.
+     */
+    static onChangeCombobox(instance, option) {
+        this.dispatchComboboxEvent(instance, 'change', option);
+    }
+}

package/dist/components/combobox/combobox.styles.js

@@ -1,7 +1,128 @@
 import { css } from 'lit';
 const styles = css `
   :host {
-    display: block;
+    --mdc-combobox-border-color: var(--mds-color-theme-outline-input-normal);
+    --mdc-combobox-icon-color: var(--mds-color-theme-text-primary-normal);
+    --mdc-combobox-width: 100%;
+    --mdc-combobox-listbox-width: var(--mdc-combobox-width);
+    --mdc-combobox-listbox-height: auto;
+    --mdc-combobox-text-color-disabled: var(--mds-color-theme-text-primary-disabled);
+    --mdc-combobox-hover-background-color: var(--mds-color-theme-background-primary-hover);
+    --mdc-combobox-error-border-color: var(--mds-color-theme-text-error-normal);
+    --mdc-combobox-warning-border-color: var(--mds-color-theme-text-warning-normal);
+    --mdc-combobox-success-border-color: var(--mds-color-theme-text-success-normal);
+    --mdc-combobox-primary-border-color: var(--mds-color-theme-text-accent-normal);
+    --mdc-combobox-focused-background-color: var(--mds-color-theme-background-primary-ghost);
+    --mdc-combobox-focused-border-color: var(--mds-color-theme-outline-input-active);
+
+    display: flex;
+    flex-direction: column;
+    row-gap: 0.5rem;
+    width: var(--mdc-combobox-width);
+  }
+  :host::part(combobox__base) {
+    width: 100%;
+    display: flex;
+    position: relative;
+    border-radius: 0.5rem;
+  }
+  :host(:dir(ltr))::part(combobox__button) {
+    background-color: unset;
+    border-radius: 0 0.5rem 0.5rem 0;
+    border-left: 1px solid var(--mdc-combobox-border-color);
+    position: absolute;
+    padding: 0.5rem;
+    right: 0;
+  }
+  :host(:dir(rtl))::part(combobox__button) {
+    background-color: unset;
+    border-radius: 0.5rem 0 0 0.5rem;
+    border-right: 1px solid var(--mdc-combobox-border-color);
+    position: absolute;
+    padding: 0.5rem;
+    left: 0;
+  }
+  :host([disabled])::part(combobox__button) {
+    cursor: unset;
+  }
+  :host mdc-input {
+    --mdc-input-error-border-color: var(--mdc-combobox-error-border-color);
+    --mdc-input-warning-border-color: var(--mdc-combobox-warning-border-color);
+    --mdc-input-success-border-color: var(--mdc-combobox-success-border-color);
+    --mdc-input-primary-border-color: var(--mdc-combobox-primary-border-color);
+    --mdc-input-focused-border-color: var(--mdc-combobox-focused-border-color);
+    --mdc-input-focused-background-color: var(--mdc-combobox-focused-background-color);
+  }
+  :host(:focus-within)::part(combobox__button) {
+    border-left: 1px solid var(--mdc-combobox-focused-border-color);
+  }
+  :host(:not([disabled]))::part(combobox__base):hover {
+    background-color: var(--mdc-combobox-hover-background-color);
+  }
+  :host([help-text-type='error'])::part(combobox__button) {
+    border-color: var(--mdc-combobox-error-border-color);
+  }
+  :host([help-text-type='warning'])::part(combobox__button) {
+    border-color: var(--mdc-combobox-warning-border-color);
+  }
+  :host([help-text-type='success'])::part(combobox__button) {
+    border-color: var(--mdc-combobox-success-border-color);
+  }
+  :host([help-text-type='priority'])::part(combobox__button) {
+    border-color: var(--mdc-combobox-primary-border-color);
+  }
+  :host([disabled])::part(combobox__button) {
+    border-left: 1px solid var(--mdc-combobox-text-color-disabled);
+  }
+  :host::part(mdc-input) {
+    width: calc(100% - 1.5rem);
+  }
+  :host::part(combobox__button-icon) {
+    --mdc-icon-fill-color: var(--mdc-combobox-icon-color);
+  }
+  :host([disabled])::part(combobox__button-icon) {
+    --mdc-icon-fill-color: var(--mdc-combobox-text-color-disabled);
+  }
+  :host::part(no-result-text) {
+    pointer-events: none;
+  }
+  :host([disabled]) input,
+  :host([disabled]) mdc-input {
+    user-select: none;
+    pointer-events: none;
+  }
+  :host::part(internal-native-input) {
+    margin: 0;
+    opacity: 0.1%;
+    overflow: visible;
+    padding: 0;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    z-index: -1;
+  }
+  :host ::slotted(mdc-selectlistbox) {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    max-height: var(--mdc-popover-internal-available-height);
+  }
+  /* Popover height & width overrides */
+  :host mdc-popover {
+    --mdc-popover-max-height: var(--mdc-combobox-listbox-height);
+    --mdc-popover-max-width: var(--mdc-combobox-listbox-width);
+  }
+  :host mdc-popover::part(popover-content) {
+    max-height: var(--mdc-popover-max-height);
+    outline: none;
+  }
+  /* High Contrast Mode */
+  @media (forced-colors: active) {
+    :host::part(combobox__button-icon) {
+      --mdc-icon-fill-color: ButtonText;
+    }
   }
 `;
 export default [styles];

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

@@ -1,3 +1,24 @@
+import type { OverrideEventTarget, TypedCustomEvent, ValueOf } from '../../utils/types';
+import type { PopoverHiddenEvent, PopoverPlacement, PopoverShownEvent } from '../popover/popover.types';
+import type Combobox from './combobox.component';
+import { ICON_NAME } from './combobox.constants';
+type ComboboxChangeEvent = TypedCustomEvent<Combobox, {
+    value: string;
+    label?: string;
+}>;
+type ComboboxInputEvent = TypedCustomEvent<Combobox, {
+    value: string;
+    label?: string;
+}>;
 interface Events {
+    onClickEvent: OverrideEventTarget<MouseEvent, Combobox>;
+    onChangeEvent: ComboboxChangeEvent;
+    onInputEvent: ComboboxInputEvent;
+    onKeyDownEvent: OverrideEventTarget<KeyboardEvent, Combobox>;
+    onFocusEvent: OverrideEventTarget<FocusEvent, Combobox>;
+    onShownEvent: PopoverShownEvent;
+    onHiddenEvent: PopoverHiddenEvent;
 }
-export type { Events };
+type Placement = Extract<PopoverPlacement, 'bottom-start' | 'top-start'>;
+type IconName = ValueOf<typeof ICON_NAME>;
+export type { Events, IconName, Placement };

package/dist/components/combobox/combobox.types.js

@@ -1,2 +1 @@
-// import type { ValueOf } from '../../utils/types';
 export {};

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

@@ -1,3 +1,8 @@
+import '../buttonsimple';
+import '../icon';
+import '../input';
+import '../listitem';
+import '../popover';
 import Combobox from './combobox.component';
 declare global {
     interface HTMLElementTagNameMap {

package/dist/components/combobox/index.js

@@ -1,3 +1,8 @@
+import '../buttonsimple';
+import '../icon';
+import '../input';
+import '../listitem';
+import '../popover';
 import Combobox from './combobox.component';
 import { TAG_NAME } from './combobox.constants';
 Combobox.register(TAG_NAME);

package/dist/components/divider/divider.styles.js

@@ -203,6 +203,10 @@ const styles = [
       line-height: var(--mdc-divider-text-line-height);
       flex-shrink: 0;
     }
+
+    :host([data-hidden]) {
+      display: none;
+    }
   `,
 ];
 export default styles;

package/dist/components/input/input.styles.js

@@ -31,6 +31,16 @@ const styles = [
       font-family: inherit;
     }
 
+    :host .input-container:hover {
+      background-color: var(--mdc-input-hover-background-color);
+    }
+
+    :host .input-container:active,
+    :host .input-container:focus-within {
+      background-color: var(--mdc-input-focused-background-color);
+      border-color: var(--mdc-input-focused-border-color);
+    }
+
     :host([readonly]) .leading-icon {
       color: var(--mdc-input-support-text-color);
     }
@@ -89,16 +99,6 @@ const styles = [
       white-space: nowrap; /* restrict prefix text to be in one line */
     }
 
-    :host(:not([disabled])) .input-container:hover {
-      background-color: var(--mdc-input-hover-background-color);
-    }
-
-    :host(:not([disabled])) .input-container:active,
-    :host(:not([disabled])) .input-container:focus-within {
-      background-color: var(--mdc-input-focused-background-color);
-      border-color: var(--mdc-input-focused-border-color);
-    }
-
     .input::placeholder {
       color: var(--mdc-input-support-text-color);
     }

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

@@ -40,7 +40,7 @@ declare class Link extends Link_base {
      * @returns The icon size value and units.
      */
     private getIconSize;
-    render(): import("lit-html").TemplateResult<1>;
+    protected renderAnchorContent(): import("lit-html").TemplateResult<1>;
     static styles: Array<CSSResult>;
 }
 export default Link;

package/dist/components/link/link.component.js

@@ -9,7 +9,6 @@ var __metadata = (this && this.__metadata) || function (k, v) {
 };
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
-import { ifDefined } from 'lit/directives/if-defined.js';
 import { IconNameMixin } from '../../utils/mixins/IconNameMixin';
 import Linksimple from '../linksimple/linksimple.component';
 import { DEFAULTS, LINK_ICON_SIZES, LINK_SIZES } from './link.constants';
@@ -64,34 +63,11 @@ class Link extends IconNameMixin(Linksimple) {
                 return LINK_ICON_SIZES.LARGE;
         }
     }
-    render() {
-        var _a;
-        return html `
-      <a
-        class="mdc-focus-ring"
-        part="anchor"
-        href="${this.href}"
-        target="${this.target}"
-        rel="${ifDefined(this.rel)}"
-        download="${ifDefined(this.download)}"
-        ping="${ifDefined(this.ping)}"
-        hreflang="${ifDefined(this.hreflang)}"
-        type="${ifDefined(this.type)}"
-        referrerpolicy="${ifDefined(this.referrerpolicy)}"
-        aria-label="${(_a = this.dataAriaLabel) !== null && _a !== void 0 ? _a : ''}"
-        tabindex="${this.disabled ? -1 : 0}"
-      >
-        <slot></slot>
-        ${this.iconName
-            ? html `<mdc-icon
-              part="icon"
-              name="${this.iconName}"
-              size="${this.getIconSize()}"
-              length-unit="rem"
-            ></mdc-icon>`
-            : nothing}
-      </a>
-    `;
+    renderAnchorContent() {
+        return html ` <slot></slot>
+      ${this.iconName
+            ? html `<mdc-icon part="icon" name="${this.iconName}" size="${this.getIconSize()}" length-unit="rem"></mdc-icon>`
+            : nothing}`;
     }
 }
 Link.styles = [...Linksimple.styles, ...styles];

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

@@ -41,9 +41,8 @@ declare class Linksimple extends Linksimple_base {
     inverted: boolean;
     /**
      * Href for navigation. The URL that the hyperlink points to
-     * @default #
      */
-    href: string;
+    href?: string;
     /**
      * Optional target: _blank, _self, _parent, _top and _unfencedTop
      * @default _self
@@ -85,6 +84,12 @@ declare class Linksimple extends Linksimple_base {
      */
     private setDisabled;
     update(changedProperties: PropertyValues): void;
+    /**
+     * Protected method to render the anchor content.
+     * Override this method to customize the content inside the anchor tag.
+     * @internal
+     */
+    protected renderAnchorContent(): import("lit-html").TemplateResult<1>;
     render(): import("lit-html").TemplateResult<1>;
     static styles: Array<CSSResult>;
 }

package/dist/components/linksimple/linksimple.component.js

@@ -55,11 +55,6 @@ class Linksimple extends DataAriaLabelMixin(DisabledMixin(Component)) {
          * @default false
          */
         this.inverted = DEFAULTS.INVERTED;
-        /**
-         * Href for navigation. The URL that the hyperlink points to
-         * @default #
-         */
-        this.href = '#';
         /**
          * Optional target: _blank, _self, _parent, _top and _unfencedTop
          * @default _self
@@ -103,11 +98,19 @@ class Linksimple extends DataAriaLabelMixin(DisabledMixin(Component)) {
             this.setDisabled(this.disabled);
         }
     }
+    /**
+     * Protected method to render the anchor content.
+     * Override this method to customize the content inside the anchor tag.
+     * @internal
+     */
+    renderAnchorContent() {
+        return html `<slot></slot>`;
+    }
     render() {
         var _a;
         return html `
       <a
-        class='mdc-focus-ring'
+        class="mdc-focus-ring"
         part="anchor"
         href="${this.href}"
         target="${this.target}"
@@ -120,7 +123,7 @@ class Linksimple extends DataAriaLabelMixin(DisabledMixin(Component)) {
         aria-label="${(_a = this.dataAriaLabel) !== null && _a !== void 0 ? _a : ''}"
         tabindex="${this.disabled ? -1 : 0}"
       >
-        <slot></slot>
+        ${this.renderAnchorContent()}
       </a>
     `;
     }
@@ -136,7 +139,7 @@ __decorate([
 ], Linksimple.prototype, "inverted", void 0);
 __decorate([
     property({ type: String, reflect: true }),
-    __metadata("design:type", Object)
+    __metadata("design:type", String)
 ], Linksimple.prototype, "href", void 0);
 __decorate([
     property({ type: String, reflect: true }),

package/dist/components/optgroup/optgroup.styles.js

@@ -12,5 +12,8 @@ const styles = css `
     color: var(--mdc-optgroup-disabled-color);
     cursor: default;
   }
+  :host([data-hidden]) {
+    display: none;
+  }
 `;
 export default [styles];

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

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

package/dist/components/option/option.styles.js

@@ -1,27 +1,40 @@
 import { css } from 'lit';
-const styles = css `
-  :host {
-    --mdc-listitem-column-gap: 0.75rem;
-    --mdc-option-icon-width: 1rem;
-    flex-shrink: 0;
-  }
+import { baseHostStyleVariables, focusRingBoxShadow } from '../../utils/styles';
+const styles = [
+    baseHostStyleVariables,
+    css `
+    :host {
+      --mdc-listitem-column-gap: 0.75rem;
+      --mdc-option-icon-width: 1rem;
+      flex-shrink: 0;
+    }
 
-  :host::part(leading-icon),
-  :host::part(trailing) {
-    display: flex;
-    align-items: center;
-    width: var(--mdc-option-icon-width);
-  }
+    :host::part(leading-icon),
+    :host::part(trailing) {
+      display: flex;
+      align-items: center;
+      width: var(--mdc-option-icon-width);
+    }
 
-  :host::part(leading-text) {
-    flex: 1;
-  }
+    :host::part(leading-text) {
+      flex: 1;
+    }
 
-  :host::part(leading-icon) {
-    margin-inline-end: var(--mdc-listitem-column-gap);
-  }
-  :host::part(trailing) {
-    margin-inline-start: var(--mdc-listitem-column-gap);
-  }
-`;
-export default [styles];
+    :host::part(leading-icon) {
+      margin-inline-end: var(--mdc-listitem-column-gap);
+    }
+    :host::part(trailing) {
+      margin-inline-start: var(--mdc-listitem-column-gap);
+    }
+
+    :host([data-focused]) {
+      outline: none;
+      position: relative;
+      box-shadow: ${focusRingBoxShadow};
+    }
+    :host([data-hidden]) {
+      display: none;
+    }
+  `,
+];
+export default styles;

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

@@ -1,6 +1,6 @@
 import { CSSResult, PropertyValues } from 'lit';
 import { Component } from '../../models';
-import type { PopoverColor, PopoverPlacement, PopoverTrigger } from './popover.types';
+import type { PopoverColor, PopoverPlacement, PopoverStrategy, PopoverTrigger } from './popover.types';
 declare const Popover_base: import("../../utils/mixins/index.types").Constructor<Component & import("../../utils/mixins/BackdropMixin").BackdropMixinInterface> & 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.
@@ -250,7 +250,7 @@ declare class Popover extends Popover_base {
      * @default absolute
      * @see [Floating UI - strategy](https://floating-ui.com/docs/computePosition#strategy)
      */
-    strategy: 'absolute' | 'fixed';
+    strategy: PopoverStrategy;
     /**
      * Role of the popover
      * @default dialog

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

@@ -953,7 +953,7 @@ __decorate([
     __metadata("design:type", Object)
 ], Popover.prototype, "closeButtonAriaLabel", void 0);
 __decorate([
-    property({ type: String, reflect: true, attribute: 'strategy' }),
+    property({ type: String, reflect: true }),
     __metadata("design:type", String)
 ], Popover.prototype, "strategy", void 0);
 __decorate([

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

@@ -23,6 +23,10 @@ declare const COLOR: {
     readonly TONAL: "tonal";
     readonly CONTRAST: "contrast";
 };
+declare const STRATEGY: {
+    readonly ABSOLUTE: "absolute";
+    readonly FIXED: "fixed";
+};
 declare const DEFAULTS: {
     readonly PLACEMENT: "bottom";
     readonly TRIGGER: "click";
@@ -53,4 +57,4 @@ declare const DEFAULTS: {
     readonly STRATEGY: "absolute";
     readonly IS_BACKDROP_INVISIBLE: true;
 };
-export { TAG_NAME, POPOVER_PLACEMENT, COLOR, TRIGGER, DEFAULTS };
+export { TAG_NAME, POPOVER_PLACEMENT, COLOR, STRATEGY, TRIGGER, DEFAULTS };

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

@@ -1,4 +1,5 @@
 import utils from '../../utils/tag-name';
+import { ROLE } from '../../utils/roles';
 const TAG_NAME = utils.constructTagName('popover');
 const POPOVER_PLACEMENT = {
     LEFT_START: 'left-start',
@@ -24,6 +25,10 @@ const COLOR = {
     TONAL: 'tonal',
     CONTRAST: 'contrast',
 };
+const STRATEGY = {
+    ABSOLUTE: 'absolute',
+    FIXED: 'fixed',
+};
 const DEFAULTS = {
     PLACEMENT: POPOVER_PLACEMENT.BOTTOM,
     TRIGGER: TRIGGER.CLICK,
@@ -46,7 +51,7 @@ const DEFAULTS = {
     FLIP: true,
     SIZE: false,
     DELAY: '0,0',
-    ROLE: 'dialog',
+    ROLE: ROLE.DIALOG,
     Z_INDEX: 1000,
     DISABLE_ARIA_EXPANDED: false,
     PROPAGATE_EVENT_ON_ESCAPE: false,
@@ -54,4 +59,4 @@ const DEFAULTS = {
     STRATEGY: 'absolute',
     IS_BACKDROP_INVISIBLE: true,
 };
-export { TAG_NAME, POPOVER_PLACEMENT, COLOR, TRIGGER, DEFAULTS };
+export { TAG_NAME, POPOVER_PLACEMENT, COLOR, STRATEGY, TRIGGER, DEFAULTS };

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

@@ -1,8 +1,9 @@
 import type { ValueOf, TypedCustomEvent } from '../../utils/types';
 import type Popover from './popover.component';
-import { POPOVER_PLACEMENT, TRIGGER, COLOR } from './popover.constants';
+import { POPOVER_PLACEMENT, TRIGGER, COLOR, STRATEGY } from './popover.constants';
 type PopoverPlacement = ValueOf<typeof POPOVER_PLACEMENT>;
 type PopoverColor = ValueOf<typeof COLOR>;
+type PopoverStrategy = ValueOf<typeof STRATEGY>;
 type PopoverTrigger = ValueOf<typeof TRIGGER> | `${ValueOf<typeof TRIGGER>} ${ValueOf<typeof TRIGGER>}`;
 type PopoverShownEvent = TypedCustomEvent<Popover, {
     show: boolean;
@@ -22,4 +23,4 @@ interface Events {
     onCreatedEvent: PopoverCreatedEvent;
     onDestroyedEvent: PopoverDestroyedEvent;
 }
-export type { PopoverPlacement, PopoverColor, PopoverTrigger, Events, PopoverShownEvent, PopoverHiddenEvent };
+export type { PopoverPlacement, PopoverColor, PopoverStrategy, PopoverTrigger, Events, PopoverShownEvent, PopoverHiddenEvent, };