vira 22.1.3 → 22.2.1

package/README.md

@@ -2,6 +2,6 @@
 
 The Vira design system.
 
-https://electrovir.github.io/element-vir/vira/book/
+https://electrovir.github.io/element-vir/vira
 
 WIP.

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

@@ -1,3 +1,3 @@
 export declare const ViraTagNamePrefix = "vira-";
 export type ViraTagName = `${typeof ViraTagNamePrefix}${string}`;
-export declare const defineViraElement: <Inputs extends {}>() => <TagName extends `vira-${string}`, StateInit extends {}, EventsInit extends {}, HostClassKeys extends `${TagName}-${string}`, CssVarKeys extends `${TagName}-${string}`, SlotNames extends readonly string[]>(inputs: import("element-vir").VerifiedElementInit<TagName, Inputs, StateInit, EventsInit, HostClassKeys, CssVarKeys, SlotNames>) => import("element-vir").DeclarativeElementDefinition<TagName, Inputs, StateInit, EventsInit, HostClassKeys, CssVarKeys, SlotNames>, defineViraElementNoInputs: <TagName_1 extends `vira-${string}`, Inputs_1 extends {}, StateInit_1 extends {}, EventsInit_1 extends {}, HostClassKeys_1 extends `${TagName_1}-${string}`, CssVarKeys_1 extends `${TagName_1}-${string}`, SlotNames_1 extends readonly string[]>(inputs: import("element-vir").VerifiedElementNoInputsInit<TagName_1, Inputs_1, StateInit_1, EventsInit_1, HostClassKeys_1, CssVarKeys_1, SlotNames_1>) => import("element-vir").DeclarativeElementDefinition<TagName_1, Inputs_1, StateInit_1, EventsInit_1, HostClassKeys_1, CssVarKeys_1, SlotNames_1>;
+export declare const defineViraElement: <Inputs extends {}>() => <const TagName extends `vira-${string}`, StateInit extends {}, EventsInit extends {}, const HostClassKeys extends `${TagName}-${string}`, const CssVarKeys extends `${TagName}-${string}`, const SlotNames extends readonly string[]>(inputs: import("element-vir").VerifiedElementInit<TagName, Inputs, StateInit, EventsInit, HostClassKeys, CssVarKeys, SlotNames>) => import("element-vir").DeclarativeElementDefinition<TagName, Inputs, StateInit, EventsInit, HostClassKeys, CssVarKeys, SlotNames>, defineViraElementNoInputs: <const TagName_1 extends `vira-${string}`, Inputs_1 extends {}, StateInit_1 extends {}, EventsInit_1 extends {}, const HostClassKeys_1 extends `${TagName_1}-${string}`, const CssVarKeys_1 extends `${TagName_1}-${string}`, const SlotNames_1 extends readonly string[]>(inputs: import("element-vir").VerifiedElementNoInputsInit<TagName_1, Inputs_1, StateInit_1, EventsInit_1, HostClassKeys_1, CssVarKeys_1, SlotNames_1>) => import("element-vir").DeclarativeElementDefinition<TagName_1, Inputs_1, StateInit_1, EventsInit_1, HostClassKeys_1, CssVarKeys_1, SlotNames_1>;

package/dist/elements/dropdown/dropdown-helpers.d.ts

@@ -0,0 +1,22 @@
+import { PopUpManager, ShowPopUpResult } from '../../util/pop-up-manager';
+import { ViraDropdownOption } from './vira-dropdown-item.element';
+export declare function filterToSelectedOptions({ selected, options, isMultiSelect, }: Readonly<{
+    selected: ReadonlyArray<PropertyKey>;
+    isMultiSelect?: boolean | undefined;
+    options: ReadonlyArray<Readonly<ViraDropdownOption>>;
+}>): ViraDropdownOption[];
+export declare function assertUniqueIdProps(options: ReadonlyArray<Readonly<{
+    id: PropertyKey;
+}>>): void;
+export declare function createNewSelection(id: PropertyKey, currentSelection: ReadonlyArray<PropertyKey>, isMultiSelect: boolean): PropertyKey[];
+export declare function triggerPopUpState({ open, emitEvent }: {
+    open: boolean;
+    emitEvent: boolean;
+}, { updateState, popUpManager, dispatch, host, }: {
+    updateState: (params: {
+        showPopUpResult: ShowPopUpResult | undefined;
+    }) => void;
+    popUpManager: PopUpManager;
+    dispatch: (open: boolean) => void;
+    host: HTMLElement;
+}): void;

