vira 32.3.0 → 33.0.0

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

@@ -1,18 +1,20 @@
 import { check } from '@augment-vir/assert';
 import { filterMap, randomString } from '@augment-vir/common';
 import { extractEventTarget } from '@augment-vir/web';
-import { classMap, css, defineElementEvent, html, ifDefined, listen, nothing, testId, } from 'element-vir';
+import { attributes, classMap, css, defineElementEvent, html, ifDefined, listen, nothing, testId, } from 'element-vir';
 import { ChevronUp16Icon } from '../icons/index.js';
 import { viraFormCssVars } from '../styles/form-styles.js';
+import { ViraSize, viraSizeHeights } from '../styles/form-variants.js';
 import { noUserSelect, viraAnimationDurations } from '../styles/index.js';
 import { defineViraElement } from '../util/define-vira-element.js';
-import { renderMenuItemEntries } from '../util/pop-up-helpers.js';
-import { ViraMenuItem } from './pop-up/vira-menu-item.element.js';
-import { ViraMenu, ViraMenuPopUpDirection } from './pop-up/vira-menu.element.js';
-import { HorizontalAnchor, ViraPopUpTrigger, } from './pop-up/vira-pop-up-trigger.element.js';
+import { renderMenuItemEntries } from '../util/menu-helpers.js';
+import { isViraDropdownOptionGroup, } from '../util/vira-dropdown-option.js';
+import { ViraMenuItem } from './popover/vira-menu-item.element.js';
+import { ViraMenu, ViraMenuCornerStyle } from './popover/vira-menu.element.js';
+import { ViraPopoverTrigger } from './popover/vira-popover-trigger.element.js';
 import { ViraIcon } from './vira-icon.element.js';
 /**
- * A dropdown element that uses pop-up menus.
+ * A dropdown element that uses popover menus.
  *
  * @category Dropdown
  * @category Elements
@@ -29,12 +31,12 @@ export const ViraDropdown = defineViraElement()({
         :host {
             display: inline-flex;
             vertical-align: middle;
-            width: 256px;
+            width: 224px;
             position: relative;
             max-width: 100%;
         }
 
-        ${ViraPopUpTrigger} {
+        ${ViraPopoverTrigger} {
             width: 100%;
         }
 
@@ -60,18 +62,8 @@ export const ViraDropdown = defineViraElement()({
             justify-content: flex-end;
         }
 
-        .open {
-            & .trigger-icon {
-                transform: rotate(0);
-            }
-
-            &:not(.open-upwards).dropdown-trigger {
-                border-bottom-left-radius: 0;
-            }
-
-            &.open-upwards.dropdown-trigger {
-                border-top-left-radius: 0;
-            }
+        .open .trigger-icon {
+            transform: rotate(0);
         }
 
         .dropdown-trigger {
@@ -84,13 +76,50 @@ export const ViraDropdown = defineViraElement()({
             gap: 8px;
             text-align: left;
             align-items: center;
-            padding: 3px;
-            padding-left: 10px;
+            min-height: ${viraSizeHeights[ViraSize.Medium]}px;
+            padding: 0 3px 0 10px;
             border-radius: ${viraFormCssVars['vira-form-radius'].value};
             background-color: ${viraFormCssVars['vira-form-background-color'].value};
             color: ${viraFormCssVars['vira-form-foreground-color'].value};
         }
 
+        .dropdown-wrapper {
+            display: flex;
+            width: 100%;
+        }
+
+        .has-error .dropdown-trigger {
+            border-color: ${viraFormCssVars['vira-form-error-color'].value};
+        }
+
+        .option-group-label,
+        .no-options {
+            ${noUserSelect};
+            /* Aligns with the label text of each ViraMenuItem, past its check icon. */
+            padding: 8px 12px 4px
+                calc(${ViraMenuItem.cssVars['vira-menu-item-icon-gap'].value} * 3 + 16px);
+            opacity: 0.6;
+            text-align: left;
+        }
+
+        .option-group-label {
+            font-weight: ${viraFormCssVars['vira-form-label-font-weight'].value};
+        }
+
+        .no-options {
+            cursor: default;
+            padding-bottom: 8px;
+        }
+
+        ${ViraMenuItem}.option-group-label {
+            padding: 0 0 0 calc(${ViraMenuItem.cssVars['vira-menu-item-icon-gap'].value} * 2);
+            ${ViraMenuItem.cssVars['vira-menu-item-padding'].name}: 8px 12px 4px 0;
+        }
+
+        .readonly-value {
+            overflow-wrap: anywhere;
+        }
+
         .using-placeholder {
             opacity: 0.4;
         }
