vira 26.13.0 → 27.0.0

package/dist/elements/popover/vira-popover-trigger.element.js

@@ -0,0 +1,301 @@
+import { assert } from '@augment-vir/assert';
+import { NavController } from 'device-navigation';
+import { css, defineElementEvent, html, listen, onDomRendered, renderIf } from 'element-vir';
+import { viraDisabledStyles } from '../../styles/disabled.js';
+import { createFocusStyles } from '../../styles/focus.js';
+import { noNativeFormStyles } from '../../styles/native-styles.js';
+import { noUserSelect } from '../../styles/user-select.js';
+import { HidePopoverEvent, NavSelectEvent, PopoverManager, } from '../../util/popover-manager.js';
+import { defineViraElement } from '../define-vira-element.js';
+import { triggerPopoverState } from './popover-helpers.js';
+/**
+ * Anchor options for popovers.
+ *
+ * @category Internal
+ */
+export var HorizontalAnchor;
+(function (HorizontalAnchor) {
+    /**
+     * The left side of the popover will be anchored to the left side of the trigger, allowing the
+     * popover to grow on the right side of the trigger.
+     */
+    HorizontalAnchor["Left"] = "left";
+    /**
+     * The Right side of the popover will be anchored to the right side of the trigger, allowing the
+     * popover to grow on the left side of the trigger.
+     */
+    HorizontalAnchor["Right"] = "right";
+    /**
+     * Restrict the popover on both sides.
+     *
+     * This is the default anchor for {@link ViraPopoverTrigger}.
+     */
+    HorizontalAnchor["Both"] = "both";
+})(HorizontalAnchor || (HorizontalAnchor = {}));
+/**
+ * An element with slots for a popover trigger and popover contents.
+ *
+ * @category Popover
+ * @category Elements
+ * @see https://electrovir.github.io/vira/book/elements/vira-popover-trigger
+ */
+export const ViraPopoverTrigger = defineViraElement()({
+    tagName: 'vira-popover-trigger',
+    state({ host }) {
+        return {
+            /** `undefined` means the popover is not currently showing. */
+            showPopoverResult: undefined,
+            popoverManager: new PopoverManager(new NavController(host, { activateOnMouseUp: true })),
+        };
+    },
+    slotNames: [
+        'trigger',
+        'popover',
+    ],
+    hostClasses: {
+        'vira-popover-trigger-disabled': ({ inputs }) => !!inputs.isDisabled,
+    },
+    styles: ({ hostClasses }) => css `
+        :host {
+            display: inline-flex;
+            box-sizing: border-box;
+            max-width: 100%;
+        }
+
+        .wrapper {
+            max-width: 100%;
+            box-sizing: border-box;
+            position: relative;
+            /* Do not use display:flex. Doing so will break positioning for Firefox and Safari. */
+            display: block;
+        }
+
+        .dropdown-trigger {
+            ${noNativeFormStyles};
+            ${noUserSelect};
+            cursor: pointer;
+            max-width: 100%;
+            position: relative;
+            flex-grow: 1;
+            box-sizing: border-box;
+            anchor-name: --popover-trigger;
+
+            ${createFocusStyles({
+        elementBorderSize: 1,
+    })}
+        }
+
+        ${hostClasses['vira-popover-trigger-disabled'].selector} {
+            ${viraDisabledStyles}
+            pointer-events: auto;
+
+            & .dropdown-wrapper {
+                pointer-events: none;
+            }
+        }
+
+        [popover] {
+            /* More styles are set internally via JS. */
+
+            position: absolute;
+            box-sizing: border-box;
+            inset: auto;
+            display: flex;
+            /* Allow menu shadows to overflow. Without this they are hidden. */
+            overflow: visible;
+            pointer-events: none;
+
+            > * {
+                pointer-events: auto;
+                max-width: 100%;
+            }
+        }
+
+        :popover-open {
+            ${noNativeFormStyles}
+        }
+    `,
+    events: {
+        navSelect: defineElementEvent(),
+        /**
+         * - `undefined` indicates that the popover just closed.
+         * - {@link ShowPopoverResult} indicates that the popover just opened.
+         */
+        openChange: defineElementEvent(),
+        init: defineElementEvent(),
+    },
+    cleanup({ state, updateState }) {
+        updateState({
+            showPopoverResult: undefined,
+        });
+        state.popoverManager.destroy();
+    },
+    init({ state, updateState, host, inputs, dispatch, events }) {
+        /** Refocus the trigger and set the result to `undefined` when the popover closes. */
+        state.popoverManager.listen(HidePopoverEvent, () => {
+            updateState({
+                showPopoverResult: undefined,
+            });
+            dispatch(new events.openChange(undefined));
+            if (!inputs.isDisabled) {
+                const dropdownWrapper = host.shadowRoot.querySelector('.dropdown-trigger');
+                assert.instanceOf(dropdownWrapper, HTMLButtonElement, 'failed to find dropdown wrapper child');
+                dropdownWrapper.focus();
+            }
+        });
+        state.popoverManager.listen(NavSelectEvent, (event) => {
+            if (!inputs.keepOpenAfterInteraction) {
+                triggerPopoverState({
+                    open: false,
+                    callback(showPopoverResult) {
+                        updateState({
+                            showPopoverResult,
+                        });
+                    },
+                    host,
+                    popoverManager: state.popoverManager,
+                });
+            }
+            dispatch(new events.navSelect(event.detail));
+        });
+        dispatch(new events.init({
+            navController: state.popoverManager.navController,
+            popoverManager: state.popoverManager,
+        }));
+    },
+    render({ dispatch, events, state, inputs, updateState, host, slotNames }) {
+        function triggerPopover({ emitEvent, open, }, event) {
+            if (state.showPopoverResult && inputs.keepOpenAfterInteraction && event) {
+                const dropdownTrigger = host.shadowRoot.querySelector('.dropdown-trigger');
+                if (dropdownTrigger && !event.composedPath().includes(dropdownTrigger)) {
+                    /**
+                     * Prevent closing the popover when `keepOpenAfterInteraction` is turned on and
+                     * the popover was interacted with.
+                     */
+                    return;
+                }
+            }
+            triggerPopoverState({
+                open,
+                callback(showPopoverResult) {
+                    updateState({ showPopoverResult });
+                    if (emitEvent) {
+                        dispatch(new events.openChange(showPopoverResult));
+                    }
+                },
+                host,
+                popoverManager: state.popoverManager,
+            });
+        }
+        if (inputs.isDisabled) {
+            triggerPopover({ open: false, emitEvent: false }, undefined);
+        }
+        else if (inputs.z_debug_forceOpenState != undefined) {
+            if (!inputs.z_debug_forceOpenState && state.showPopoverResult) {
+                triggerPopover({ emitEvent: false, open: false }, undefined);
+            }
+            else if (inputs.z_debug_forceOpenState && !state.showPopoverResult) {
+                triggerPopover({ emitEvent: false, open: true }, undefined);
+            }
+        }
+        const horizontalPositionStyle = state.showPopoverResult
+            ? state.showPopoverResult.popRight
+                ? css `
+                      width: ${state.showPopoverResult.positions.diff.rootLeftToContainerRight}px;
+                      left: anchor(--popover-trigger left);
+                      align-items: flex-start;
+                  `
+                : css `
+                      width: ${state.showPopoverResult.positions.diff.rootRightToContainerLeft}px;
+                      right: anchor(--popover-trigger right);
+                      /* Fallback for Firefox and Safari that don't yet support anchor() */
+                      right: ${state.showPopoverResult.positions.diff.right}px;
+                      align-items: flex-end;
+                  `
+            : css `
+                  display: none;
+              `;
+        const verticalPositionStyle = state.showPopoverResult
+            ? state.showPopoverResult.popDown
+                ? css `
+                      top: anchor(--popover-trigger bottom);
+                      height: ${state.showPopoverResult.positions.diff.bottom}px;
+                      flex-direction: column;
+                  `
+                : css `
+                      bottom: anchor(--popover-trigger top);
+                      height: ${state.showPopoverResult.positions.diff.top}px;
+                      flex-direction: column-reverse;
+                  `
+            : css `
+                  display: none;
+              `;
+        /**
+         * These styles do _not_ account for window resizing while the menu is open. I decided this
+         * was not a major enough problem to tackle. If it becomes major enough in the future,
+         * you'll need to hook into a window _or_ container resize listener inside `PopoverManager`
+         * and emit a new `ShowPopoverResult` instance when it changes.
+         *
+         * Currently, the popover will simply close when the window is resized.
+         */
+        const positionerStyles = css `
+            ${verticalPositionStyle}
+            ${horizontalPositionStyle}
+        `;
+        function respondToClick(event) {
+            triggerPopover({
+                emitEvent: true,
+                open: !state.showPopoverResult,
+            }, event);
+        }
+        return html `
+            <div class="wrapper">
+                <button
+                    ?disabled=${!!inputs.isDisabled}
+                    class="dropdown-trigger"
+                    role="listbox"
+                    aria-expanded=${!!state.showPopoverResult}
+                    ${listen('keydown', (event) => {
+            if (!state.showPopoverResult && event.code.startsWith('Arrow')) {
+                triggerPopover({ emitEvent: true, open: true }, event);
+            }
+        })}
+                    ${listen('click', (event) => {
+            /**
+             * Detail is 0 if it was a keyboard key (like Enter) that triggered this
+             * click.
+             */
+            if (event.detail === 0) {
+                respondToClick(event);
+            }
+        })}
+                    ${listen('mousedown', (event) => {
+            /** Ignore any clicks that aren't the main button. */
+            if (event.button === 0) {
+                respondToClick(event);
+            }
+        })}
+                >
+                    <slot name=${slotNames.trigger}></slot>
+                </button>
+                <div
+                    popover="manual"
+                    style=${positionerStyles}
+                    ${onDomRendered((popoverElement) => {
+            assert.instanceOf(popoverElement, HTMLElement);
+            if (state.showPopoverResult) {
+                popoverElement.showPopover();
+            }
+            else {
+                popoverElement.hidePopover();
+            }
+        })}
+                >
+                    ${renderIf(!!state.showPopoverResult, html `
+                            <slot name=${slotNames.popover}></slot>
+                        `)}
+                </div>
+            </div>
+        `;
+    },
+});