package/dist/elements/dropdown/dropdown-helpers.js

@@ -0,0 +1,56 @@
+import { joinWithFinalConjunction } from '@augment-vir/common';
+import { ViraDropdown } from './vira-dropdown.element';
+export function filterToSelectedOptions({ selected, options, isMultiSelect, }) {
+    if (selected.length && options.length) {
+        const selectedOptions = options.filter((option) => selected.includes(option.id));
+        if (selectedOptions.length > 1 && !isMultiSelect) {
+            console.error(`${ViraDropdown.tagName} has multiple selections but \`isMultiSelect\` is not \`true\`. Truncating to the first selection.`);
+            return selectedOptions.slice(0, 1);
+        }
+        else {
+            return selectedOptions;
+        }
+    }
+    else {
+        return [];
+    }
+}
+export function assertUniqueIdProps(options) {
+    const usedIds = new Set();
+    const duplicateIds = [];
+    options.forEach((option) => {
+        if (usedIds.has(option.id)) {
+            duplicateIds.push(option.id);
+        }
+        else {
+            usedIds.add(option.id);
+        }
+    });
+    if (duplicateIds.length) {
+        throw new Error(`Duplicate option ids were given to ViraDropdown: ${joinWithFinalConjunction(duplicateIds)}`);
+    }
+}
+export function createNewSelection(id, currentSelection, isMultiSelect) {
+    if (isMultiSelect) {
+        return currentSelection.includes(id)
+            ? currentSelection.filter((entry) => entry !== id)
+            : [
+                ...currentSelection,
+                id,
+            ];
+    }
+    else {
+        return [id];
+    }
+}
+export function triggerPopUpState({ open, emitEvent }, { updateState, popUpManager, dispatch, host, }) {
+    if (open) {
+        updateState({ showPopUpResult: popUpManager.showPopUp(host) });
+    }
+    else {
+        popUpManager.removePopUp();
+    }
+    if (emitEvent) {
+        dispatch(open);
+    }
+}

package/dist/elements/dropdown/dropdown.mock.d.ts

@@ -0,0 +1,13 @@
+export declare const mockOptions: readonly [{
+    readonly label: "Option 0";
+    readonly id: 0;
+}, {
+    readonly label: "Option 1";
+    readonly id: 1;
+}, {
+    readonly label: "Option 2";
+    readonly id: 2;
+}, {
+    readonly label: "Option 3";
+    readonly id: 3;
+}];

package/dist/elements/dropdown/dropdown.mock.js

@@ -0,0 +1,18 @@
+export const mockOptions = [
+    {
+        label: 'Option 0',
+        id: 0,
+    },
+    {
+        label: 'Option 1',
+        id: 1,
+    },
+    {
+        label: 'Option 2',
+        id: 2,
+    },
+    {
+        label: 'Option 3',
+        id: 3,
+    },
+];

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

@@ -0,0 +1,16 @@
+import { PartialAndUndefined } from '@augment-vir/common';
+import { HTMLTemplateResult } from 'element-vir';
+export type ViraDropdownOption = {
+    /** Each `id` must be unique across all options. */
+    id: PropertyKey;
+    label: string;
+} & PartialAndUndefined<{
+    disabled?: boolean | undefined;
+    hoverText?: string | undefined;
+    /** An optional custom template for this option. */
+    template?: HTMLTemplateResult | undefined;
+}>;
+export declare const ViraDropdownItem: import("element-vir").DeclarativeElementDefinition<"vira-dropdown-item", {
+    label: string;
+    selected: boolean;
+}, {}, {}, "vira-dropdown-item-selected", `vira-dropdown-item-${string}`, readonly string[]>;

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