@@ -114,12 +143,12 @@ export const ViraDropdown = defineViraElement()({
     events: {
         /** Emits all currently selected values. */
         selectedValuesChange: defineElementEvent(),
+        /** `true` when the popover just opened, `false` when it just closed. */
         openChange: defineElementEvent(),
     },
     state() {
         return {
-            /** `undefined` means the pop up is not currently showing. */
-            showPopUpResult: undefined,
+            isOpen: false,
             shouldSelectOnMouseUp: false,
             /**
              * Used to couple the label and trigger together. This is not applied if no label is
@@ -129,7 +158,10 @@ export const ViraDropdown = defineViraElement()({
         };
     },
     render({ state, inputs, dispatch, events, updateState, testIds }) {
-        const selectedOptions = filterMap(inputs.selected, (selectedValue) => inputs.options.find((option) => option.value === selectedValue), check.isTruthy);
+        const flatOptions = inputs.options.flatMap((entry) => {
+            return isViraDropdownOptionGroup(entry) ? entry.options : [entry];
+        });
+        const selectedOptions = filterMap(inputs.selected, (selectedValue) => flatOptions.find((option) => option.value === selectedValue), check.isTruthy);
         const leadingIconTemplate = inputs.icon
             ? html `
                   <${ViraIcon.assign({
@@ -165,13 +197,78 @@ export const ViraDropdown = defineViraElement()({
                 detail: newSelectedValues,
             }));
         }
+        function toggleGroup(group) {
+            const enabledGroupOptions = group.options.filter((option) => !option.disabled);
+            const isGroupSelected = enabledGroupOptions.every((option) => {
+                return selectedOptions.includes(option);
+            });
+            dispatch(new events.selectedValuesChange({
+                detail: (isGroupSelected
+                    ? selectedOptions.filter((option) => !enabledGroupOptions.includes(option))
+                    : [
+                        ...selectedOptions,
+                        ...enabledGroupOptions.filter((option) => {
+                            return !selectedOptions.includes(option);
+                        }),
+                    ]).map((option) => option.value),
+            }));
+        }
+        function renderGroupLabel(group) {
+            return inputs.isMultiSelect
+                ? html `
+                      <${ViraMenuItem.assign({
+                    disablePointerStyles: true,
+                })}
+                          class="option-group-label"
+                          ${listen('click', () => {
+                    toggleGroup(group);
+                })}
+                      >
+                          ${group.groupName}
+                      </${ViraMenuItem}>
+                  `
+                : html `
+                      <div class="option-group-label">${group.groupName}</div>
+                  `;
+        }
+        /** Drag-select actions in the same order as the rendered menu items. */
+        const menuItemActions = inputs.options.flatMap((entry) => {
+            const options = isViraDropdownOptionGroup(entry) ? entry.options : [entry];
+            const optionActions = options.map((option) => {
+                return option.disabled
+                    ? undefined
+                    : () => {
+                        selectOption(option);
+                    };
+            });
+            return isViraDropdownOptionGroup(entry) && inputs.isMultiSelect
+                ? [
+                    () => {
+                        toggleGroup(entry);
+                    },
+                    ...optionActions,
+                ]
+                : optionActions;
+        });
+        function renderOptionEntries(options) {
+            return renderMenuItemEntries(options.map((option) => {
+                return {
+                    content: option.label,
+                    onClick() {
+                        selectOption(option);
+                    },
+                    disabled: option.disabled,
+                    selected: selectedOptions.includes(option),
+                };
+            }));
+        }
+        const isMenuShown = state.isOpen && (!!flatOptions.length || !!inputs.noOptionsText);
         const menuTemplate = html `
             <${ViraMenu.assign({
-            direction: state.showPopUpResult?.popDown
-                ? ViraMenuPopUpDirection.Downwards
-                : ViraMenuPopUpDirection.Upwards,
+            cornerStyle: ViraMenuCornerStyle.Round,
+            hoverScrollSpeed: inputs.menuHoverScrollSpeed,
         })}
-                slot=${ViraPopUpTrigger.slotNames['vira-pop-up-trigger-pop-up']}
+                slot=${ViraPopoverTrigger.slotNames['vira-popover-trigger-popover']}
                 ${listen('mouseup', (event) => {
             if (state.shouldSelectOnMouseUp) {
                 const menuItem = event
@@ -179,46 +276,44 @@ export const ViraDropdown = defineViraElement()({
                     .find((eventTarget) => {
                     return eventTarget instanceof ViraMenuItem;
                 });
-                const option = menuItem
-                    ? inputs.options[Array.from(extractEventTarget(event, ViraMenu).querySelectorAll(ViraMenuItem.tagName)).indexOf(menuItem)]
+                const menuItemAction = menuItem
+                    ? menuItemActions[Array.from(extractEventTarget(event, ViraMenu).querySelectorAll(ViraMenuItem.tagName)).indexOf(menuItem)]
                     : undefined;
-                if (check.isDefined(option) && !option.disabled) {
-                    selectOption(option);
-                }
+                menuItemAction?.();
             }
         })}
             >
-                ${renderMenuItemEntries(inputs.options.map((option) => {
-            return {
-                content: option.label,
-                onClick() {
-                    selectOption(option);
-                },
-                disabled: option.disabled,
-                selected: selectedOptions.includes(option),
-            };
-        }))}
+                ${flatOptions.length
+            ? inputs.options.map((entry) => {
+                return isViraDropdownOptionGroup(entry)
+                    ? html `
+                                    ${renderGroupLabel(entry)} ${renderOptionEntries(entry.options)}
+                                `
+                    : renderOptionEntries([entry]);
+            })
+            : html `
+                          <div class="no-options">${inputs.noOptionsText}</div>
+                      `}
             </${ViraMenu}>
         `;
         const triggerTemplate = html `
-            <${ViraPopUpTrigger.assign({
+            <${ViraPopoverTrigger.assign({
             ...inputs,
             keepOpenAfterInteraction: inputs.isMultiSelect,
             focusOnClose: true,
-            popUpOffset: {
+            popoverOffset: {
                 vertical: -1,
                 right: 24,
             },
-            horizontalAnchor: inputs.horizontalAnchor || HorizontalAnchor.Both,
         })}
-                ${listen(ViraPopUpTrigger.events.openChange, (event) => {
-            if (!!state.showPopUpResult !== !!event.detail) {
+                ${listen(ViraPopoverTrigger.events.openChange, (event) => {
+            if (state.isOpen !== event.detail) {
                 dispatch(new events.openChange({
                     detail: event.detail,
                 }));
             }
             updateState({
-                showPopUpResult: event.detail,
+                isOpen: event.detail,
             });
         })}
                 ${listen('mouseup', () => {
@@ -231,15 +326,15 @@ export const ViraDropdown = defineViraElement()({
             >
                 <div
                     class="dropdown-trigger ${classMap({
-            open: !!state.showPopUpResult,
-            'open-upwards': !state.showPopUpResult?.popDown,
+            open: state.isOpen,
         })}"
-                    slot=${ViraPopUpTrigger.slotNames['vira-pop-up-trigger-trigger']}
+                    slot=${ViraPopoverTrigger.slotNames['vira-popover-trigger-trigger']}
                     id=${ifDefined(inputs.label ? state.randomId : undefined)}
-                    aria-label=${ifDefined(inputs.label || undefined)}
+                    aria-label=${ifDefined((check.isString(inputs.label) && inputs.label) || undefined)}
+                    ${attributes(inputs.attributePassthrough)}
                     ${testId(testIds.trigger)}
                     ${listen('mousedown', () => {
-            if (!state.showPopUpResult) {
+            if (!state.isOpen) {
                 updateState({
                     shouldSelectOnMouseUp: true,
                 });
@@ -264,19 +359,37 @@ export const ViraDropdown = defineViraElement()({
                         ></${ViraIcon}>
                     </span>
                 </div>
-                ${state.showPopUpResult ? menuTemplate : nothing}
-            </${ViraPopUpTrigger}>
+                ${isMenuShown ? menuTemplate : nothing}
+            </${ViraPopoverTrigger}>
         `;
+        const contentTemplate = inputs.isReadonly
+            ? html `
+                  <span class="readonly-value">${selectionDisplay}</span>
+              `
+            : triggerTemplate;
         if (inputs.label) {
             return html `
-                <label for=${state.randomId}>
+                <label
+                    for=${ifDefined(inputs.isReadonly ? undefined : state.randomId)}
+                    class=${classMap({
+                'has-error': !!inputs.hasError,
+            })}
+                >
                     <span class="dropdown-label">${inputs.label}</span>
-                    ${triggerTemplate}
+                    ${contentTemplate}
                 </label>
             `;
         }
         else {
-            return triggerTemplate;
+            return html `
+                <span
+                    class="dropdown-wrapper ${classMap({
+                'has-error': !!inputs.hasError,
+            })}"
+                >
+                    ${contentTemplate}
+                </span>
+            `;
         }
     },
 });

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

@@ -1,3 +1,4 @@
+import { check } from '@augment-vir/assert';
 import { getObjectTypedEntries } from '@augment-vir/common';
 import { css, defineElementEvent, html, listen, nothing, testId, } from 'element-vir';
 import { viraFormCssVars } from '../styles/form-styles.js';
@@ -5,8 +6,8 @@ import { defineViraElement } from '../util/define-vira-element.js';
 import { applyRequiredLabel, areFormFieldsValid, ViraFormFieldType, } from '../util/vira-form-fields.js';
 import { ViraCheckbox } from './vira-checkbox.element.js';
 import { ViraDateInput } from './vira-date-input.element.js';
+import { ViraDropdown } from './vira-dropdown.element.js';
 import { ViraInput, ViraInputType } from './vira-input.element.js';
-import { ViraSelect } from './vira-select.element.js';
 import { ViraTextArea } from './vira-text-area.element.js';
 /**
  * A form element.
@@ -69,9 +70,9 @@ export const ViraForm = defineViraElement()({
                     &
                     > ${ViraDateInput},
                     &
-                    > ${ViraInput},
+                    > ${ViraDropdown},
                     &
-                    > ${ViraSelect},
+                    > ${ViraInput},
                     &
                     > ${ViraTextArea} {
                     width: 100%;
@@ -111,11 +112,7 @@ export const ViraForm = defineViraElement()({
                 return nothing;
             }
             else if (field.type === ViraFormFieldType.Checkbox) {
-                const checkboxLabel = showRequiredMarker
-                    ? html `
-                              ${field.label}*
-                          `
-                    : field.label;
+                const checkboxLabel = applyRequiredLabel(field.label, showRequiredMarker);
                 return wrapFormField({
                     label: checkboxLabel,
                     fieldTemplate: html `
@@ -153,7 +150,7 @@ export const ViraForm = defineViraElement()({
             }
             const label = applyRequiredLabel(field.label, showRequiredMarker);
             const childLabel = inputs.useHorizontalLabels ? undefined : label;
-            const horizontalLabelAttributes = inputs.useHorizontalLabels && label
+            const horizontalLabelAttributes = inputs.useHorizontalLabels && check.isString(label) && label
                 ? {
                     'aria-label': label,
                 }
@@ -162,34 +159,28 @@ export const ViraForm = defineViraElement()({
                 return wrapFormField({
                     label,
                     fieldTemplate: html `
-                            <${ViraSelect.assign({
+                            <${ViraDropdown.assign({
                         options: field.options,
-                        value: field.value,
+                        selected: field.value ? [field.value] : [],
                         placeholder: field.placeholder,
-                        disabled: isDisabled,
+                        isDisabled,
                         isReadonly: inputs.isReadonly,
                         label: childLabel,
                         hasError: field.hasError,
                         icon: field.icon,
-                        ...(inputs.useHorizontalLabels && label
-                            ? {
-                                attributePassthrough: {
-                                    select: horizontalLabelAttributes,
-                                },
-                            }
-                            : {}),
+                        attributePassthrough: horizontalLabelAttributes,
                     })}
                                 ${field.testId ? testId(field.testId) : nothing}
-                                ${listen(ViraSelect.events.valueChange, (event) => {
+                                ${listen(ViraDropdown.events.selectedValuesChange, (event) => {
                         dispatch(new events.valueChange({
                             detail: {
                                 key,
                                 ...field,
-                                value: event.detail,
+                                value: event.detail[0],
                             },
                         }));
                     })}
-                            ></${ViraSelect}>
+                            ></${ViraDropdown}>
                         `,
                 });
             }

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

@@ -1,4 +1,5 @@
 import { type PartialWithUndefined } from '@augment-vir/common';
+import { type HtmlInterpolation } from 'element-vir';
 import { type ViraIconSvg } from '../icons/index.js';
 export * from '../util/shared-text-input-logic.js';
 /**
@@ -25,7 +26,7 @@ export declare const ViraInput: import("element-vir").DeclarativeElementDefiniti
     /** A suffix that, if provided, is shown following the input field. */
     suffix: string;
     /** A label that is shown above the input, if provided. */
-    label: string;
+    label: string | HtmlInterpolation;
     /** If true, applies error styling. */
     hasError: boolean;
     showClearButton: boolean;

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

@@ -1,4 +1,4 @@
-import { assertWrap } from '@augment-vir/assert';
+import { assertWrap, check } from '@augment-vir/assert';
 import { randomString } from '@augment-vir/common';
 import { extractEventTarget } from '@augment-vir/web';
 import { attributes, css, defineElementEvent, html, ifDefined, listen, nothing, onResize, renderIf, } from 'element-vir';
@@ -374,7 +374,7 @@ export const ViraInput = defineViraElement()({
 
                 <input
                     id=${ifDefined(inputs.label ? state.randomId : undefined)}
-                    aria-label=${ifDefined(inputs.label || undefined)}
+                    aria-label=${ifDefined((check.isString(inputs.label) && inputs.label) || undefined)}
                     type=${calculateEffectiveInputType(inputs.type, state.showPassword)}
                     style=${forcedInputWidthStyles}
                     autocomplete=${ifDefined(shouldBlockBrowserHelps ? 'off' : undefined)}

package/dist/elements/vira-json-form.element.js

@@ -9,9 +9,9 @@ import { defineViraElement } from '../util/define-vira-element.js';
 import { allowsFreeformString, createDefaultForJsonType, createResolveContext, deleteValueAtPath, getAdditionalPropertiesSchema, getAllowedJsonTypes, getDefinedProperties, getItemSchema, getJsonType, getNewItemSchema, getPropertySchema, getRequiredProperties, getSchemaEnumValues, getSchemaTitle, getStringEnumValues, pathToKey, pickBranchForType, setValueAtPath, validateAgainstSchema, ViraJsonType, viraJsonTypeLabels, } from '../util/vira-json-schema.js';
 import { ViraButton } from './vira-button.element.js';
 import { ViraCheckbox } from './vira-checkbox.element.js';
+import { ViraDropdown } from './vira-dropdown.element.js';
 import { ViraError } from './vira-error.element.js';
 import { ViraInput, ViraInputType } from './vira-input.element.js';
-import { ViraSelect } from './vira-select.element.js';
 import { ViraTextArea } from './vira-text-area.element.js';
 /**
  * Editing mode for a string field that offers both a fixed set of enum options and free-form text.
@@ -25,6 +25,9 @@ export var ViraJsonStringMode;
     /** Enter an arbitrary string via a text input. */
     ViraJsonStringMode["Custom"] = "custom";
 })(ViraJsonStringMode || (ViraJsonStringMode = {}));
+function toSelectedValues(value) {
+    return value == undefined ? [] : [value];
+}
 /**
  * An editor for arbitrary JSON values, optionally constrained by a standard JSON Schema
  * ({@link ViraJsonSchema}).
@@ -163,7 +166,7 @@ export const ViraJsonForm = defineViraElement()({
             min-width: 0;
         }
 
-        .json-value-with-switcher > ${ViraSelect} {
+        .json-value-with-switcher > ${ViraDropdown} {
             flex-shrink: 0;
             width: 130px;
         }
@@ -177,7 +180,7 @@ export const ViraJsonForm = defineViraElement()({
             padding: 8px 0;
         }
 
-        .json-add-row ${ViraInput}, .json-add-row ${ViraSelect} {
+        .json-add-row ${ViraInput}, .json-add-row ${ViraDropdown} {
             width: 160px;
         }
 
@@ -310,16 +313,17 @@ export const ViraJsonForm = defineViraElement()({
                     check.isNumber(value) ||
                     check.isBoolean(value);
                 return html `
-                    <${ViraSelect.assign({
+                    <${ViraDropdown.assign({
                     options,
-                    value: isPrimitive ? jsonPrimitiveToString(value) : undefined,
-                    disabled: isDisabled,
+                    selected: toSelectedValues(isPrimitive ? jsonPrimitiveToString(value) : undefined),
+                    isDisabled,
                 })}
-                        ${listen(ViraSelect.events.valueChange, (event) => {
-                    const selected = enumValues.find((entry) => jsonPrimitiveToString(entry) === event.detail);
-                    emitReplaceAt(path, selected ?? event.detail);
+                        ${listen(ViraDropdown.events.selectedValuesChange, (event) => {
+                    const selectedValue = assertWrap.isDefined(event.detail[0]);
+                    const selected = enumValues.find((entry) => jsonPrimitiveToString(entry) === selectedValue);
+                    emitReplaceAt(path, selected ?? selectedValue);
                 })}
-                    ></${ViraSelect}>
+                    ></${ViraDropdown}>
                 `;
             }
             else if (type === ViraJsonType.Boolean) {
@@ -463,14 +467,14 @@ export const ViraJsonForm = defineViraElement()({
                 };
             });
             return html `
-                <${ViraSelect.assign({
+                <${ViraDropdown.assign({
                 options,
-                value: selectedType,
+                selected: toSelectedValues(selectedType),
             })}
-                    ${listen(ViraSelect.events.valueChange, (event) => {
-                setPendingType(pathKey, event.detail);
+                    ${listen(ViraDropdown.events.selectedValuesChange, (event) => {
+                setPendingType(pathKey, assertWrap.isDefined(event.detail[0]));
             })}
-                ></${ViraSelect}>
+                ></${ViraDropdown}>
                 ${renderPlusButton({
                 isAddDisabled,
                 tooltip: isAddDisabled
@@ -527,14 +531,14 @@ export const ViraJsonForm = defineViraElement()({
                     };
                 });
                 return html `
-                    <${ViraSelect.assign({
+                    <${ViraDropdown.assign({
                     options,
-                    value: selectedType,
+                    selected: toSelectedValues(selectedType),
                 })}
-                        ${listen(ViraSelect.events.valueChange, (event) => {
-                    setPendingType(pathKey, event.detail);
+                        ${listen(ViraDropdown.events.selectedValuesChange, (event) => {
+                    setPendingType(pathKey, assertWrap.isDefined(event.detail[0]));
                 })}
-                    ></${ViraSelect}>
+                    ></${ViraDropdown}>
                     ${renderPlusButton({
                     isAddDisabled: false,
                     tooltip: `Add ${viraJsonTypeLabels[selectedType]}`,
@@ -798,20 +802,20 @@ export const ViraJsonForm = defineViraElement()({
             });
             const editor = mode === ViraJsonStringMode.Options
                 ? html `
-                          <${ViraSelect.assign({
+                          <${ViraDropdown.assign({
                     options: enumValues.map((entry) => {
                         return {
                             value: entry,
                             label: entry,
                         };
                     }),
-                    value: enumValues.includes(value) ? value : undefined,
-                    disabled: isDisabled,
+                    selected: toSelectedValues(enumValues.includes(value) ? value : undefined),
+                    isDisabled,
                 })}
-                              ${listen(ViraSelect.events.valueChange, (event) => {
-                    emitReplaceAt(path, event.detail);
+                              ${listen(ViraDropdown.events.selectedValuesChange, (event) => {
+                    emitReplaceAt(path, assertWrap.isDefined(event.detail[0]));
                 })}
-                          ></${ViraSelect}>
+                          ></${ViraDropdown}>
                       `
                 : html `
                           <${ViraInput.assign({
@@ -839,15 +843,15 @@ export const ViraJsonForm = defineViraElement()({
             return html `
                 <div class="json-value-with-switcher">
                     <span class="json-value-editor-slot">${editor}</span>
-                    <${ViraSelect.assign({
+                    <${ViraDropdown.assign({
                 options: modeOptions,
-                value: mode,
+                selected: toSelectedValues(mode),
             })}
                         title="Choose from options or enter a custom value"
-                        ${listen(ViraSelect.events.valueChange, (event) => {
-                setStringMode(pathKey, event.detail);
+                        ${listen(ViraDropdown.events.selectedValuesChange, (event) => {
+                setStringMode(pathKey, assertWrap.isDefined(event.detail[0]));
             })}
-                    ></${ViraSelect}>
+                    ></${ViraDropdown}>
                 </div>
             `;
         }
@@ -894,16 +898,16 @@ export const ViraJsonForm = defineViraElement()({
             return html `
                 <div class="json-value-with-switcher">
                     <span class="json-value-editor-slot">${editor}</span>
-                    <${ViraSelect.assign({
+                    <${ViraDropdown.assign({
                 options: switcherOptions,
-                value: switcherSelected,
+                selected: toSelectedValues(switcherSelected),
             })}
                         title="Change type"
-                        ${listen(ViraSelect.events.valueChange, (event) => {
-                const newType = event.detail;
+                        ${listen(ViraDropdown.events.selectedValuesChange, (event) => {
+                const newType = assertWrap.isDefined(event.detail[0]);
                 emitReplaceAt(path, createDefaultForJsonType(newType));
             })}
-                    ></${ViraSelect}>
+                    ></${ViraDropdown}>
                 </div>
             `;
         }

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

@@ -9,7 +9,7 @@ import { noNativeFormStyles, noNativeSpacing } from '../styles/native-styles.js'
 import { viraShadows } from '../styles/shadows.js';
 import { viraTheme } from '../styles/vira-color-theme.js';
 import { defineViraElement } from '../util/define-vira-element.js';
-import { isMouseEventOnScrollbar } from '../util/pop-up-manager.js';
+import { isMouseEventOnScrollbar } from '../util/popover-manager.js';
 import { ViraIcon } from './vira-icon.element.js';
 const globalEventsToCloseModalOn = [
     'pagehide',