package/dist/elements/vira-bold-text.element.d.ts

@@ -6,4 +6,4 @@
 export declare const ViraBoldText: import("element-vir").DeclarativeElementDefinition<"vira-bold", {
     bold: boolean;
     text: string;
-}, {}, {}, "vira-bold-bold", "vira-bold-bold-weight", readonly []>;
+}, {}, {}, "vira-bold-bold", "vira-bold-bold-weight", readonly [], readonly []>;

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

@@ -28,4 +28,4 @@ export declare const ViraButton: import("element-vir").DeclarativeElementDefinit
      * @default false
      */
     expandToFitIcon: boolean;
-}>, {}, {}, "vira-button-outline-style" | "vira-button-disabled" | "vira-button-expand-to-fit-icon", "vira-button-primary-color" | "vira-button-primary-hover-color" | "vira-button-primary-active-color" | "vira-button-secondary-color" | "vira-button-padding" | "vira-button-internal-foreground-color" | "vira-button-internal-background-color", readonly []>;
+}>, {}, {}, "vira-button-outline-style" | "vira-button-disabled" | "vira-button-expand-to-fit-icon", "vira-button-primary-color" | "vira-button-primary-hover-color" | "vira-button-primary-active-color" | "vira-button-secondary-color" | "vira-button-padding" | "vira-button-internal-foreground-color" | "vira-button-internal-background-color", readonly [], readonly []>;

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

