vira 28.19.4 → 28.19.6

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

@@ -1,22 +1,25 @@
-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';
+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';
+
 /**
  * Button styles available for {@link ViraButton}.
  *
  * @category Button
  */
-export var ViraButtonStyle;
-(function (ViraButtonStyle) {
-    ViraButtonStyle["Default"] = "vira-button-default";
-    ViraButtonStyle["Outline"] = "vira-button-outline";
-})(ViraButtonStyle || (ViraButtonStyle = {}));
+export enum ViraButtonStyle {
+    Default = 'vira-button-default',
+    Outline = 'vira-button-outline',
+}
+
 /**
  * A custom button with default styling.
  *
@@ -24,25 +27,42 @@ export var ViraButtonStyle;
  * @category Elements
  * @see https://electrovir.github.io/vira/book/elements/vira-button
  */
-export const ViraButton = defineViraElement()({
+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;
+    }>
+>()({
     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': '',
     },
-    styles: ({ hostClasses, cssVars }) => css `
+    styles: ({hostClasses, cssVars}) => css`
         :host {
             font-weight: bold;
             display: inline-flex;
@@ -51,19 +71,29 @@ 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} {
@@ -98,8 +128,8 @@ export const ViraButton = defineViraElement()({
                 border-color ${viraAnimationDurations['vira-interaction-animation-duration'].value};
 
             ${createFocusStyles({
-        elementBorderSize: 2,
-    })}
+                elementBorderSize: 2,
+            })}
         }
 
         .empty-text {
@@ -118,22 +148,23 @@ 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.js → src/elements/vira-card.element.ts}

@@ -1,34 +1,37 @@
-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 var ViraCardState;
-(function (ViraCardState) {
-    ViraCardState["Error"] = "error";
-    ViraCardState["Success"] = "success";
-})(ViraCardState || (ViraCardState = {}));
+export 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 const ViraCard = defineViraElement()({
+export const ViraCard = defineViraElement<{
+    cardState?: ViraCardState | undefined;
+}>()({
     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};
@@ -44,7 +47,7 @@ export const ViraCard = defineViraElement()({
         }
     `,
     render() {
-        return html `
+        return html`
             <slot></slot>
         `;
     },

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

@@ -1,11 +1,52 @@
-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';
+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;
+};
+
 /**
  * A custom checkbox.
  *
@@ -13,12 +54,12 @@ import { ViraIcon } from './vira-icon.element.js';
  * @category Elements
  * @see https://electrovir.github.io/vira/book/elements/vira-checkbox
  */
-export const ViraCheckbox = defineViraElement()({
+export const ViraCheckbox = defineViraElement<Readonly<ViraCheckboxInputs>>()({
     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;
         }
@@ -52,7 +93,7 @@ export const ViraCheckbox = defineViraElement()({
 
             &:hover .custom-checkbox {
                 background-color: ${viraFormCssVars['vira-form-selection-hover-background-color']
-        .value};
+                    .value};
             }
         }
 
@@ -71,7 +112,7 @@ export const ViraCheckbox = defineViraElement()({
             position: relative;
             cursor: pointer;
 
-            ${createFocusStyles({ elementBorderSize: 1 })}
+            ${createFocusStyles({elementBorderSize: 1})}
 
             &.checked {
                 & ${ViraIcon} {
@@ -85,7 +126,7 @@ export const ViraCheckbox = defineViraElement()({
 
             &:active {
                 background-color: ${viraFormCssVars['vira-form-selection-active-background-color']
-        .value};
+                    .value};
             }
 
             &.disabled {
@@ -100,16 +141,17 @@ export const ViraCheckbox = defineViraElement()({
         }
     `,
     events: {
-        valueChange: defineElementEvent(),
+        valueChange: defineElementEvent<boolean>(),
     },
-    render({ inputs, dispatch, events }) {
-        function updateValue() {
+    render({inputs, dispatch, events}) {
+        function updateValue(this: void) {
             if (!inputs.disabled) {
                 dispatch(new events.valueChange(!inputs.value));
             }
         }
+
         const textLabel = inputs.label
-            ? html `
+            ? html`
                   <span
                       class="label-text"
                       ${attributes(inputs.attributePassthrough?.['text'])}
@@ -119,11 +161,12 @@ export const ViraCheckbox = defineViraElement()({
                   </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)}
@@ -131,10 +174,10 @@ export const ViraCheckbox = defineViraElement()({
                 ${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'}
@@ -145,9 +188,9 @@ export const ViraCheckbox = defineViraElement()({
                     ${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.js → src/elements/vira-collapsible-wrapper.element.ts}

@@ -1,6 +1,7 @@
-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.
  *
@@ -8,7 +9,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()({
+export const ViraCollapsibleWrapper = defineViraElement<{expanded: boolean}>()({
     tagName: 'vira-collapsible-wrapper',
     state() {
         return {
@@ -16,10 +17,10 @@ export const ViraCollapsibleWrapper = defineViraElement()({
         };
     },
     hostClasses: {
-        'vira-collapsible-wrapper-expanded': ({ inputs }) => inputs.expanded,
+        'vira-collapsible-wrapper-expanded': ({inputs}) => inputs.expanded,
     },
     slotNames: ['header'],
-    styles: ({ hostClasses }) => css `
+    styles: ({hostClasses}) => css`
         :host {
             display: flex;
             flex-direction: column;
@@ -46,31 +47,32 @@ export const ViraCollapsibleWrapper = defineViraElement()({
         }
     `,
     events: {
-        expandChange: defineElementEvent(),
+        expandChange: defineElementEvent<boolean>(),
     },
-    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.js → src/elements/vira-dropdown.element.ts}

@@ -1,14 +1,28 @@
-import { check } from '@augment-vir/assert';
-import { filterMap } from '@augment-vir/common';
-import { classMap, css, defineElementEvent, html, ifDefined, listen, nothing, testId, } from 'element-vir';
-import { ChevronUp24Icon } from '../icons/index.js';
-import { viraBorders } from '../styles/border.js';
-import { viraFormCssVars } from '../styles/form-styles.js';
-import { noUserSelect, viraAnimationDurations } from '../styles/index.js';
-import { defineViraElement } from './define-vira-element.js';
-import { ViraMenuTrigger } from './pop-up/vira-menu-trigger.element.js';
-import { HorizontalAnchor } from './pop-up/vira-pop-up-trigger.element.js';
-import { ViraIcon } from './vira-icon.element.js';
+import {check} from '@augment-vir/assert';
+import {filterMap, type PartialWithUndefined} from '@augment-vir/common';
+import {
+    classMap,
+    css,
+    defineElementEvent,
+    html,
+    type HTMLTemplateResult,
+    ifDefined,
+    listen,
+    nothing,
+    testId,
+} from 'element-vir';
+import {type ViraIconSvg} from '../icons/icon-svg.js';
+import {ChevronUp24Icon} from '../icons/index.js';
+import {viraBorders} from '../styles/border.js';
+import {viraFormCssVars} from '../styles/form-styles.js';
+import {noUserSelect, viraAnimationDurations} from '../styles/index.js';
+import {type ShowPopUpResult} from '../util/pop-up-manager.js';
+import {defineViraElement} from './define-vira-element.js';
+import {type MenuItem} from './pop-up/pop-up-menu-item.js';
+import {ViraMenuTrigger} from './pop-up/vira-menu-trigger.element.js';
+import {HorizontalAnchor, type PopUpTriggerPosition} from './pop-up/vira-pop-up-trigger.element.js';
+import {ViraIcon} from './vira-icon.element.js';
+
 /**
  * Test ids for {@link ViraDropdown}.
  *
@@ -19,6 +33,7 @@ export const viraDropdownTestIds = {
     icon: 'dropdown-icon',
     prefix: 'dropdown-prefix',
 };
+
 /**
  * A dropdown element that uses pop-up menus.
  *
@@ -26,9 +41,30 @@ export const viraDropdownTestIds = {
  * @category Elements
  * @see https://electrovir.github.io/vira/book/elements/dropdown/vira-dropdown
  */
-export const ViraDropdown = defineViraElement()({
+export const ViraDropdown = defineViraElement<
+    {
+        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
+    >
+>()({
     tagName: 'vira-dropdown',
-    styles: css `
+    styles: css`
         :host {
             display: inline-flex;
             vertical-align: middle;
@@ -97,76 +133,86 @@ export const ViraDropdown = defineViraElement()({
         }
     `,
     events: {
-        selectedChange: defineElementEvent(),
-        openChange: defineElementEvent(),
+        selectedChange: defineElementEvent<PropertyKey[]>(),
+        openChange: defineElementEvent<ShowPopUpResult | undefined>(),
     },
     state() {
         return {
             /** `undefined` means the pop up is not currently showing. */
-            showPopUpResult: undefined,
+            showPopUpResult: undefined as ShowPopUpResult | undefined,
         };
     },
-    render({ state, inputs, dispatch, events, updateState }) {
-        const selectedOptions = filterMap(inputs.selected, (selectedId) => inputs.options.find((option) => option.id === selectedId), check.isTruthy);
+    render({state, inputs, dispatch, events, updateState}) {
+        const selectedOptions = filterMap(
+            inputs.selected,
+            (selectedId) => inputs.options.find((option) => option.id === selectedId),
+            check.isTruthy,
+        );
+
         const leadingIconTemplate = inputs.icon
-            ? html `
+            ? html`
                   <${ViraIcon.assign({
-                icon: inputs.icon,
-            })}
+                      icon: inputs.icon,
+                  })}
                       ${testId(viraDropdownTestIds.icon)}
                   ></${ViraIcon}>
               `
             : nothing;
-        const shouldUsePlaceholder = !selectedOptions.length;
-        const prefixTemplate = inputs.selectionPrefix && !shouldUsePlaceholder
-            ? html `
+
+        const shouldUsePlaceholder: boolean = !selectedOptions.length;
+
+        const prefixTemplate =
+            inputs.selectionPrefix && !shouldUsePlaceholder
+                ? html`
                       <span class="selected-label-prefix" ${testId(viraDropdownTestIds.prefix)}>
                           ${inputs.selectionPrefix}
                       </span>
                   `
-            : nothing;
-        const selectionDisplay = shouldUsePlaceholder
+                : nothing;
+
+        const selectionDisplay: string | HTMLTemplateResult = shouldUsePlaceholder
             ? inputs.placeholder || ''
             : inputs.isMultiSelect && selectedOptions.length > 1
-                ? `${selectedOptions.length} Selected`
-                : selectedOptions[0]?.label || '';
-        return html `
+              ? `${selectedOptions.length} Selected`
+              : selectedOptions[0]?.label || '';
+
+        return html`
             <${ViraMenuTrigger.assign({
-            ...inputs,
-            items: inputs.options,
-            popUpOffset: {
-                vertical: -1,
-                right: 24,
-            },
-            horizontalAnchor: inputs.horizontalAnchor || HorizontalAnchor.Both,
-        })}
+                ...inputs,
+                items: inputs.options,
+                popUpOffset: {
+                    vertical: -1,
+                    right: 24,
+                },
+                horizontalAnchor: inputs.horizontalAnchor || HorizontalAnchor.Both,
+            })}
                 ${listen(ViraMenuTrigger.events.openChange, (event) => {
-            updateState({ showPopUpResult: event.detail });
-            dispatch(new events.openChange(event.detail));
-        })}
+                    updateState({showPopUpResult: event.detail});
+                    dispatch(new events.openChange(event.detail));
+                })}
                 ${listen(ViraMenuTrigger.events.itemActivate, (event) => {
-            dispatch(new events.selectedChange(event.detail));
-        })}
+                    dispatch(new events.selectedChange(event.detail));
+                })}
             >
                 <div
                     class="dropdown-trigger ${classMap({
-            open: !!state.showPopUpResult,
-            'open-upwards': !state.showPopUpResult?.popDown,
-        })}"
+                        open: !!state.showPopUpResult,
+                        'open-upwards': !state.showPopUpResult?.popDown,
+                    })}"
                     ${testId(viraDropdownTestIds.trigger)}
                 >
                     ${leadingIconTemplate}
                     <span
                         class="selection-display ${classMap({
-            'using-placeholder': shouldUsePlaceholder,
-        })}"
+                            'using-placeholder': shouldUsePlaceholder,
+                        })}"
                         title=${ifDefined(shouldUsePlaceholder ? undefined : selectionDisplay)}
                     >
                         ${prefixTemplate} ${selectionDisplay}
                     </span>
 
                     <span class="trigger-icon-wrapper">
-                        <${ViraIcon.assign({ icon: ChevronUp24Icon })}
+                        <${ViraIcon.assign({icon: ChevronUp24Icon})}
                             class="trigger-icon"
                         ></${ViraIcon}>
                     </span>