vira 32.4.0 → 33.0.0

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

@@ -0,0 +1,176 @@
+import { colorCss } from '@electrovir/color';
+import { css, html } from 'element-vir';
+import { listenTo } from 'typed-event-target';
+import { viraFormCssVars } from '../../styles/form-styles.js';
+import { viraTheme } from '../../styles/vira-color-theme.js';
+import { createAnchoredPopoverStyles } from '../../util/anchored-popover.js';
+import { defineViraElement } from '../../util/define-vira-element.js';
+/**
+ * Centered with insets instead of `position-area`, because browsers shift a centered
+ * `position-area` box back onto the screen rather than moving on to the next
+ * `position-try-fallbacks` entry. These insets leave a space that is centered on the anchor and as
+ * wide as possible, and `unsafe` stops the browser from shifting the tooltip, so a tooltip wider
+ * than that space overflows it and moves on to an aligned fallback. Each `anchor(center)` is
+ * measured from the side its inset is on, so the same formula works for `left` and `right`.
+ */
+const centeredStyles = css `
+    position-area: none;
+    top: 0;
+    bottom: anchor(top);
+    left: max(0px, 2 * anchor(center) - 100%);
+    right: max(0px, 2 * anchor(center) - 100%);
+    align-self: end;
+    justify-self: unsafe center;
+`;
+/** `unsafe` for the same reason as {@link centeredStyles}. */
+const leftAlignedStyles = css `
+    position-area: block-start span-inline-end;
+    inset: auto;
+    align-self: normal;
+    justify-self: unsafe start;
+`;
+/** `unsafe` for the same reason as {@link centeredStyles}. */
+const rightAlignedStyles = css `
+    position-area: block-start span-inline-start;
+    inset: auto;
+    align-self: normal;
+    justify-self: unsafe end;
+`;
+/**
+ * Centered but shifted to stay on the screen. For a tooltip that fits on neither side of the
+ * anchor.
+ */
+const shiftedStyles = css `
+    position-area: block-start span-all;
+    inset: auto;
+    align-self: normal;
+    justify-self: anchor-center;
+`;
+/**
+ * The popover rendered by the `tooltip` directive. The element itself is the popover, centered
+ * above `anchor` when there's room. Its children are the tooltip contents.
+ *
+ * @category Popover
+ * @category Elements
+ */
+export const ViraTooltip = defineViraElement()({
+    tagName: 'vira-tooltip',
+    styles: css `
+        ${createAnchoredPopoverStyles({
+        fallbacks: [
+            {
+                name: 'vira-tooltip-above-left-aligned',
+                styles: leftAlignedStyles,
+            },
+            {
+                name: 'vira-tooltip-above-right-aligned',
+                styles: rightAlignedStyles,
+            },
+            {
+                name: 'vira-tooltip-below-centered',
+                styles: centeredStyles,
+                flipBlock: true,
+            },
+            {
+                name: 'vira-tooltip-below-left-aligned',
+                styles: leftAlignedStyles,
+                flipBlock: true,
+            },
+            {
+                name: 'vira-tooltip-below-right-aligned',
+                styles: rightAlignedStyles,
+                flipBlock: true,
+            },
+            {
+                name: 'vira-tooltip-above-shifted',
+                styles: shiftedStyles,
+            },
+            {
+                name: 'vira-tooltip-below-shifted',
+                styles: shiftedStyles,
+                flipBlock: true,
+            },
+        ],
+    })}
+
+        :host {
+            anchor-name: --vira-tooltip;
+            ${colorCss(viraTheme.colors['vira-grey-behind-bg-highest-contrast'])};
+            ${centeredStyles}
+            margin-bottom: 7px;
+            padding: 4px 8px;
+            border-radius: 6px;
+            box-sizing: border-box;
+            width: max-content;
+            /*
+                Not 100%, which is the width of the current position-area. A tooltip limited to that
+                width shrinks to fit it rather than overflowing onto the next fallback.
+            */
+            max-width: min(300px, 100vw);
+            font-size: ${viraFormCssVars['vira-form-small-text-size'].value};
+            overflow-wrap: break-word;
+            pointer-events: none;
+        }
+
+        /*
+            Separate popovers rather than children or pseudo-elements of the tooltip, because those can't
+            use anchor() to reach the anchor element from inside the tooltip's top-layer box.
+        */
+        .caret {
+            /*
+                position-anchor is set explicitly because its initial value differs between browsers.
+            */
+            position-anchor: auto;
+            position: fixed;
+            inset: auto;
+            margin: 0;
+            padding: 0;
+            border: none;
+            height: auto;
+            width: 10px;
+            left: calc(anchor(center) - 5px);
+            background-color: ${viraTheme.colors['vira-grey-behind-bg-highest-contrast'].background
+        .value};
+            pointer-events: none;
+        }
+
+        /*
+            Each caret spans the gap between the tooltip and the anchor on its own side, so the caret
+            on the side without the tooltip gets a negative height, which renders as nothing. This
+            follows the tooltip's position-try-fallbacks choice without knowing which one won.
+        */
+        .caret-down {
+            top: anchor(--vira-tooltip bottom);
+            bottom: calc(anchor(top) + 2px);
+            clip-path: polygon(0 0, 100% 0, 50% 100%);
+        }
+
+        .caret-up {
+            bottom: anchor(--vira-tooltip top);
+            top: calc(anchor(bottom) + 2px);
+            clip-path: polygon(50% 0, 100% 100%, 0 100%);
+        }
+    `,
+    init({ host }) {
+        /** The carets must open after the tooltip so they can anchor to it. */
+        listenTo(host, 'toggle', () => {
+            if (!host.matches(':popover-open')) {
+                return;
+            }
+            host.shadowRoot.querySelectorAll('.caret').forEach((caret) => {
+                if (caret instanceof HTMLElement && !caret.matches(':popover-open')) {
+                    caret.showPopover({
+                        source: host.instanceInputs.anchor,
+                    });
+                }
+            });
+        });
+    },
+    render() {
+        return html `
+            <slot></slot>
+            <div class="caret caret-down" popover="manual"></div>
+            <div class="caret caret-up" popover="manual"></div>
+        `;
+    },
+});

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