@@ -29,4 +29,4 @@ export type ViraCheckboxInputs = PartialWithUndefined<{
  */
 export declare const ViraCheckbox: import("element-vir").DeclarativeElementDefinition<"vira-checkbox", Readonly<ViraCheckboxInputs>, {}, {
     valueChange: import("element-vir").DefineEvent<boolean>;
-}, "vira-checkbox-", "vira-checkbox-", readonly []>;
+}, "vira-checkbox-", "vira-checkbox-", readonly [], readonly []>;

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

@@ -11,4 +11,4 @@ export declare const ViraCollapsibleWrapper: import("element-vir").DeclarativeEl
     contentHeight: number;
 }, {
     expandChange: import("element-vir").DefineEvent<boolean>;
-}, "vira-collapsible-wrapper-expanded", "vira-collapsible-wrapper-", readonly ["header"]>;
+}, "vira-collapsible-wrapper-expanded", "vira-collapsible-wrapper-", readonly ["header"], readonly []>;

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

@@ -1,8 +1,7 @@
 import { type PartialWithUndefined } from '@augment-vir/common';
 import { type ViraIconSvg } from '../icons/icon-svg.js';
-import { type ShowPopUpResult } from '../util/pop-up-manager.js';
-import { type MenuItem } from './pop-up/pop-up-menu-item.js';
-import { HorizontalAnchor } from './pop-up/vira-pop-up-trigger.element.js';
+import { type ShowPopoverResult } from '../util/popover-manager.js';
+import { type MenuItem } from './popover/popover-menu-item.js';
 /**
  * Test ids for {@link ViraDropdown}.
  *
@@ -14,7 +13,7 @@ export declare const viraDropdownTestIds: {
     prefix: string;
 };
 /**
- * A dropdown element that uses pop-up menus.
+ * A dropdown element that uses popover menus.
  *
  * @category Dropdown
  * @category Elements
@@ -37,21 +36,10 @@ export declare const ViraDropdown: import("element-vir").DeclarativeElementDefin
     isDisabled: boolean;
     /** For debugging purposes only. Very bad for actual production code use. */
     z_debug_forceOpenState: boolean;