@@ -0,0 +1,63 @@
+import { css, html } from 'element-vir';
+import { Check24Icon } from '../../icons/icon-svgs/check-24.icon';
+import { noUserSelect, viraAnimationDurations } from '../../styles';
+import { viraBorders } from '../../styles/border';
+import { defineViraElement } from '../define-vira-element';
+import { ViraIcon } from '../vira-icon.element';
+export const ViraDropdownItem = defineViraElement()({
+    tagName: 'vira-dropdown-item',
+    hostClasses: {
+        'vira-dropdown-item-selected': ({ inputs }) => inputs.selected,
+    },
+    styles: ({ hostClasses }) => css `
+        :host {
+            display: flex;
+            ${noUserSelect};
+        }
+
+        .option {
+            pointer-events: none;
+            min-height: 24px;
+            display: flex;
+            align-items: center;
+            padding: 8px;
+            padding-left: 0;
+            text-align: left;
+        }
+
+        ${hostClasses['vira-dropdown-item-selected'].selector} ${ViraIcon} {
+            opacity: 1;
+        }
+
+        /*
+            The check icon looks centered when it has a border.
+            However, it does not have a border here.
+        */
+        ${ViraIcon} {
+            transition: opacity
+                ${viraAnimationDurations['vira-interaction-animation-duration'].value};
+            opacity: 0;
+            margin-top: -4px;
+            margin-right: -2px;
+            margin-left: 2px;
+        }
+
+        .dropdown-wrapper:not(.reverse-direction) .option:last-of-type {
+            border-radius: 0 0 ${viraBorders['vira-form-input-radius'].value}
+                ${viraBorders['vira-form-input-radius'].value};
+        }
+
+        .dropdown-wrapper.reverse-direction .option:first-of-type {
+            border-radius: ${viraBorders['vira-form-input-radius'].value}
+                ${viraBorders['vira-form-input-radius'].value} 0 0;
+        }
+    `,
+    renderCallback({ inputs }) {
+        return html `
+            <div class="option">
+                <${ViraIcon.assign({ icon: Check24Icon })}></${ViraIcon}>
+                <slot>${inputs.label}</slot>
+            </div>
+        `;
+    },
+});

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

@@ -0,0 +1,16 @@
+import { ViraDropdownOption } from './vira-dropdown-item.element';
+export declare const viraDropdownOptionsTestIds: {
+    option: string;
+};
+export declare const ViraDropdownOptions: import("element-vir").DeclarativeElementDefinition<"vira-dropdown-options", Readonly<{
+    /** All dropdown options to show to the user. */
+    options: ReadonlyArray<Readonly<ViraDropdownOption>>;
+    /**
+     * The currently selected dropdown options. Note that this must be a reference subset of the
+     * options input. Meaning, entries in this array must be the exact same objects (by
+     * reference) as entries in the `options` input array for them to be marked as selected.
+     */
+    selectedOptions: ReadonlyArray<Readonly<ViraDropdownOption>>;
+}>, {}, {
+    selectionChange: import("element-vir").DefinedTypedEventNameDefinition<Readonly<ViraDropdownOption>>;
+}, `vira-dropdown-options-${string}`, `vira-dropdown-options-${string}`, readonly string[]>;

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