@@ -11,7 +11,7 @@ import { viraShadows } from '../styles/shadows.js';
 import { noUserSelect } from '../styles/user-select.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 globalEventsToCloseDrawerOn = [
     'pagehide',

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

@@ -1,23 +1,26 @@
 import { type PartialWithUndefined } from '@augment-vir/common';
-import { type HtmlInterpolation } from 'element-vir';
+import { type AttributeValues, type HtmlInterpolation } from 'element-vir';
 import { type ViraIconSvg } from '../icons/icon-svg.js';
-import { type ShowPopUpResult } from '../util/pop-up-manager.js';
-import { type ViraSelectOption } from '../util/vira-select-option.js';
-import { type PopUpTriggerPosition } from './pop-up/vira-pop-up-trigger.element.js';
+import { type ViraDropdownOption, type ViraDropdownOptionGroup } from '../util/vira-dropdown-option.js';
 /**
- * A dropdown element that uses pop-up menus.
+ * A dropdown element that uses popover 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<ViraSelectOption>>;
+    options: ReadonlyArray<Readonly<ViraDropdownOption> | Readonly<ViraDropdownOptionGroup>>;
     /** The selected id from the given options. */
     selected: ReadonlyArray<PropertyKey>;
 } & PartialWithUndefined<{
     /** Text to show if nothing is selected. */
     placeholder: string;
+    /**
+     * Text shown in the opened popover when `options` has no options. When omitted, opening a
+     * dropdown with no options shows no popover at all.
+     */
+    noOptionsText: string;
     /**
      * If false, this will behave like a single select dropdown, otherwise you can select
      * multiple.
@@ -26,12 +29,24 @@ export declare const ViraDropdown: import("element-vir").DeclarativeElementDefin
     icon: ViraIconSvg;
     selectionPrefix: string;
     isDisabled: boolean;
+    /**
+     * When `true`, the currently selected options' labels are rendered as plain text with no
+     * trigger or menu.
+     */
+    isReadonly: boolean;
+    hasError: boolean;
     label: string | HtmlInterpolation;
-    /** 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;
+    /** Attributes applied to the trigger element. */
+    attributePassthrough: Readonly<AttributeValues>;
+    /**
+     * Passed to {@link ViraMenu}'s `hoverScrollSpeed` input. How many menu items per second
+     * hovering a scroll arrow scrolls through.
+     *
+     * @default 24
+     */
+    menuHoverScrollSpeed: number;
+}>, {
+    isOpen: boolean;
     shouldSelectOnMouseUp: boolean;
     /**
      * Used to couple the label and trigger together. This is not applied if no label is
@@ -41,5 +56,6 @@ export declare const ViraDropdown: import("element-vir").DeclarativeElementDefin
 }, {
     /** Emits all currently selected values. */
     selectedValuesChange: import("element-vir").DefineElementEvent<string[]>;
-    openChange: import("element-vir").DefineElementEvent<ShowPopUpResult | undefined>;
+    /** `true` when the popover just opened, `false` when it just closed. */
+    openChange: import("element-vir").DefineElementEvent<boolean>;
 }, "vira-dropdown-", "vira-dropdown-", readonly [], readonly ["leadingIcon", "prefixText", "trigger"]>;

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((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

@@ -6,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.
@@ -70,9 +70,9 @@ export const ViraForm = defineViraElement()({
                     &
                     > ${ViraDateInput},
                     &
-                    > ${ViraInput},
+                    > ${ViraDropdown},
                     &
-                    > ${ViraSelect},
+                    > ${ViraInput},
                     &
                     > ${ViraTextArea} {
                     width: 100%;
@@ -159,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}>
                         `,
                 });
             }