-    /**
-     * - `HorizontalAnchor.Left`: dropdown is anchored to the left side of the trigger and the
-     *   dropdown can grow to the right.
-     * - `HorizontalAnchor.Right`: dropdown is anchored to the right side of the trigger and the
-     *   dropdown can grow to the left.
-     * - `HorizontalAnchor.Both`: dropdown is anchored on both sides of the trigger and cannot
-     *   grow beyond it. (This is the default experience.)
-     *
-     * @default HorizontalAnchor.Both
-     */
-    horizontalAnchor: HorizontalAnchor;
 }>, {
-    /** `undefined` means the pop up is not currently showing. */
-    showPopUpResult: ShowPopUpResult | undefined;
+    /** `undefined` means the popover is not currently showing. */
+    showPopoverResult: ShowPopoverResult | undefined;
 }, {
     selectedChange: import("element-vir").DefineEvent<PropertyKey[]>;
-    openChange: import("element-vir").DefineEvent<ShowPopUpResult | undefined>;
-}, "vira-dropdown-", "vira-dropdown-", readonly []>;
+    openChange: import("element-vir").DefineEvent<ShowPopoverResult | undefined>;
+}, "vira-dropdown-", "vira-dropdown-", readonly [], readonly []>;

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

@@ -6,8 +6,7 @@ import { viraBorders } from '../styles/border.js';
 import { viraFormCssVars } from '../styles/form-styles.js';
 import { noUserSelect, viraAnimationDurations } from '../styles/index.js';
 import { defineViraElement } from './define-vira-element.js';