@@ -0,0 +1,100 @@
+import { nav, navSelector } from 'device-navigation';
+import { classMap, css, defineElementEvent, html, ifDefined, listen, nothing, testId, } from 'element-vir';
+import { viraDisabledStyles } from '../../styles';
+import { viraBorders } from '../../styles/border';
+import { viraFormCssVars } from '../../styles/form-themes';
+import { viraShadows } from '../../styles/shadows';
+import { defineViraElement } from '../define-vira-element';
+import { ViraDropdownItem } from './vira-dropdown-item.element';
+export const viraDropdownOptionsTestIds = {
+    option: 'dropdown-option',
+};
+export const ViraDropdownOptions = defineViraElement()({
+    tagName: 'vira-dropdown-options',
+    events: {
+        selectionChange: defineElementEvent(),
+    },
+    styles: css `
+        :host {
+            display: flex;
+            flex-direction: column;
+
+            pointer-events: auto;
+            width: 100%;
+            max-height: 100%;
+            overflow-y: auto;
+            z-index: 99;
+            border-radius: ${viraBorders['vira-form-input-radius'].value};
+            border-top-left-radius: 0;
+            border-top-right-radius: 0;
+            background-color: ${viraFormCssVars['vira-form-background-color'].value};
+            border: 1px solid ${viraFormCssVars['vira-form-border-color'].value};
+            color: ${viraFormCssVars['vira-form-foreground-color'].value};
+            ${viraShadows.menuShadow}
+        }
+
+        .dropdown-item {
+            background-color: white;
+            outline: none;
+        }
+
+        ${navSelector.css.selected('.dropdown-item:not(.disabled)')} {
+            background-color: ${viraFormCssVars['vira-form-selection-hover-background-color']
+        .value};
+            outline: none;
+        }
+
+        ${ViraDropdownItem} {
+            pointer-events: none;
+        }
+
+        .dropdown-item.disabled {
+            ${viraDisabledStyles};
+            pointer-events: auto;
+        }
+    `,
+    renderCallback({ inputs, dispatch, events }) {
+        const optionTemplates = inputs.options.map((option) => {
+            const innerTemplate = option.template ||
+                html `
+                    <${ViraDropdownItem.assign({
+                    label: option.label,
+                    selected: inputs.selectedOptions.includes(option),
+                })}></${ViraDropdownItem}>
+                `;
+            return html `
+                <div
+                    class="dropdown-item ${classMap({
+                disabled: !!option.disabled,
+            })}"
+                    ${testId(viraDropdownOptionsTestIds.option)}
+                    title=${ifDefined(option.hoverText || undefined)}
+                    role="option"
+                    ${option.disabled ? nothing : nav()}
+                    ${listen('mousedown', (event) => {
+                /**
+                 * Prevent this mousedown event from propagating to the window, which would
+                 * then trigger the dropdown to close.
+                 */
+                event.stopPropagation();
+            })}
+                    ${listen('mouseup', (event) => {
+                /**
+                 * Prevent this event from propagating to the window, which would then
+                 * trigger the dropdown to close.
+                 */
+                event.stopPropagation();
+                if (!option.disabled) {
+                    dispatch(new events.selectionChange(option));
+                }
+            })}
+                >
+                    ${innerTemplate}
+                </div>
+            `;
+        });
+        return html `
+            <slot>${optionTemplates}</slot>
+        `;
+    },
+});

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

@@ -0,0 +1,37 @@
+import { PartialAndUndefined } from '@augment-vir/common';
+import { NavController } from 'device-navigation';
+import { ViraIconSvg } from '../../icons/icon-svg';
+import { PopUpManager, ShowPopUpResult } from '../../util/pop-up-manager';
+import { ViraDropdownOption } from './vira-dropdown-item.element';
+export declare const viraDropdownTestIds: {
+    trigger: string;
+    icon: string;
+    prefix: string;
+    options: string;
+};
+export declare const ViraDropdown: import("element-vir").DeclarativeElementDefinition<"vira-dropdown", {
+    options: ReadonlyArray<Readonly<ViraDropdownOption>>;
+    /** The selected id from the given options. */
+    selected: ReadonlyArray<PropertyKey>;
+} & PartialAndUndefined<{
+    /** 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;
+}>, {
+    /** `undefined` means the pop up is not currently showing. */
+    showPopUpResult: ShowPopUpResult | undefined;
+    popUpManager: PopUpManager;
+    navController: NavController | undefined;
+}, {
+    selectedChange: import("element-vir").DefinedTypedEventNameDefinition<PropertyKey[]>;
+    openChange: import("element-vir").DefinedTypedEventNameDefinition<boolean>;
+}, "vira-dropdown-disabled", `vira-dropdown-${string}`, readonly string[]>;

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

