vira 28.19.6 → 28.20.0

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

@@ -0,0 +1,31 @@
+import { type PartialWithUndefined } from '@augment-vir/common';
+import { type ViraIconSvg } from '../icons/index.js';
+/**
+ * Button styles available for {@link ViraButton}.
+ *
+ * @category Button
+ */
+export declare enum ViraButtonStyle {
+    Default = "vira-button-default",
+    Outline = "vira-button-outline"
+}
+/**
+ * A custom button with default styling.
+ *
+ * @category Button
+ * @category Elements
+ * @see https://electrovir.github.io/vira/book/elements/vira-button
+ */
+export declare const ViraButton: import("element-vir").DeclarativeElementDefinition<"vira-button", PartialWithUndefined<{
+    text: string;
+    icon: Pick<ViraIconSvg, "svgTemplate">;
+    disabled: boolean;
+    buttonStyle: ViraButtonStyle;
+    /**
+     * When set to `true`, the given icon (if any) will take up its full dimensions, potentially
+     * increasing the button's size.
+     *
+     * @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 [], readonly []>;

package/{src/elements/vira-button.element.ts → dist/elements/vira-button.element.js}

@@ -1,25 +1,22 @@
-import {type PartialWithUndefined} from '@augment-vir/common';
-import {css, html, nothing} from 'element-vir';
-import {type ViraIconSvg} from '../icons/index.js';
-import {viraBorders} from '../styles/border.js';
-import {viraDisabledStyles} from '../styles/disabled.js';
-import {viraAnimationDurations} from '../styles/durations.js';
-import {createFocusStyles, viraFocusCssVars} from '../styles/focus.js';
-import {noUserSelect} from '../styles/index.js';
-import {noNativeFormStyles} from '../styles/native-styles.js';
-import {defineViraElement} from './define-vira-element.js';
-import {ViraIcon} from './vira-icon.element.js';
-
+import { css, html, nothing } from 'element-vir';
+import { viraBorders } from '../styles/border.js';
+import { viraDisabledStyles } from '../styles/disabled.js';
+import { viraAnimationDurations } from '../styles/durations.js';
+import { createFocusStyles, viraFocusCssVars } from '../styles/focus.js';
+import { noUserSelect } from '../styles/index.js';
+import { noNativeFormStyles } from '../styles/native-styles.js';
+import { defineViraElement } from './define-vira-element.js';
+import { ViraIcon } from './vira-icon.element.js';
 /**
  * Button styles available for {@link ViraButton}.
  *
  * @category Button
  */
-export enum ViraButtonStyle {
-    Default = 'vira-button-default',
-    Outline = 'vira-button-outline',
-}
-
+export var ViraButtonStyle;
+(function (ViraButtonStyle) {
+    ViraButtonStyle["Default"] = "vira-button-default";
+    ViraButtonStyle["Outline"] = "vira-button-outline";
+})(ViraButtonStyle || (ViraButtonStyle = {}));
 /**
  * A custom button with default styling.
  *
@@ -27,42 +24,25 @@ export enum ViraButtonStyle {
  * @category Elements
  * @see https://electrovir.github.io/vira/book/elements/vira-button
  */
-export const ViraButton = defineViraElement<
-    PartialWithUndefined<{
-        text: string;
-        icon: Pick<ViraIconSvg, 'svgTemplate'>;
-        disabled: boolean;
-        buttonStyle: ViraButtonStyle;
-        /**
-         * When set to `true`, the given icon (if any) will take up its full dimensions, potentially
-         * increasing the button's size.
-         *
-         * @default false
-         */
-        expandToFitIcon: boolean;
-    }>
->()({
+export const ViraButton = defineViraElement()({
     tagName: 'vira-button',
     hostClasses: {
-        'vira-button-outline-style': ({inputs}) => inputs.buttonStyle === ViraButtonStyle.Outline,
-        'vira-button-disabled': ({inputs}) => !!inputs.disabled,
-        'vira-button-expand-to-fit-icon': ({inputs}) => !!inputs.expandToFitIcon,
+        'vira-button-outline-style': ({ inputs }) => inputs.buttonStyle === ViraButtonStyle.Outline,
+        'vira-button-disabled': ({ inputs }) => !!inputs.disabled,
+        'vira-button-expand-to-fit-icon': ({ inputs }) => !!inputs.expandToFitIcon,
     },
     cssVars: {
         /** On the default button style this is the background color. */
         'vira-button-primary-color': '#0a89ff',
         'vira-button-primary-hover-color': '#59b1ff',
         'vira-button-primary-active-color': '#007ff6',
-
         /** On the default button style this is the text color. */
         'vira-button-secondary-color': '#ffffff',
-
         'vira-button-padding': '5px 10px',
-
-        'vira-button-internal-foreground-color': '',
-        'vira-button-internal-background-color': '',
+        'vira-button-internal-foreground-color': 'transparent',
+        'vira-button-internal-background-color': 'transparent',
     },
-    styles: ({hostClasses, cssVars}) => css`
+    styles: ({ hostClasses, cssVars }) => css `
         :host {
             font-weight: bold;
             display: inline-flex;
@@ -71,29 +51,19 @@ export const ViraButton = defineViraElement<
             align-items: center;
             box-sizing: border-box;
             ${noUserSelect};
-            ${cssVars['vira-button-internal-background-color'].name}: ${cssVars[
-                'vira-button-primary-color'
-            ].value};
-            ${cssVars['vira-button-internal-foreground-color'].name}: ${cssVars[
-                'vira-button-secondary-color'
-            ].value};
-            ${viraFocusCssVars['vira-focus-outline-color'].name}: ${cssVars[
-                'vira-button-primary-hover-color'
-            ].value}
+            ${cssVars['vira-button-internal-background-color'].name}: ${cssVars['vira-button-primary-color'].value};
+            ${cssVars['vira-button-internal-foreground-color'].name}: ${cssVars['vira-button-secondary-color'].value};
+            ${viraFocusCssVars['vira-focus-outline-color'].name}: ${cssVars['vira-button-primary-hover-color'].value}
         }
 
         :host(:hover) button,
         button:hover {
-            ${cssVars['vira-button-internal-background-color'].name}: ${cssVars[
-                'vira-button-primary-hover-color'
-            ].value};
+            ${cssVars['vira-button-internal-background-color'].name}: ${cssVars['vira-button-primary-hover-color'].value};
         }
 
         :host(:active) button,
         button:active {
-            ${cssVars['vira-button-internal-background-color'].name}: ${cssVars[
-                'vira-button-primary-active-color'
-            ].value};
+            ${cssVars['vira-button-internal-background-color'].name}: ${cssVars['vira-button-primary-active-color'].value};
         }
 
         ${hostClasses['vira-button-disabled'].selector} {
@@ -128,8 +98,8 @@ export const ViraButton = defineViraElement<
                 border-color ${viraAnimationDurations['vira-interaction-animation-duration'].value};
 
             ${createFocusStyles({
-                elementBorderSize: 2,
-            })}
+        elementBorderSize: 2,
+    })}
         }
 
         .empty-text {
@@ -148,23 +118,22 @@ export const ViraButton = defineViraElement<
             }
         }
     `,
-    render: ({inputs}) => {
+    render: ({ inputs }) => {
         const iconTemplate = inputs.icon
-            ? html`
+            ? html `
                   <${ViraIcon.assign({
-                      icon: inputs.icon,
-                  })}></${ViraIcon}>
+                icon: inputs.icon,
+            })}></${ViraIcon}>
               `
             : nothing;
         const textTemplate = inputs.text
-            ? html`
+            ? html `
                   <span class="text-template">${inputs.text}</span>
               `
-            : html`
+            : html `
                   <span class="empty-text">&nbsp;</span>
               `;
-
-        return html`
+        return html `
             <button ?disabled=${inputs.disabled}>${iconTemplate} ${textTemplate}</button>
         `;
     },

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

@@ -0,0 +1,18 @@
+/**
+ * State options for {@link ViraCard}.
+ *
+ * @category Internal
+ */
+export declare enum ViraCardState {
+    Error = "error",
+    Success = "success"
+}
+/**
+ * A simple wrapper "card" element that is just a `<slot>` with some styles.
+ *
+ * @category Elements
+ * @see https://electrovir.github.io/vira/book/elements/vira-card
+ */
+export declare const ViraCard: import("element-vir").DeclarativeElementDefinition<"vira-card", {
+    cardState?: ViraCardState | undefined;
+}, {}, {}, "vira-card-error" | "vira-card-success", "vira-card-border" | "vira-card-border-radius" | "vira-card-padding", readonly [], readonly []>;

package/{src/elements/vira-card.element.ts → dist/elements/vira-card.element.js}

@@ -1,37 +1,34 @@
-import {css, html} from 'element-vir';
-import {viraFormCssVars} from '../styles/form-styles.js';
-import {defineViraElement} from './define-vira-element.js';
-
+import { css, html } from 'element-vir';
+import { viraFormCssVars } from '../styles/form-styles.js';
+import { defineViraElement } from './define-vira-element.js';
 /**
  * State options for {@link ViraCard}.
  *
  * @category Internal
  */
-export enum ViraCardState {
-    Error = 'error',
-    Success = 'success',
-}
-
+export var ViraCardState;
+(function (ViraCardState) {
+    ViraCardState["Error"] = "error";
+    ViraCardState["Success"] = "success";
+})(ViraCardState || (ViraCardState = {}));
 /**
  * A simple wrapper "card" element that is just a `<slot>` with some styles.
  *
  * @category Elements
  * @see https://electrovir.github.io/vira/book/elements/vira-card
  */
-export const ViraCard = defineViraElement<{
-    cardState?: ViraCardState | undefined;
-}>()({
+export const ViraCard = defineViraElement()({
     tagName: 'vira-card',
     hostClasses: {
-        'vira-card-error': ({inputs}) => inputs.cardState === ViraCardState.Error,
-        'vira-card-success': ({inputs}) => inputs.cardState === ViraCardState.Success,
+        'vira-card-error': ({ inputs }) => inputs.cardState === ViraCardState.Error,
+        'vira-card-success': ({ inputs }) => inputs.cardState === ViraCardState.Success,
     },
     cssVars: {
         'vira-card-border': '1px solid #d3d3d3',
         'vira-card-border-radius': '16px',
         'vira-card-padding': '16px',
     },
-    styles: ({hostClasses, cssVars}) => css`
+    styles: ({ hostClasses, cssVars }) => css `
         :host {
             display: block;
             border: ${cssVars['vira-card-border'].value};
@@ -47,7 +44,7 @@ export const ViraCard = defineViraElement<{
         }
     `,
     render() {
-        return html`
+        return html `
             <slot></slot>
         `;
     },

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

@@ -0,0 +1,34 @@
+import { type PartialWithUndefined } from '@augment-vir/common';
+import { type AttributeValues, type CSSResult } from 'element-vir';
+import { ViraIcon } from './vira-icon.element.js';
+/**
+ * All inner elements supported by {@link ViraCheckbox}.
+ *
+ * @category Internals
+ */
+export type ViraCheckboxInnerElements = 'label' | 'custom-checkbox' | 'text' | typeof ViraIcon.tagName;
+/**
+ * Inputs for {@link ViraCheckbox}.
+ *
+ * @category Internal
+ */
+export type ViraCheckboxInputs = PartialWithUndefined<{
+    stylePassthrough: Partial<Record<ViraCheckboxInnerElements, CSSResult>>;
+    attributePassthrough: Partial<Record<ViraCheckboxInnerElements, AttributeValues>>;
+    disabled: boolean;
+    label: string;
+    hasError: boolean;
+    horizontal: boolean;
+}> & {
+    value: boolean;
+};
+/**
+ * A custom checkbox.
+ *
+ * @category Input
+ * @category Elements
+ * @see https://electrovir.github.io/vira/book/elements/vira-checkbox
+ */
+export declare const ViraCheckbox: import("element-vir").DeclarativeElementDefinition<"vira-checkbox", Readonly<ViraCheckboxInputs>, {}, {
+    valueChange: import("element-vir").DefineEvent<boolean>;
+}, "vira-checkbox-horizontal", "vira-checkbox-", readonly [], readonly []>;

package/{src/elements/vira-checkbox.element.ts → dist/elements/vira-checkbox.element.js}

@@ -1,52 +1,11 @@
-import {type PartialWithUndefined} from '@augment-vir/common';
-import {
-    attributes,
-    classMap,
-    css,
-    defineElementEvent,
-    html,
-    ifDefined,
-    listen,
-    listenToActivate,
-    nothing,
-    type AttributeValues,
-    type CSSResult,
-} from 'element-vir';
-import {Check24Icon, viraIconCssVars} from '../icons/index.js';
-import {viraBorders} from '../styles/border.js';
-import {viraDisabledStyles} from '../styles/disabled.js';
-import {createFocusStyles} from '../styles/focus.js';
-import {viraFormCssVars} from '../styles/form-styles.js';
-import {defineViraElement} from './define-vira-element.js';
-import {ViraIcon} from './vira-icon.element.js';
-
-/**
- * All inner elements supported by {@link ViraCheckbox}.
- *
- * @category Internals
- */
-export type ViraCheckboxInnerElements =
-    | 'label'
-    | 'custom-checkbox'
-    | 'text'
-    | typeof ViraIcon.tagName;
-
-/**
- * Inputs for {@link ViraCheckbox}.
- *
- * @category Internal
- */
-export type ViraCheckboxInputs = PartialWithUndefined<{
-    stylePassthrough: Partial<Record<ViraCheckboxInnerElements, CSSResult>>;
-    attributePassthrough: Partial<Record<ViraCheckboxInnerElements, AttributeValues>>;
-    disabled: boolean;
-    label: string;
-    hasError: boolean;
-    horizontal: boolean;
-}> & {
-    value: boolean;
-};
-
+import { attributes, classMap, css, defineElementEvent, html, ifDefined, listen, listenToActivate, nothing, } from 'element-vir';
+import { Check24Icon, viraIconCssVars } from '../icons/index.js';
+import { viraBorders } from '../styles/border.js';
+import { viraDisabledStyles } from '../styles/disabled.js';
+import { createFocusStyles } from '../styles/focus.js';
+import { viraFormCssVars } from '../styles/form-styles.js';
+import { defineViraElement } from './define-vira-element.js';
+import { ViraIcon } from './vira-icon.element.js';
 /**
  * A custom checkbox.
  *
@@ -54,12 +13,12 @@ export type ViraCheckboxInputs = PartialWithUndefined<{
  * @category Elements
  * @see https://electrovir.github.io/vira/book/elements/vira-checkbox
  */
-export const ViraCheckbox = defineViraElement<Readonly<ViraCheckboxInputs>>()({
+export const ViraCheckbox = defineViraElement()({
     tagName: 'vira-checkbox',
     hostClasses: {
-        'vira-checkbox-horizontal': ({inputs}) => !!inputs.horizontal,
+        'vira-checkbox-horizontal': ({ inputs }) => !!inputs.horizontal,
     },
-    styles: ({hostClasses}) => css`
+    styles: ({ hostClasses }) => css `
         :host {
             display: inline-flex;
         }
@@ -93,7 +52,7 @@ export const ViraCheckbox = defineViraElement<Readonly<ViraCheckboxInputs>>()({
 
             &:hover .custom-checkbox {
                 background-color: ${viraFormCssVars['vira-form-selection-hover-background-color']
-                    .value};
+        .value};
             }
         }
 
@@ -112,7 +71,7 @@ export const ViraCheckbox = defineViraElement<Readonly<ViraCheckboxInputs>>()({
             position: relative;
             cursor: pointer;
 
-            ${createFocusStyles({elementBorderSize: 1})}
+            ${createFocusStyles({ elementBorderSize: 1 })}
 
             &.checked {
                 & ${ViraIcon} {
@@ -126,7 +85,7 @@ export const ViraCheckbox = defineViraElement<Readonly<ViraCheckboxInputs>>()({
 
             &:active {
                 background-color: ${viraFormCssVars['vira-form-selection-active-background-color']
-                    .value};
+        .value};
             }
 
             &.disabled {
@@ -141,17 +100,16 @@ export const ViraCheckbox = defineViraElement<Readonly<ViraCheckboxInputs>>()({
         }
     `,
     events: {
-        valueChange: defineElementEvent<boolean>(),
+        valueChange: defineElementEvent(),
     },
-    render({inputs, dispatch, events}) {
-        function updateValue(this: void) {
+    render({ inputs, dispatch, events }) {
+        function updateValue() {
             if (!inputs.disabled) {
                 dispatch(new events.valueChange(!inputs.value));
             }
         }
-
         const textLabel = inputs.label
-            ? html`
+            ? html `
                   <span
                       class="label-text"
                       ${attributes(inputs.attributePassthrough?.['text'])}
@@ -161,12 +119,11 @@ export const ViraCheckbox = defineViraElement<Readonly<ViraCheckboxInputs>>()({
                   </span>
               `
             : nothing;
-
-        return html`
+        return html `
             <label
                 class=${classMap({
-                    disabled: !!inputs.disabled,
-                })}
+            disabled: !!inputs.disabled,
+        })}
                 ${attributes(inputs.attributePassthrough?.label)}
                 style=${ifDefined(inputs.stylePassthrough?.label)}
                 ${listen('mousedown', updateValue)}
@@ -174,10 +131,10 @@ export const ViraCheckbox = defineViraElement<Readonly<ViraCheckboxInputs>>()({
                 ${textLabel}
                 <span
                     class="custom-checkbox ${classMap({
-                        checked: inputs.value,
-                        disabled: !!inputs.disabled,
-                        error: !!inputs.hasError,
-                    })}"
+            checked: inputs.value,
+            disabled: !!inputs.disabled,
+            error: !!inputs.hasError,
+        })}"
                     role="checkbox"
                     aria-label=${ifDefined(inputs.label || undefined)}
                     aria-checked=${inputs.value ? 'true' : 'false'}
@@ -188,9 +145,9 @@ export const ViraCheckbox = defineViraElement<Readonly<ViraCheckboxInputs>>()({
                     ${listenToActivate(updateValue)}
                 >
                     <${ViraIcon.assign({
-                        icon: Check24Icon,
-                        fitContainer: true,
-                    })}
+            icon: Check24Icon,
+            fitContainer: true,
+        })}
                         ${attributes(inputs.attributePassthrough?.[ViraIcon.tagName])}
                         style=${ifDefined(inputs.stylePassthrough?.[ViraIcon.tagName])}
                     ></${ViraIcon}>

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

@@ -0,0 +1,16 @@
+/**
+ * A wrapper element that can collapse and expand to fit its content dynamically and efficiently.
+ *
+ * @category Collapsible
+ * @category Elements
+ * @see https://electrovir.github.io/vira/book/elements/vira-collapsible-wrapper
+ */
+export declare const ViraCollapsibleWrapper: import("element-vir").DeclarativeElementDefinition<"vira-collapsible-wrapper", {
+    expanded: boolean;
+    /** When true, forces the content to expand when printing regardless of collapsed state. */
+    expandOnPrint?: boolean;
+}, {
+    contentHeight: number;
+}, {
+    expandChange: import("element-vir").DefineEvent<boolean>;
+}, "vira-collapsible-wrapper-expanded" | "vira-collapsible-wrapper-expand-on-print", "vira-collapsible-wrapper-", readonly ["header"], readonly []>;

package/{src/elements/vira-collapsible-wrapper.element.ts → dist/elements/vira-collapsible-wrapper.element.js}

@@ -1,7 +1,6 @@
-import {css, defineElementEvent, html, listen, onResize} from 'element-vir';
-import {noNativeFormStyles, viraAnimationDurations} from '../styles/index.js';
-import {defineViraElement} from './define-vira-element.js';
-
+import { css, defineElementEvent, html, listen, onResize } from 'element-vir';
+import { noNativeFormStyles, viraAnimationDurations } from '../styles/index.js';
+import { defineViraElement } from './define-vira-element.js';
 /**
  * A wrapper element that can collapse and expand to fit its content dynamically and efficiently.
  *
@@ -9,7 +8,7 @@ import {defineViraElement} from './define-vira-element.js';
  * @category Elements
  * @see https://electrovir.github.io/vira/book/elements/vira-collapsible-wrapper
  */
-export const ViraCollapsibleWrapper = defineViraElement<{expanded: boolean}>()({
+export const ViraCollapsibleWrapper = defineViraElement()({
     tagName: 'vira-collapsible-wrapper',
     state() {
         return {
@@ -17,10 +16,11 @@ export const ViraCollapsibleWrapper = defineViraElement<{expanded: boolean}>()({
         };
     },
     hostClasses: {
-        'vira-collapsible-wrapper-expanded': ({inputs}) => inputs.expanded,
+        'vira-collapsible-wrapper-expanded': ({ inputs }) => inputs.expanded,
+        'vira-collapsible-wrapper-expand-on-print': ({ inputs }) => !!inputs.expandOnPrint,
     },
     slotNames: ['header'],
-    styles: ({hostClasses}) => css`
+    styles: ({ hostClasses }) => css `
         :host {
             display: flex;
             flex-direction: column;
@@ -45,34 +45,42 @@ export const ViraCollapsibleWrapper = defineViraElement<{expanded: boolean}>()({
         ${hostClasses['vira-collapsible-wrapper-expanded'].name} .collapsing-element {
             pointer-events: none;
         }
+
+        @media print {
+            :host(.${hostClasses['vira-collapsible-wrapper-expand-on-print'].name})
+                .collapsing-element {
+                height: auto !important;
+                overflow: visible !important;
+                transition: none !important;
+            }
+        }
     `,
     events: {
-        expandChange: defineElementEvent<boolean>(),
+        expandChange: defineElementEvent(),
     },
-    render({state, slotNames, updateState, dispatch, events, inputs}) {
+    render({ state, slotNames, updateState, dispatch, events, inputs }) {
         const collapsingStyles = inputs.expanded
-            ? css`
+            ? css `
                   height: ${state.contentHeight}px;
               `
-            : css`
+            : css `
                   height: 0;
               `;
-
-        return html`
+        return html `
             <button
                 class="header-wrapper"
                 ${listen('click', () => {
-                    dispatch(new events.expandChange(!inputs.expanded));
-                })}
+            dispatch(new events.expandChange(!inputs.expanded));
+        })}
             >
                 <slot name=${slotNames.header}>Header</slot>
             </button>
 
             <div class="collapsing-element" style=${collapsingStyles} disabled="disabled">
                 <div
-                    ${onResize(({contentRect}) => {
-                        updateState({contentHeight: contentRect.height});
-                    })}
+                    ${onResize(({ contentRect }) => {
+            updateState({ contentHeight: contentRect.height });
+        })}
                     class="content-wrapper"
                 >
                     <slot></slot>

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

@@ -0,0 +1,46 @@
+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 { type PopUpTriggerPosition } from './pop-up/vira-pop-up-trigger.element.js';
+/**
+ * Test ids for {@link ViraDropdown}.
+ *
+ * @category Internal
+ */
+export declare const viraDropdownTestIds: {
+    trigger: string;
+    icon: string;
+    prefix: string;
+};
+/**
+ * A dropdown element that uses pop-up menus.
+ *
+ * @category Dropdown
+ * @category Elements
+ * @see https://electrovir.github.io/vira/book/elements/dropdown/vira-dropdown
+ */
+export declare const ViraDropdown: import("element-vir").DeclarativeElementDefinition<"vira-dropdown", {
+    options: ReadonlyArray<Readonly<MenuItem>>;
+    /** The selected id from the given options. */
+    selected: ReadonlyArray<PropertyKey>;
+} & PartialWithUndefined<{
+    /** Text to show if nothing is selected. */
+    placeholder: string;
+    /**
+     * If false, this will behave like a single select dropdown, otherwise you can select
+     * multiple.
+     */
+    isMultiSelect: boolean;
+    icon: ViraIconSvg;
+    selectionPrefix: string;
+    isDisabled: boolean;
+    /** For debugging purposes only. Very bad for actual production code use. */
+    z_debug_forceOpenState: boolean;
+} & PopUpTriggerPosition>, {
+    /** `undefined` means the pop up is not currently showing. */
+    showPopUpResult: ShowPopUpResult | undefined;
+}, {
+    selectedChange: import("element-vir").DefineEvent<PropertyKey[]>;
+    openChange: import("element-vir").DefineEvent<ShowPopUpResult | undefined>;
+}, "vira-dropdown-", "vira-dropdown-", readonly [], readonly []>;