-import { ViraMenuTrigger } from './pop-up/vira-menu-trigger.element.js';
-import { HorizontalAnchor } from './pop-up/vira-pop-up-trigger.element.js';
+import { ViraMenuTrigger } from './popover/vira-menu-trigger.element.js';
 import { ViraIcon } from './vira-icon.element.js';
 /**
  * Test ids for {@link ViraDropdown}.
@@ -20,7 +19,7 @@ export const viraDropdownTestIds = {
     prefix: 'dropdown-prefix',
 };
 /**
- * A dropdown element that uses pop-up menus.
+ * A dropdown element that uses popover menus.
  *
  * @category Dropdown
  * @category Elements
@@ -102,8 +101,8 @@ export const ViraDropdown = defineViraElement()({
     },
     state() {
         return {
-            /** `undefined` means the pop up is not currently showing. */
-            showPopUpResult: undefined,
+            /** `undefined` means the popover is not currently showing. */
+            showPopoverResult: undefined,
         };
     },
     render({ state, inputs, dispatch, events, updateState }) {
@@ -137,14 +136,13 @@ export const ViraDropdown = defineViraElement()({
             isDisabled: inputs.isDisabled,
             isMultiSelect: inputs.isMultiSelect,
             z_debug_forceOpenState: inputs.z_debug_forceOpenState,
-            popUpOffset: {
+            popoverOffset: {
                 vertical: -1,
                 right: 24,
             },
-            horizontalAnchor: inputs.horizontalAnchor || HorizontalAnchor.Both,
         })}
                 ${listen(ViraMenuTrigger.events.openChange, (event) => {
-            updateState({ showPopUpResult: event.detail });
+            updateState({ showPopoverResult: event.detail });
             dispatch(new events.openChange(event.detail));
         })}
                 ${listen(ViraMenuTrigger.events.itemActivate, (event) => {
@@ -153,8 +151,8 @@ export const ViraDropdown = defineViraElement()({
             >
                 <div
                     class="dropdown-trigger ${classMap({
-            open: !!state.showPopUpResult,
-            'open-upwards': !state.showPopUpResult?.popDown,
+            open: !!state.showPopoverResult,
+            'open-upwards': !state.showPopoverResult?.popDown,
         })}"
                     ${testId(viraDropdownTestIds.trigger)}
                 >

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

@@ -10,4 +10,4 @@ export declare const ViraIcon: import("element-vir").DeclarativeElementDefinitio
     icon: Pick<ViraIconSvg, "svgTemplate"> | undefined;
     /** Ignores the given icon's embedded size and causes the <svg> element to fill its parent. */
     fitContainer?: boolean | undefined;
-}, {}, {}, "vira-icon-fit-container", "vira-icon-", readonly []>;
+}, {}, {}, "vira-icon-fit-container", "vira-icon-", readonly [], readonly []>;

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

@@ -42,4 +42,4 @@ export declare const ViraImage: import("element-vir").DeclarativeElementDefiniti
 }, {
     imageLoad: import("element-vir").DefineEvent<void>;
     imageError: import("element-vir").DefineEvent<unknown>;
-}, "vira-image-height-constrained", "vira-image-", readonly ["loading", "error"]>;
+}, "vira-image-height-constrained", "vira-image-", readonly ["loading", "error"], readonly []>;

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

@@ -40,4 +40,4 @@ export declare const ViraInput: import("element-vir").DeclarativeElementDefiniti
      * that was blocked out of programmatic "value" property assignments.
      */
     inputBlocked: import("element-vir").DefineEvent<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-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 []>;
+}, "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-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 [], readonly []>;

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

@@ -1,4 +1,5 @@
 import { assertWrap } from '@augment-vir/assert';
+import { extractEventTarget } from '@augment-vir/web';
 import { attributes, css, defineElementEvent, html, ifDefined, listen, nothing, onResize, renderIf, } from 'element-vir';
 import { CloseX24Icon } from '../icons/icon-svgs/close-x-24.icon.js';
 import { EyeClosed24Icon, EyeOpen24Icon } from '../icons/index.js';
