vira 22.1.2 → 22.2.0

package/dist/elements/index.js

@@ -1,5 +1,8 @@
 /** This file is automatically updated by update-index-exports.ts */
 export * from './define-vira-element';
+export * from './dropdown/vira-dropdown-item.element';
+export * from './dropdown/vira-dropdown-options.element';
+export * from './dropdown/vira-dropdown.element';
 export * from './vira-button.element';
 export * from './vira-collapsible-wrapper.element';
 export * from './vira-icon.element';

package/dist/elements/vira-button.element.js

@@ -1,10 +1,10 @@
 import { css, html } from 'element-vir';
 import { noUserSelect } from '../styles';
+import { viraBorders } from '../styles/border';
 import { viraDisabledStyles } from '../styles/disabled';
 import { viraAnimationDurations } from '../styles/durations';
 import { createFocusStyles, viraFocusCssVars } from '../styles/focus';
 import { noNativeFormStyles } from '../styles/native-styles';
-import { viraCssVars } from '../styles/vira-css-vars';
 import { defineViraElement } from './define-vira-element';
 import { ViraIcon } from './vira-icon.element';
 export var ViraButtonStyleEnum;
@@ -75,7 +75,7 @@ export const ViraButton = defineViraElement()({
             display: inline-flex;
             justify-content: center;
             align-items: center;
-            border-radius: ${viraCssVars['vira-form-input-border-radius'].value};
+            border-radius: ${viraBorders['vira-form-input-radius'].value};
             background-color: ${cssVars['vira-button-internal-background-color'].value};
             color: ${cssVars['vira-button-internal-foreground-color'].value};
             padding: ${cssVars['vira-button-padding'].value};
@@ -87,7 +87,7 @@ export const ViraButton = defineViraElement()({
         }
 
         ${createFocusStyles({
-        mainSelector: 'button:focus:focus-visible:not(:active):not([disabled])',
+        selector: 'button:focus:focus-visible:not(:active):not([disabled])',
         elementBorderSize: 2,
     })}
 

package/dist/elements/vira-collapsible-wrapper.element.d.ts

@@ -1,10 +1,7 @@
-export declare enum ViraCollapsibleSlotNameEnum {
-    Header = "header"
-}
 export declare const ViraCollapsibleWrapper: import("element-vir").DeclarativeElementDefinition<"vira-collapsible-wrapper", {
     expanded: boolean;
 }, {
     contentHeight: number;
 }, {
     expandChange: import("element-vir").DefinedTypedEventNameDefinition<boolean>;
-}, "vira-collapsible-wrapper-expanded", `vira-collapsible-wrapper-${string}`, readonly string[]>;
+}, "vira-collapsible-wrapper-expanded", `vira-collapsible-wrapper-${string}`, readonly ["header"]>;

package/dist/elements/vira-collapsible-wrapper.element.js

@@ -1,15 +1,12 @@
 import { css, defineElementEvent, html, listen, onResize } from 'element-vir';
 import { noNativeFormStyles, viraAnimationDurations } from '../styles';
 import { defineViraElement } from './define-vira-element';
-export var ViraCollapsibleSlotNameEnum;
-(function (ViraCollapsibleSlotNameEnum) {
-    ViraCollapsibleSlotNameEnum["Header"] = "header";
-})(ViraCollapsibleSlotNameEnum || (ViraCollapsibleSlotNameEnum = {}));
 export const ViraCollapsibleWrapper = defineViraElement()({
     tagName: 'vira-collapsible-wrapper',
     hostClasses: {
         'vira-collapsible-wrapper-expanded': ({ inputs }) => inputs.expanded,
     },
+    slotNames: ['header'],
     styles: ({ hostClasses }) => css `
         :host {
             display: flex;
@@ -42,7 +39,7 @@ export const ViraCollapsibleWrapper = defineViraElement()({
     stateInitStatic: {
         contentHeight: 0,
     },
-    renderCallback({ state, updateState, dispatch, events, inputs }) {
+    renderCallback({ state, slotNames, updateState, dispatch, events, inputs }) {
         const collapsingStyles = inputs.expanded
             ? css `
                   height: ${state.contentHeight}px;
@@ -57,7 +54,7 @@ export const ViraCollapsibleWrapper = defineViraElement()({
             dispatch(new events.expandChange(!inputs.expanded));
         })}
             >
-                <slot name=${ViraCollapsibleSlotNameEnum.Header}>Header</slot>
+                <slot name=${slotNames.header}>Header</slot>
             </button>
             <div class="collapsing-element" style=${collapsingStyles} disabled="disabled">
                 <div

package/dist/elements/vira-input.element.d.ts

@@ -27,4 +27,4 @@ export declare const ViraInput: import("element-vir").DeclarativeElementDefiniti
      * that was blocked out of programmatic "value" property assignments.
      */
     inputBlocked: import("element-vir").DefinedTypedEventNameDefinition<string>;
-}, "vira-input-disabled" | "vira-input-fit-text" | "vira-input-clear-button-shown", "vira-input-placeholder-color" | "vira-input-text-color" | "vira-input-border-color" | "vira-input-focus-border-color" | "vira-input-text-selection-color" | "vira-input-action-button-color" | "vira-input-clear-button-hover-color" | "vira-input-clear-button-active-color" | "vira-input-show-password-button-hover-color" | "vira-input-show-password-button-active-color" | "vira-input-padding-horizontal" | "vira-input-padding-vertical", readonly string[]>;
+}, "vira-input-disabled" | "vira-input-fit-text" | "vira-input-clear-button-shown", "vira-input-background-color" | "vira-input-placeholder-color" | "vira-input-text-color" | "vira-input-border-color" | "vira-input-focus-border-color" | "vira-input-text-selection-color" | "vira-input-action-button-color" | "vira-input-clear-button-hover-color" | "vira-input-clear-button-active-color" | "vira-input-show-password-button-hover-color" | "vira-input-show-password-button-active-color" | "vira-input-padding-horizontal" | "vira-input-padding-vertical", readonly string[]>;

package/dist/elements/vira-input.element.js

@@ -1,10 +1,9 @@
 import { css, defineElementEvent, html, listen, onResize, renderIf, } from 'element-vir';
 import { EyeClosed24Icon, EyeOpen24Icon } from '../icons';
 import { CloseX24Icon } from '../icons/icon-svgs/close-x-24.icon';
-import { noUserSelect, viraAnimationDurations, viraDisabledStyles } from '../styles';
+import { noUserSelect, viraAnimationDurations, viraBorders, viraDisabledStyles } from '../styles';
 import { createFocusStyles, viraFocusCssVars } from '../styles/focus';
 import { noNativeFormStyles } from '../styles/native-styles';
-import { viraCssVars } from '../styles/vira-css-vars';
 import { defineViraElement } from './define-vira-element';
 import { filterTextInputValue, textInputListener, } from './shared-text-input-logic';
 import { ViraIcon } from './vira-icon.element';
@@ -23,10 +22,11 @@ export const ViraInput = defineViraElement()({
         'vira-input-clear-button-shown': ({ inputs }) => !!inputs.showClearButton,
     },
     cssVars: {
+        'vira-input-background-color': 'white',
         'vira-input-placeholder-color': '#cccccc',
         'vira-input-text-color': '#000000',
         'vira-input-border-color': '#cccccc',
-        'vira-input-focus-border-color': '#59b1ff',
+        'vira-input-focus-border-color': viraFocusCssVars['vira-focus-outline-color'].default,
         'vira-input-text-selection-color': '#cfe9ff',
         'vira-input-action-button-color': '#aaaaaa',
         'vira-input-clear-button-hover-color': '#ff0000',
@@ -120,7 +120,7 @@ export const ViraInput = defineViraElement()({
                 left: 0;
                 width: 100%;
                 height: 100%;
-                border-radius: ${viraCssVars['vira-form-input-border-radius'].value};
+                border-radius: ${viraBorders['vira-form-input-radius'].value};
                 z-index: 0;
                 pointer-events: none;
             }
@@ -142,8 +142,8 @@ export const ViraInput = defineViraElement()({
                 align-items: center;
                 position: relative;
                 padding: 0 ${cssVars['vira-input-padding-horizontal'].value};
-                border-radius: ${viraCssVars['vira-form-input-border-radius'].value};
-                background-color: transparent;
+                border-radius: ${viraBorders['vira-form-input-radius'].value};
+                background-color: ${cssVars['vira-input-background-color'].value};
                 /*
                     Border colors are actually applied via the .label-border class. However, we must
                     apply a border here still so that it takes up space.
@@ -154,7 +154,7 @@ export const ViraInput = defineViraElement()({
             }
 
             ${createFocusStyles({
-            mainSelector: 'input:focus:focus-visible:not(:active):not([disabled]) ~ .focus-border',
+            selector: 'input:focus:focus-visible:not(:active):not([disabled]) ~ .focus-border',
             elementBorderSize: 0,
         })}
 

package/dist/elements/vira-link.element.d.ts

@@ -18,6 +18,4 @@ export declare const ViraLink: import("element-vir").DeclarativeElementDefinitio
         router: Pick<SpaRouter<any, any, any>, 'createRouteUrl' | 'setRouteOnDirectNavigation'>;
         scrollToTop?: boolean;
     };
-}>, {}, {
-    routeChange: import("element-vir").DefinedTypedEventNameDefinition<FullRoute>;
-}, `vira-link-${string}`, "vira-link-hover-color", readonly string[]>;
+}>, {}, {}, `vira-link-${string}`, "vira-link-hover-color", readonly string[]>;

package/dist/elements/vira-link.element.js

@@ -1,5 +1,4 @@
-import { css, defineElementEvent, html, listen } from 'element-vir';
-import { shouldClickEventTriggerRouteChange } from 'spa-router-vir';
+import { css, html, listen } from 'element-vir';
 import { defineViraElement } from './define-vira-element';
 export const ViraLink = defineViraElement()({
     tagName: 'vira-link',
@@ -29,20 +28,14 @@ export const ViraLink = defineViraElement()({
             color: ${cssVars['vira-link-hover-color'].value};
         }
     `,
-    events: {
-        routeChange: defineElementEvent(),
-    },
-    renderCallback({ inputs, dispatch, events }) {
+    renderCallback({ inputs }) {
         function clickCallback(event) {
             if (!inputs.route) {
                 return;
             }
-            if (shouldClickEventTriggerRouteChange(event)) {
-                event.preventDefault();
-                if (inputs.route.scrollToTop) {
-                    window.scrollTo(0, 0);
-                }
-                dispatch(new events.routeChange(inputs.route.route));
+            if (inputs.route.router.setRouteOnDirectNavigation(inputs.route.route, event) &&
+                inputs.route.scrollToTop) {
+                window.scrollTo(0, 0);
             }
         }
         if (inputs.link?.newTab) {

package/dist/icons/icon-svgs/check-24.icon.d.ts

@@ -0,0 +1 @@
+export declare const Check24Icon: import("../icon-svg").ViraIconSvg;

package/dist/icons/icon-svgs/check-24.icon.js

@@ -0,0 +1,16 @@
+import { html } from 'element-vir';
+import { viraIconCssVars } from '../icon-css-vars';
+import { defineIcon } from '../icon-svg';
+export const Check24Icon = defineIcon({
+    name: 'Check24Icon',
+    svgTemplate: html `
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+            <path
+                d="m17 8.5-7 8-3-3"
+                fill="none"
+                stroke=${viraIconCssVars['vira-icon-stroke-color'].value}
+                stroke-width=${viraIconCssVars['vira-icon-stroke-width'].value}
+            />
+        </svg>
+    `,
+});

package/dist/icons/icon-svgs/chevron-up-24.icon.d.ts

@@ -0,0 +1 @@
+export declare const ChevronUp24Icon: import("../icon-svg").ViraIconSvg;

package/dist/icons/icon-svgs/chevron-up-24.icon.js

@@ -0,0 +1,23 @@
+import { html } from 'element-vir';
+import { viraIconCssVars } from '../icon-css-vars';
+import { defineIcon } from '../icon-svg';
+export const ChevronUp24Icon = defineIcon({
+    name: 'ChevronUp24Icon',
+    svgTemplate: html `
+        <svg
+            xmlns="http://www.w3.org/2000/svg"
+            stroke=${viraIconCssVars['vira-icon-stroke-color'].value}
+            fill="none"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+        >
+            <path
+                stroke-width=${viraIconCssVars['vira-icon-stroke-width'].value}
+                d="M6 15 L12 9 18 15"
+            />
+        </svg>
+    `,
+});

package/dist/icons/index.d.ts

@@ -1,6 +1,8 @@
 /** This file is automatically updated by update-icon-exports.ts */
 export * from './icon-css-vars';
 export * from './icon-svg';
+export * from './icon-svgs/check-24.icon';
+export * from './icon-svgs/chevron-up-24.icon';
 export * from './icon-svgs/close-x-24.icon';
 export * from './icon-svgs/element-16.icon';
 export * from './icon-svgs/element-24.icon';
@@ -13,6 +15,8 @@ export * from './icon-svgs/status-failure-24.icon';
 export * from './icon-svgs/status-in-progress-24.icon';
 export * from './icon-svgs/status-success-24.icon';
 export declare const allIconsByName: {
+    readonly Check24Icon: import("./icon-svg").ViraIconSvg;
+    readonly ChevronUp24Icon: import("./icon-svg").ViraIconSvg;
     readonly CloseX24Icon: import("./icon-svg").ViraIconSvg;
     readonly Element16Icon: import("./icon-svg").ViraIconSvg;
     readonly Element24Icon: import("./icon-svg").ViraIconSvg;

package/dist/icons/index.js

@@ -1,4 +1,6 @@
 /** This file is automatically updated by update-icon-exports.ts */
+import { Check24Icon } from './icon-svgs/check-24.icon';
+import { ChevronUp24Icon } from './icon-svgs/chevron-up-24.icon';
 import { CloseX24Icon } from './icon-svgs/close-x-24.icon';
 import { Element16Icon } from './icon-svgs/element-16.icon';
 import { Element24Icon } from './icon-svgs/element-24.icon';
@@ -12,6 +14,8 @@ import { StatusInProgress24Icon } from './icon-svgs/status-in-progress-24.icon';
 import { StatusSuccess24Icon } from './icon-svgs/status-success-24.icon';
 export * from './icon-css-vars';
 export * from './icon-svg';
+export * from './icon-svgs/check-24.icon';
+export * from './icon-svgs/chevron-up-24.icon';
 export * from './icon-svgs/close-x-24.icon';
 export * from './icon-svgs/element-16.icon';
 export * from './icon-svgs/element-24.icon';
@@ -24,6 +28,8 @@ export * from './icon-svgs/status-failure-24.icon';
 export * from './icon-svgs/status-in-progress-24.icon';
 export * from './icon-svgs/status-success-24.icon';
 export const allIconsByName = {
+    Check24Icon,
+    ChevronUp24Icon,
     CloseX24Icon,
     Element16Icon,
     Element24Icon,

package/dist/index.d.ts

@@ -3,3 +3,4 @@ export * from './elements';
 export * from './icons';
 export * from './re-exports';
 export * from './styles';
+export * from './util';

package/dist/index.js

@@ -3,3 +3,4 @@ export * from './elements';
 export * from './icons';
 export * from './re-exports';
 export * from './styles';
+export * from './util';

package/dist/styles/border.d.ts

@@ -0,0 +1,3 @@
+export declare const viraBorders: import("lit-css-vars").CssVarDefinitions<{
+    'vira-form-input-radius': string;
+}>;

package/dist/styles/border.js

@@ -0,0 +1,4 @@
+import { defineCssVars } from 'lit-css-vars';
+export const viraBorders = defineCssVars({
+    'vira-form-input-radius': '8px',
+});

package/dist/styles/color.d.ts

@@ -1,4 +1,4 @@
 import { Format } from 'colorjs.io/types/src/space';
 import { ColorTypes } from '../re-exports/colorjs-io';
-export declare function getAssertedValidColor(input: ColorTypes | undefined): import("colorjs.io/types").default;
+export declare function getAssertedValidColor(input: ColorTypes | undefined): import("colorjs.io/types/src/color").default;
 export declare const rgbCssColorFormat: Format;

package/dist/styles/disabled.js

@@ -2,4 +2,5 @@ import { css } from 'element-vir';
 export const viraDisabledStyles = css `
     pointer-events: none;
     opacity: 0.3;
+    cursor: not-allowed;
 `;

package/dist/styles/focus.d.ts

@@ -8,8 +8,8 @@ export declare const viraFocusCssVars: import("lit-css-vars").CssVarDefinitions<
  * It is recommended to use the pseudo selectors ":focus:focus-visible:not(:active)" to preventing
  * clicking from creating focus styles in Chrome.
  */
-export declare function createFocusStyles({ mainSelector, elementBorderSize, outlineGap, outlineWidth, }: {
-    mainSelector: string;
+export declare function createFocusStyles({ selector, elementBorderSize, outlineGap, outlineWidth, }: {
+    selector: string;
     /**
      * ElementBorderSize here is used to fix the outline when the element these styles are attached
      * to has a border. The dev must specify that border size here for the offsets to be calculated

package/dist/styles/focus.js

@@ -1,10 +1,10 @@
 import { addPx } from '@augment-vir/common';
 import { css, unsafeCSS } from 'element-vir';
 import { defineCssVars } from 'lit-css-vars';
-import { viraCssVars } from './vira-css-vars';
+import { viraBorders } from './border';
 export const viraFocusCssVars = defineCssVars({
-    'vira-focus-outline-color': 'blue',
-    'vira-focus-outline-border-radius': css `calc(${viraCssVars['vira-form-input-border-radius'].value} + 4px)`,
+    'vira-focus-outline-color': '#59b1ff',
+    'vira-focus-outline-border-radius': css `calc(${viraBorders['vira-form-input-radius'].value} + 4px)`,
 });
 /**
  * Create styles that look like an outline for the given selector.
@@ -12,10 +12,10 @@ export const viraFocusCssVars = defineCssVars({
  * It is recommended to use the pseudo selectors ":focus:focus-visible:not(:active)" to preventing
  * clicking from creating focus styles in Chrome.
  */
-export function createFocusStyles({ mainSelector, elementBorderSize, outlineGap = 2, outlineWidth = 3, }) {
+export function createFocusStyles({ selector, elementBorderSize, outlineGap = 2, outlineWidth = 2, }) {
     const outlineSpacing = unsafeCSS(addPx(outlineWidth + outlineGap + elementBorderSize));
     return css `
-        ${unsafeCSS(mainSelector)}::after {
+        ${unsafeCSS(selector)}::after {
             content: '';
             top: calc(${outlineSpacing} * -1);
             left: calc(${outlineSpacing} * -1);

package/dist/styles/form-themes.d.ts

@@ -0,0 +1,8 @@
+export declare const viraFormCssVars: import("lit-css-vars").CssVarDefinitions<{
+    'vira-form-border-color': string;
+    'vira-form-background-color': string;
+    'vira-form-foreground-color': string;
+    'vira-form-focus-color': import("lit").CSSResult;
+    'vira-form-selection-hover-background-color': string;
+    'vira-form-selection-hover-foreground-color': string;
+}>;

package/dist/styles/form-themes.js

@@ -0,0 +1,10 @@
+import { defineCssVars } from 'lit-css-vars';
+import { viraFocusCssVars } from './focus';
+export const viraFormCssVars = defineCssVars({
+    'vira-form-border-color': '#cccccc',
+    'vira-form-background-color': 'white',
+    'vira-form-foreground-color': 'black',
+    'vira-form-focus-color': viraFocusCssVars['vira-focus-outline-color'].value,
+    'vira-form-selection-hover-background-color': '#d2eaff',
+    'vira-form-selection-hover-foreground-color': 'black',
+});

package/dist/styles/index.d.ts

@@ -1,9 +1,11 @@
 /** This file is automatically updated by update-index-exports.ts */
+export * from './border';
 export * from './color';
 export * from './disabled';
 export * from './durations';
 export * from './focus';
+export * from './form-themes';
 export * from './native-styles';
 export * from './scrollbar';
+export * from './shadows';
 export * from './user-select';
-export * from './vira-css-vars';

package/dist/styles/index.js

@@ -1,9 +1,11 @@
 /** This file is automatically updated by update-index-exports.ts */
+export * from './border';
 export * from './color';
 export * from './disabled';
 export * from './durations';
 export * from './focus';
+export * from './form-themes';
 export * from './native-styles';
 export * from './scrollbar';
+export * from './shadows';
 export * from './user-select';
-export * from './vira-css-vars';

package/dist/styles/scrollbar.js

@@ -2,8 +2,10 @@ import { css, unsafeCSS } from 'element-vir';
 export function hideScrollbars(selector) {
     return css `
         ${unsafeCSS(selector)} {
-            scrollbar-width: none; /* hide scrollbars in Firefox */
-            -ms-overflow-style: none; /* hide scrollbars in IE 10+ */
+            /* hide scrollbars in Firefox */
+            scrollbar-width: none;
+            /* hide scrollbars in IE 10+ */
+            -ms-overflow-style: none;
         }
 
         /* hide scrollbars in Chrome/Safari/Webkit */

package/dist/styles/shadows.d.ts

@@ -0,0 +1,5 @@
+import { CSSResult } from 'element-vir';
+export declare const viraShadows: {
+    readonly menuShadow: CSSResult;
+    readonly menuShadowReversed: CSSResult;
+};

package/dist/styles/shadows.js

@@ -0,0 +1,18 @@
+import { css } from 'element-vir';
+const shadowColor = css `#e2e2e2`;
+export const viraShadows = {
+    menuShadow: css `
+        filter: drop-shadow(0px 5px 5px ${shadowColor});
+        /*
+           This helps force the drop shadow to re-render when the element moves or the page changes.
+       */
+        will-change: filter;
+    `,
+    menuShadowReversed: css `
+        filter: drop-shadow(0px -5px 5px ${shadowColor});
+        /*
+           This helps force the drop shadow to re-render when the element moves or the page changes.
+       */
+        will-change: filter;
+    `,
+};

package/dist/styles/user-select.js

@@ -1,6 +1,9 @@
 import { css } from 'element-vir';
 export const noUserSelect = css `
-    -webkit-touch-callout: none; /* iOS Safari */
-    -webkit-user-select: none; /* Safari */
-    user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */
+    /* iOS Safari */
+    -webkit-touch-callout: none;
+    /* Safari */
+    -webkit-user-select: none;
+    /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */
+    user-select: none;
 `;

package/dist/util/index.d.ts

@@ -0,0 +1 @@
+export * from './pop-up-manager';

package/dist/util/index.js

@@ -0,0 +1 @@
+export * from './pop-up-manager';

package/dist/util/pop-up-manager.d.ts

@@ -0,0 +1,90 @@
+import { MaybePromise } from '@augment-vir/common';
+import { Coords } from 'device-navigation';
+import { ExtractEventByType, ExtractEventTypes, ListenOptions, RemoveListenerCallback } from 'typed-event-target';
+export type PositionRect = {
+    top: number;
+    left: number;
+    right: number;
+    bottom: number;
+};
+export declare const emptyPositionRect: PositionRect;
+export type PopUpManagerOptions = {
+    /**
+     * The minimum number of pixels for allowing the pop-up to go downwards. If the downward
+     * available space is less than this, and if the upwards available space is
+     * `verticalDiffThreshold` more than the downwards space, the pop-up will be directed upwards.
+     *
+     * Equation:
+     *
+     *     const directUpwards =
+     *         downwardsSpace < minDownSpace &&
+     *         upwardsSpace > DownwardsSpace + verticalDiffThreshold;
+     *
+     * @default 200
+     */
+    minDownSpace: number;
+    /**
+     * The number of pixels required for the upwards available space to be bigger than the downwards
+     * available space before directing the pop-up upwards.
+     *
+     * Equation:
+     *
+     *     const directUpwards =
+     *         downwardsSpace < minDownSpace &&
+     *         upwardsSpace > DownwardsSpace + verticalDiffThreshold;
+     *
+     * @default 20
+     */
+    verticalDiffThreshold: number;
+    /**
+     * Supports navigation of the pop up via the `device-navigation` package.
+     *
+     * @default true
+     */
+    supportNavigation: boolean;
+};
+export type ShowPopUpResult = {
+    /**
+     * Indicates if the "pop up" should pop in the downwards direction or not. If not, it should pop
+     * in the upwards direction. This is determined by how much space is available on either side of
+     * the root element.
+     */
+    popDown: boolean;
+    positions: Record<'root' | 'container' | 'diff', PositionRect>;
+};
+declare const HidePopUpEvent_base: (new (eventInitDict?: EventInit | undefined) => import("typed-event-target").TypedEvent<"hide-pop-up">) & Pick<{
+    new (type: string, eventInitDict?: EventInit | undefined): Event;
+    prototype: Event;
+    readonly NONE: 0;
+    readonly CAPTURING_PHASE: 1;
+    readonly AT_TARGET: 2;
+    readonly BUBBLING_PHASE: 3;
+}, "NONE" | "CAPTURING_PHASE" | "AT_TARGET" | "BUBBLING_PHASE" | "prototype"> & Pick<import("typed-event-target").TypedEvent<"hide-pop-up">, "type">;
+export declare class HidePopUpEvent extends HidePopUpEvent_base {
+}
+declare const NavSelectEvent_base: (new (eventInitDict: import("typed-event-target").TypedCustomEventInit<Coords>) => import("typed-event-target").TypedCustomEvent<Coords, "nav-select">) & Pick<{
+    new (type: string, eventInitDict?: EventInit | undefined): Event;
+    prototype: Event;
+    readonly NONE: 0;
+    readonly CAPTURING_PHASE: 1;
+    readonly AT_TARGET: 2;
+    readonly BUBBLING_PHASE: 3;
+}, "NONE" | "CAPTURING_PHASE" | "AT_TARGET" | "BUBBLING_PHASE" | "prototype"> & Pick<import("typed-event-target").TypedCustomEvent<Coords, "nav-select">, "type">;
+export declare class NavSelectEvent extends NavSelectEvent_base {
+}
+export type PopUpManagerEvents = HidePopUpEvent | NavSelectEvent;
+export declare class PopUpManager {
+    private listenTarget;
+    private options;
+    private cleanupCallbacks;
+    private lastRootElement;
+    constructor(options?: Partial<PopUpManagerOptions> | undefined);
+    private attachGlobalListeners;
+    listen<const EventDefinition extends Readonly<{
+        type: ExtractEventTypes<PopUpManagerEvents>;
+    }>>(event: EventDefinition, listener: (event: ExtractEventByType<PopUpManagerEvents, EventDefinition['type']>) => MaybePromise<void>, options?: ListenOptions | undefined): RemoveListenerCallback;
+    removePopUp(): void;
+    showPopUp(rootElement: HTMLElement, options?: Partial<PopUpManagerOptions> | undefined): ShowPopUpResult;
+    destroy(): void;
+}
+export {};