@@ -0,0 +1,310 @@
+import { NavController } from 'device-navigation';
+import { classMap, css, defineElementEvent, html, ifDefined, listen, perInstance, renderIf, testId, } from 'element-vir';
+import { assertInstanceOf } from 'run-time-assertions';
+import { ChevronUp24Icon } from '../../icons/index';
+import { noNativeFormStyles, noUserSelect, viraAnimationDurations, viraDisabledStyles, } from '../../styles';
+import { viraBorders } from '../../styles/border';
+import { createFocusStyles, viraFocusCssVars } from '../../styles/focus';
+import { viraFormCssVars } from '../../styles/form-themes';
+import { viraShadows } from '../../styles/shadows';
+import { HidePopUpEvent, NavSelectEvent, PopUpManager, } from '../../util/pop-up-manager';
+import { defineViraElement } from '../define-vira-element';
+import { ViraIcon } from '../vira-icon.element';
+import { assertUniqueIdProps, createNewSelection, filterToSelectedOptions, triggerPopUpState, } from './dropdown-helpers';
+import { ViraDropdownOptions } from './vira-dropdown-options.element';
+export const viraDropdownTestIds = {
+    trigger: 'dropdown-trigger',
+    icon: 'dropdown-icon',
+    prefix: 'dropdown-prefix',
+    options: 'dropdown-options',
+};
+export const ViraDropdown = defineViraElement()({
+    tagName: 'vira-dropdown',
+    hostClasses: {
+        'vira-dropdown-disabled': ({ inputs }) => !!inputs.isDisabled,
+    },
+    styles: ({ hostClasses }) => css `
+        :host {
+            display: inline-flex;
+            vertical-align: middle;
+            width: 256px;
+            ${viraFocusCssVars['vira-focus-outline-color'].name}: ${viraFormCssVars['vira-form-focus-color'].value};
+            position: relative;
+            max-width: 100%;
+        }
+
+        .dropdown-wrapper {
+            ${noNativeFormStyles};
+            max-width: 100%;
+            align-self: stretch;
+            flex-grow: 1;
+            position: relative;
+            border-radius: ${viraBorders['vira-form-input-radius'].value};
+            transition: border-radius
+                ${viraAnimationDurations['vira-interaction-animation-duration'].value};
+            outline: none;
+        }
+
+        ${createFocusStyles({
+        selector: '.dropdown-wrapper:focus',
+        elementBorderSize: 1,
+    })}
+
+        .selection-display {
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+
+        .trigger-icon {
+            transform: rotate(0);
+            transition: ${viraAnimationDurations['vira-interaction-animation-duration'].value}
+                linear transform;
+            align-self: flex-start;
+        }
+
+        .trigger-icon-wrapper {
+            flex-grow: 1;
+            display: flex;
+            justify-content: flex-end;
+        }
+
+        .dropdown-wrapper.open .trigger-icon {
+            transform: rotate(180deg);
+        }
+
+        .dropdown-wrapper.open:not(.open-upwards) {
+            border-bottom-left-radius: 0;
+        }
+
+        .open-upwards.dropdown-wrapper.open {
+            border-top-left-radius: 0;
+        }
+
+        .dropdown-trigger {
+            border: 1px solid ${viraFormCssVars['vira-form-border-color'].value};
+            height: 100%;
+            width: 100%;
+            transition: inherit;
+            box-sizing: border-box;
+            display: flex;
+            gap: 8px;
+            text-align: left;
+            align-items: center;
+            padding: 3px;
+            padding-left: 10px;
+            ${noUserSelect};
+            border-radius: inherit;
+            background-color: ${viraFormCssVars['vira-form-background-color'].value};
+            color: ${viraFormCssVars['vira-form-foreground-color'].value};
+        }
+
+        .open-upwards ${ViraDropdownOptions} {
+            border-bottom-left-radius: 0;
+            border-bottom-right-radius: 0;
+            ${viraShadows.menuShadowReversed}
+        }
+
+        ${hostClasses['vira-dropdown-disabled'].selector} {
+            ${viraDisabledStyles}
+            pointer-events: auto;
+        }
+
+        ${hostClasses['vira-dropdown-disabled'].selector} .dropdown-wrapper {
+            pointer-events: none;
+        }
+
+        .pop-up-positioner {
+            position: absolute;
+            pointer-events: none;
+            display: flex;
+            flex-direction: column;
+
+            /* highest possible z-index */
+            z-index: 2147483647;
+            /* space for the caret icon */
+            right: 28px;
+            /* minus the border width */
+            top: calc(100% - 1px);
+        }
+
+        .using-placeholder {
+            opacity: 0.4;
+        }
+
+        .open-upwards .pop-up-positioner {
+            flex-direction: column-reverse;
+            /* minus the border width */
+            bottom: calc(100% - 1px);
+        }
+    `,
+    events: {
+        selectedChange: defineElementEvent(),
+        openChange: defineElementEvent(),
+    },
+    stateInitStatic: {
+        /** `undefined` means the pop up is not currently showing. */
+        showPopUpResult: undefined,
+        popUpManager: perInstance(() => new PopUpManager()),
+        navController: undefined,
+    },
+    cleanupCallback({ state, updateState }) {
+        updateState({ showPopUpResult: undefined });
+        state.popUpManager.destroy();
+    },
+    initCallback({ state, updateState, host, inputs, dispatch, events }) {
+        state.popUpManager.listen(HidePopUpEvent, () => {
+            updateState({ showPopUpResult: undefined });
+            if (!inputs.isDisabled) {
+                const dropdownWrapper = host.shadowRoot.querySelector('.dropdown-wrapper');
+                assertInstanceOf(dropdownWrapper, HTMLButtonElement, 'failed to find dropdown wrapper child');
+                dropdownWrapper.focus();
+            }
+        });
+        state.popUpManager.listen(NavSelectEvent, (event) => {
+            const optionIndex = event.detail.x;
+            const option = inputs.options[optionIndex];
+            if (!option) {
+                throw new Error(`Found no dropdown option at index '${optionIndex}'`);
+            }
+            /** Only close upon option selection if the dropdown is not multi select. */
+            if (!inputs.isMultiSelect) {
+                triggerPopUpState({ emitEvent: true, open: false }, {
+                    dispatch: (openState) => {
+                        dispatch(new events.openChange(openState));
+                    },
+                    host,
+                    popUpManager: state.popUpManager,
+                    updateState,
+                });
+            }
+            dispatch(new events.selectedChange(createNewSelection(option.id, inputs.selected, !!inputs.isMultiSelect)));
+        });
+        updateState({ navController: new NavController(host) });
+    },
+    renderCallback({ dispatch, events, state, inputs, updateState, host }) {
+        assertUniqueIdProps(inputs.options);
+        function triggerPopUp(param) {
+            triggerPopUpState(param, {
+                dispatch: (openState) => {
+                    dispatch(new events.openChange(openState));
+                },
+                host,
+                popUpManager: state.popUpManager,
+                updateState,
+            });
+        }
+        if (inputs.isDisabled) {
+            triggerPopUp({ open: false, emitEvent: false });
+        }
+        else if (inputs.z_debug_forceOpenState != undefined) {
+            if (!inputs.z_debug_forceOpenState && state.showPopUpResult) {
+                triggerPopUp({ emitEvent: false, open: false });
+            }
+            else if (inputs.z_debug_forceOpenState && !state.showPopUpResult) {
+                triggerPopUp({ emitEvent: false, open: true });
+            }
+        }
+        const selectedOptions = filterToSelectedOptions(inputs);
+        const leadingIconTemplate = inputs.icon
+            ? html `
+                  <${ViraIcon.assign({
+                icon: inputs.icon,
+            })}
+                      ${testId(viraDropdownTestIds.icon)}
+                  ></${ViraIcon}>
+              `
+            : '';
+        const positionerStyles = state.showPopUpResult
+            ? state.showPopUpResult.popDown
+                ? /** Dropdown going down position. */
+                    css `
+                      bottom: -${state.showPopUpResult.positions.diff.bottom}px;
+                  `
+                : /** Dropdown going up position. */
+                    css `
+                      top: -${state.showPopUpResult.positions.diff.top}px;
+                  `
+            : undefined;
+        function respondToClick() {
+            triggerPopUp({ emitEvent: true, open: !state.showPopUpResult });
+        }
+        const shouldUsePlaceholder = !selectedOptions.length;
+        const prefixTemplate = inputs.selectionPrefix && !shouldUsePlaceholder
+            ? html `
+                      <span class="selected-label-prefix" ${testId(viraDropdownTestIds.prefix)}>
+                          ${inputs.selectionPrefix}
+                      </span>
+                  `
+            : '';
+        const selectionDisplay = shouldUsePlaceholder
+            ? inputs.placeholder || ''
+            : selectedOptions.map((item) => item.label).join(', ');
+        return html `
+            <button
+                ?disabled=${!!inputs.isDisabled}
+                class="dropdown-wrapper ${classMap({
+            open: !!state.showPopUpResult,
+            'open-upwards': !state.showPopUpResult?.popDown,
+        })}"
+                ${testId(viraDropdownTestIds.trigger)}
+                role="listbox"
+                aria-expanded=${!!state.showPopUpResult}
+                ${listen('keydown', (event) => {
+            if (!state.showPopUpResult && event.code.startsWith('Arrow')) {
+                triggerPopUp({ emitEvent: true, open: true });
+            }
+        })}
+                ${listen('click', (event) => {
+            /** Detail is 0 if it was a keyboard key (like Enter) that triggered this click. */
+            if (event.detail === 0) {
+                respondToClick();
+            }
+        })}
+                ${listen('mousedown', (event) => {
+            /** Ignore any clicks that aren't the main button. */
+            if (event.button === 0) {
+                respondToClick();
+            }
+        })}
+            >
+                <div class="dropdown-trigger">
+                    ${leadingIconTemplate}
+                    <span
+                        class="selection-display ${classMap({
+            'using-placeholder': shouldUsePlaceholder,
+        })}"
+                        title=${ifDefined(shouldUsePlaceholder ? selectionDisplay : undefined)}
+                    >
+                        ${prefixTemplate} ${selectionDisplay}
+                    </span>
+                    <span class="trigger-icon-wrapper">
+                        <${ViraIcon.assign({ icon: ChevronUp24Icon })}
+                            class="trigger-icon"
+                        ></${ViraIcon}>
+                    </span>
+                </div>
+                <div class="pop-up-positioner" style=${positionerStyles}>
+                    ${renderIf(!!state.showPopUpResult, html `
+                            <${ViraDropdownOptions.assign({
+            options: inputs.options,
+            selectedOptions,
+        })}
+                                ${listen(ViraDropdownOptions.events.selectionChange, (event) => {
+            /**
+             * Only close upon option selection if the dropdown is not multi
+             * select.
+             */
+            if (!inputs.isMultiSelect) {
+                triggerPopUp({ emitEvent: true, open: false });
+            }
+            dispatch(new events.selectedChange(createNewSelection(event.detail.id, inputs.selected, !!inputs.isMultiSelect)));
+        })}
+                                ${testId(viraDropdownTestIds.options)}
+                            ></${ViraDropdownOptions}>
+                        `)}
+                </div>
+            </button>
+        `;
+    },
+});