@@ -166,7 +167,7 @@ export const ViraInput = defineViraElement()({
                 overflow: hidden;
                 outline: none;
 
-                &:focus:focus-visible:not(:active):not([disabled]) ~ .focus-border {
+                &:focus:focus-visible:not([disabled]) ~ .focus-border {
                     ${createFocusStyles({
             elementBorderSize: 0,
             noNesting: true,
@@ -280,10 +281,15 @@ export const ViraInput = defineViraElement()({
         return html `
             <span
                 class="input-wrapper"
-                ${listen('mouseup', () => {
-            assertWrap
-                .instanceOf(host.shadowRoot.querySelector('input'), HTMLInputElement)
-                .focus();
+                ${listen('mousedown', (event) => {
+            const eventTarget = extractEventTarget(event, HTMLElement, {
+                useOriginalTarget: true,
+            });
+            const inputElement = assertWrap.instanceOf(host.shadowRoot.querySelector('input'), HTMLInputElement);
+            if (eventTarget !== inputElement) {
+                event.preventDefault();
+                inputElement.focus();
+            }
         })}
             >
                 ${iconTemplate}
@@ -328,10 +334,11 @@ export const ViraInput = defineViraElement()({
                         <button
                             class="clear-x-button"
                             title="clear"
-                            ${listen('click', (event) => {
-            /** Prevent focus of the input. */
+                            ${listen('mousedown', (event) => {
             event.stopImmediatePropagation();
             event.preventDefault();
+        })}
+                            ${listen('click', () => {
             dispatch(new events.valueChange(''));
         })}
                         >
@@ -342,10 +349,12 @@ export const ViraInput = defineViraElement()({
                         <button
                             class="show-password-button"
                             title="show password"
-                            ${listen('click', (event) => {
+                            ${listen('mousedown', (event) => {
             /** Prevent focus of the input. */
             event.stopImmediatePropagation();
             event.preventDefault();
+        })}
+                            ${listen('click', () => {
             updateState({ showPassword: !state.showPassword });
         })}
                         >

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

@@ -19,7 +19,7 @@ export type ViraLinkRoute = Readonly<{
  * @category Elements
  * @see https://electrovir.github.io/vira/book/elements/vira-link
  */
-export declare const ViraLink: import("element-vir").DeclarativeElementDefinition<"vira-link", import("type-fest/source/require-exactly-one.js")._RequireExactlyOne<{
+export declare const ViraLink: import("element-vir").DeclarativeElementDefinition<"vira-link", (((Required<Pick<{
     /**
      * A full raw URL link that will navigate the current window away or open a new tab. If this
      * property is provided for the inputs, don't provide a route property.
@@ -33,7 +33,35 @@ export declare const ViraLink: import("element-vir").DeclarativeElementDefinitio
      * is provided for the inputs, don't provide a link property.
      */
     route: ViraLinkRoute;
-}, "link" | "route"> & PartialWithUndefined<{
+}, "link">> & Partial<Record<"route", never>>) | (Required<Pick<{
+    /**
+     * A full raw URL link that will navigate the current window away or open a new tab. If this
+     * property is provided for the inputs, don't provide a route property.
+     */
+    link: {
+        url: string;
+        newTab: boolean;
+    };
+    /**
+     * A route that'll change that current page without navigating the window. If this property
+     * is provided for the inputs, don't provide a link property.
+     */
+    route: ViraLinkRoute;
+}, "route">> & Partial<Record<"link", never>>)) & Omit<{
+    /**
+     * A full raw URL link that will navigate the current window away or open a new tab. If this
+     * property is provided for the inputs, don't provide a route property.
+     */
+    link: {
+        url: string;
+        newTab: boolean;
+    };
+    /**
+     * A route that'll change that current page without navigating the window. If this property
+     * is provided for the inputs, don't provide a link property.
+     */
+    route: ViraLinkRoute;
+}, "link" | "route">) & PartialWithUndefined<{
     /** Styles that will be applied directly to the inner elements. */
     stylePassthrough: Readonly<PartialWithUndefined<{
         a: CSSResult;
@@ -42,4 +70,4 @@ export declare const ViraLink: import("element-vir").DeclarativeElementDefinitio
     attributePassthrough: Readonly<PartialWithUndefined<{
         a: AttributeValues;
     }>>;
-}>, {}, {}, "vira-link-", "vira-link-hover-color", readonly []>;
+}>, {}, {}, "vira-link-", "vira-link-hover-color", readonly [], readonly []>;

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

@@ -15,4 +15,4 @@ export declare const ViraProgress: import("element-vir").DeclarativeElementDefin
     min: number;
     /** @default 100 */
     max: number;
-}>>, {}, {}, "vira-progress-", "vira-progress-border-radius" | "vira-progress-background-color" | "vira-progress-foreground-color", readonly []>;
+}>>, {}, {}, "vira-progress-", "vira-progress-border-radius" | "vira-progress-background-color" | "vira-progress-foreground-color", readonly [], readonly []>;

package/dist/util/index.d.ts

@@ -1,2 +1,2 @@
 export * from './define-table.js';
-export * from './pop-up-manager.js';
+export * from './popover-manager.js';

package/dist/util/index.js

@@ -1,2 +1,2 @@
 export * from './define-table.js';
-export * from './pop-up-manager.js';
+export * from './popover-manager.js';