vira 31.31.7 → 32.0.0

package/dist/elements/pop-up/vira-menu-item.element.js

@@ -29,11 +29,21 @@ export const ViraMenuItem = defineViraElement()({
         activate: defineElementEvent(),
     },
     hostClasses: {
-        'vira-menu-item-selected': ({ inputs }) => !!inputs.selected || !!inputs.iconOverride,
-        'vira-menu-item-disabled': ({ inputs }) => !!inputs.disabled,
-        'vira-menu-item-enabled': ({ inputs }) => !inputs.disabled,
-        'vira-menu-item-default-icon': ({ inputs }) => !inputs.iconOverride,
-        'vira-menu-item-default-styles': ({ inputs }) => !inputs.disablePointerStyles,
+        'vira-menu-item-selected'({ inputs }) {
+            return !!inputs.selected || !!inputs.iconOverride;
+        },
+        'vira-menu-item-disabled'({ inputs }) {
+            return !!inputs.disabled;
+        },
+        'vira-menu-item-enabled'({ inputs }) {
+            return !inputs.disabled;
+        },
+        'vira-menu-item-default-icon'({ inputs }) {
+            return !inputs.iconOverride;
+        },
+        'vira-menu-item-default-styles'({ inputs }) {
+            return !inputs.disablePointerStyles;
+        },
     },
     cssVars: {
         /** Horizontal gap between a menu item's icon and its label. */
@@ -41,7 +51,7 @@ export const ViraMenuItem = defineViraElement()({
         'vira-menu-item-padding': '6px 8px',
         'vira-menu-item-border-radius': '4px',
     },
-    styles: ({ hostClasses, cssVars }) => {
+    styles({ hostClasses, cssVars }) {
         return css `
             :host {
                 display: flex;
@@ -182,7 +192,9 @@ export const ViraMenuItem = defineViraElement()({
                     inputs.keepOpenAfterInteraction) {
                     return;
                 }
-                dispatch(new events.activate(undefined));
+                dispatch(new events.activate({
+                    detail: undefined,
+                }));
             }, {
                 capture: true,
             }),
@@ -198,7 +210,7 @@ export const ViraMenuItem = defineViraElement()({
             }),
         ];
         updateState({
-            cleanupListeners: () => {
+            cleanupListeners() {
                 listenerRemovers.forEach((remover) => remover());
             },
         });

package/dist/elements/pop-up/vira-menu-trigger.element.d.ts

@@ -41,5 +41,5 @@ export declare const ViraMenuTrigger: import("element-vir").DeclarativeElementDe
     /** `undefined` means the pop up is not currently showing. */
     showPopUpResult: ShowPopUpResult | undefined;
 }, {
-    openChange: import("element-vir").DefineEvent<ShowPopUpResult | undefined>;
+    openChange: import("element-vir").DefineElementEvent<ShowPopUpResult | undefined>;
 }, `vira-${string}-`, `vira-${string}-`, readonly ["vira-menu-trigger-trigger"], readonly []>;

package/dist/elements/pop-up/vira-menu-trigger.element.js

@@ -64,7 +64,9 @@ export const ViraMenuTrigger = defineViraElement()({
         })}
                 ${listen(ViraPopUpTrigger.events.openChange, (event) => {
             if (!!state.showPopUpResult !== !!event.detail) {
-                dispatch(new events.openChange(event.detail));
+                dispatch(new events.openChange({
+                    detail: event.detail,
+                }));
             }
             updateState({
                 showPopUpResult: event.detail,

package/dist/elements/pop-up/vira-menu.element.js

@@ -36,14 +36,20 @@ export var ViraMenuPopUpDirection;
 export const ViraMenu = defineViraElement()({
     tagName: 'vira-menu',
     hostClasses: {
-        'vira-menu-open-upwards': ({ inputs }) => inputs.direction === ViraMenuPopUpDirection.Upwards,
-        'vira-menu-rounded': ({ inputs }) => inputs.cornerStyle === ViraMenuCornerStyle.AllRounded,
-        'vira-menu-square': ({ inputs }) => inputs.cornerStyle === ViraMenuCornerStyle.AllSquare,
+        'vira-menu-open-upwards'({ inputs }) {
+            return inputs.direction === ViraMenuPopUpDirection.Upwards;
+        },
+        'vira-menu-rounded'({ inputs }) {
+            return inputs.cornerStyle === ViraMenuCornerStyle.AllRounded;
+        },
+        'vira-menu-square'({ inputs }) {
+            return inputs.cornerStyle === ViraMenuCornerStyle.AllSquare;
+        },
     },
     cssVars: {
         'vira-menu-padding': '4px',
     },
-    styles: ({ hostClasses, cssVars }) => {
+    styles({ hostClasses, cssVars }) {
         return css `
             :host {
                 display: flex;

package/dist/elements/pop-up/vira-pop-up-trigger.element.d.ts

@@ -96,13 +96,13 @@ export declare const ViraPopUpTrigger: import("element-vir").DeclarativeElementD
     showPopUpResult: ShowPopUpResult | undefined;
     popUpManager: PopUpManager;
 }, {
-    navSelect: import("element-vir").DefineEvent<Coords>;
+    navSelect: import("element-vir").DefineElementEvent<Coords>;
     /**
      * - `undefined` indicates that the pop-up just closed.
      * - {@link ShowPopUpResult} indicates that the pop-up just opened.
      */
-    openChange: import("element-vir").DefineEvent<ShowPopUpResult | undefined>;
-    init: import("element-vir").DefineEvent<{
+    openChange: import("element-vir").DefineElementEvent<ShowPopUpResult | undefined>;
+    init: import("element-vir").DefineElementEvent<{
         navController: NavController;
         popUpManager: PopUpManager;
     }>;

package/dist/elements/pop-up/vira-pop-up-trigger.element.js

@@ -58,11 +58,17 @@ export const ViraPopUpTrigger = defineViraElement()({
         'vira-pop-up-trigger-pop-up',
     ],
     hostClasses: {
-        'vira-pop-up-trigger-disabled': ({ inputs }) => !!inputs.isDisabled,
-        'vira-pop-up-trigger-inside-focus': ({ inputs }) => !!inputs.useInsideFocus,
-        'vira-pop-up-trigger-outside-focus': ({ inputs }) => !inputs.useInsideFocus,
+        'vira-pop-up-trigger-disabled'({ inputs }) {
+            return !!inputs.isDisabled;
+        },
+        'vira-pop-up-trigger-inside-focus'({ inputs }) {
+            return !!inputs.useInsideFocus;
+        },
+        'vira-pop-up-trigger-outside-focus'({ inputs }) {
+            return !inputs.useInsideFocus;
+        },
     },
-    styles: ({ hostClasses }) => {
+    styles({ hostClasses }) {
         return css `
             :host {
                 display: inline-flex;
@@ -151,7 +157,9 @@ export const ViraPopUpTrigger = defineViraElement()({
             updateState({
                 showPopUpResult: undefined,
             });
-            dispatch(new events.openChange(undefined));
+            dispatch(new events.openChange({
+                detail: undefined,
+            }));
             if (inputs.focusOnClose && !inputs.isDisabled) {
                 const dropdownWrapper = host.shadowRoot.querySelector('.dropdown-wrapper');
                 assert.instanceOf(dropdownWrapper, HTMLButtonElement, 'failed to find dropdown wrapper child');
@@ -171,11 +179,15 @@ export const ViraPopUpTrigger = defineViraElement()({
                     popUpManager: state.popUpManager,
                 });
             }
-            dispatch(new events.navSelect(event.detail));
+            dispatch(new events.navSelect({
+                detail: event.detail,
+            }));
         });
         dispatch(new events.init({
-            navController: state.popUpManager.navController,
-            popUpManager: state.popUpManager,
+            detail: {
+                navController: state.popUpManager.navController,
+                popUpManager: state.popUpManager,
+            },
         }));
     },
     render({ dispatch, events, state, inputs, updateState, host, slotNames }) {
@@ -197,7 +209,9 @@ export const ViraPopUpTrigger = defineViraElement()({
                         showPopUpResult,
                     });
                     if (emitEvent) {
-                        dispatch(new events.openChange(showPopUpResult));
+                        dispatch(new events.openChange({
+                            detail: showPopUpResult,
+                        }));
                     }
                 },
                 host,
@@ -229,7 +243,7 @@ export const ViraPopUpTrigger = defineViraElement()({
          * showPopUpResult to determine whether to anchor left or right.
          */
         const effectiveHorizontalAnchor = inputs.horizontalAnchor === HorizontalAnchor.Auto ||
-            inputs.horizontalAnchor === undefined
+            inputs.horizontalAnchor == undefined
             ? state.showPopUpResult?.popRight
                 ? HorizontalAnchor.Left
                 : HorizontalAnchor.Right

package/dist/elements/vira-bold-text.element.js

@@ -12,9 +12,11 @@ export const ViraBoldText = defineViraElement()({
         'vira-bold-bold-weight': viraFontCssVars['vira-font-weight-bold'].value,
     },
     hostClasses: {
-        'vira-bold-bold': ({ inputs }) => inputs.bold,
+        'vira-bold-bold'({ inputs }) {
+            return inputs.bold;
+        },
     },
-    styles: ({ hostClasses, cssVars }) => {
+    styles({ hostClasses, cssVars }) {
         return css `
             span {
                 text-decoration: inherit;

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

@@ -41,11 +41,4 @@ export declare const ViraButton: import("element-vir").DeclarativeElementDefinit
      * @default false
      */
     showIconOnRight: boolean;
-    /**
-     * Set to `true` to append a downwards chevron after the button's text.
-     *
-     * @deprecated Set `icon` to `ChevronDown16Icon` and `showIconOnRight` to `true` instead.
-     * @default false
-     */
-    showMenuCaret: boolean;
-}>, {}, {}, "vira-button-with-menu-caret" | "vira-button-size-large" | "vira-button-size-medium" | "vira-button-size-small" | "vira-button-emphasis-standard" | "vira-button-emphasis-subtle" | "vira-button-color-red" | "vira-button-color-yellow" | "vira-button-color-green" | "vira-button-color-blue" | "vira-button-color-brand" | "vira-button-color-purple" | "vira-button-color-plain" | "vira-button-color-neutral" | "vira-button-color-teal" | "vira-button-color-pink" | "vira-button-color-grey" | "vira-button-disabled" | "vira-button-icon-only", "vira-button-text-color" | "vira-button-background-color" | "vira-button-border-color" | "vira-button-hover-text-color" | "vira-button-hover-background-color" | "vira-button-hover-border-color" | "vira-button-active-text-color" | "vira-button-active-background-color" | "vira-button-active-border-color" | "vira-button-disabled-text-color" | "vira-button-disabled-background-color" | "vira-button-disabled-border-color" | "vira-button-border-width" | "vira-button-border-radius", readonly [], readonly []>;
+}>, {}, {}, "vira-button-color-red" | "vira-button-color-yellow" | "vira-button-color-green" | "vira-button-color-blue" | "vira-button-color-brand" | "vira-button-color-purple" | "vira-button-color-plain" | "vira-button-color-neutral" | "vira-button-color-teal" | "vira-button-color-pink" | "vira-button-color-grey" | "vira-button-disabled" | "vira-button-icon-only" | "vira-button-size-large" | "vira-button-size-medium" | "vira-button-size-small" | "vira-button-emphasis-standard" | "vira-button-emphasis-subtle", "vira-button-text-color" | "vira-button-background-color" | "vira-button-border-color" | "vira-button-hover-text-color" | "vira-button-hover-background-color" | "vira-button-hover-border-color" | "vira-button-active-text-color" | "vira-button-active-background-color" | "vira-button-active-border-color" | "vira-button-disabled-text-color" | "vira-button-disabled-background-color" | "vira-button-disabled-border-color" | "vira-button-border-width" | "vira-button-border-radius", readonly [], readonly []>;

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

@@ -2,7 +2,6 @@ import { arrayToObject, getObjectTypedKeys } from '@augment-vir/common';
 import { ContrastLevelName } from '@electrovir/color/dist/data/contrast/contrast.js';
 import { css, html, nothing, unsafeCSS } from 'element-vir';
 import { themeDefaultKey } from 'theme-vir/dist/color-theme/color-theme.js';
-import { ChevronDown16Icon } from '../icons/index.js';
 import { createFocusStyles } from '../styles/focus.js';
 import { viraFormCssVars } from '../styles/form-styles.js';
 import { standaloneThemeColorNames, viraColorVariantToHostClassKey, viraEmphasisVariants, viraSizeHeights, viraSizeVariants, } from '../styles/form-variants.js';
@@ -121,42 +120,54 @@ const neutralButtonColors = {
 export const ViraButton = defineViraElement()({
     tagName: 'vira-button',
     hostClasses: {
-        // eslint-disable-next-line @typescript-eslint/no-deprecated
-        'vira-button-with-menu-caret': ({ inputs }) => !!inputs.showMenuCaret,
-        'vira-button-size-large': ({ inputs }) => inputs.buttonSize === ViraSize.Large,
-        'vira-button-size-medium': ({ inputs }) => {
+        'vira-button-size-large'({ inputs }) {
+            return inputs.buttonSize === ViraSize.Large;
+        },
+        'vira-button-size-medium'({ inputs }) {
             return !inputs.buttonSize || inputs.buttonSize === ViraSize.Medium;
         },
-        'vira-button-size-small': ({ inputs }) => inputs.buttonSize === ViraSize.Small,
-        'vira-button-emphasis-standard': ({ inputs }) => {
+        'vira-button-size-small'({ inputs }) {
+            return inputs.buttonSize === ViraSize.Small;
+        },
+        'vira-button-emphasis-standard'({ inputs }) {
             return !inputs.buttonEmphasis || inputs.buttonEmphasis === ViraEmphasis.Standard;
         },
-        'vira-button-emphasis-subtle': ({ inputs }) => inputs.buttonEmphasis === ViraEmphasis.Subtle,
+        'vira-button-emphasis-subtle'({ inputs }) {
+            return inputs.buttonEmphasis === ViraEmphasis.Subtle;
+        },
         ...arrayToObject(getObjectTypedKeys(viraColorVariantToHostClassKey), (colorVariant) => {
             const colorKey = viraColorVariantToHostClassKey[colorVariant];
             return {
                 key: `vira-button-color-${colorKey}`,
-                value: ({ inputs, }) => {
+                value({ inputs, }) {
                     return inputs.color === colorVariant || inputs.color === colorKey;
                 },
             };
         }, {
             useRequired: true,
         }),
-        'vira-button-color-plain': ({ inputs, }) => !inputs.color || inputs.color === ViraColorVariant.Plain,
-        'vira-button-color-neutral': ({ inputs, }) => inputs.color === ViraColorVariant.Neutral,
+        'vira-button-color-plain'({ inputs, }) {
+            return !inputs.color || inputs.color === ViraColorVariant.Plain;
+        },
+        'vira-button-color-neutral'({ inputs, }) {
+            return inputs.color === ViraColorVariant.Neutral;
+        },
         ...arrayToObject(standaloneThemeColorNames, (colorName) => {
             return {
                 key: `vira-button-color-${colorName}`,
-                value: ({ inputs, }) => {
+                value({ inputs, }) {
                     return inputs.color === colorName;
                 },
             };
         }, {
             useRequired: true,
         }),
-        'vira-button-disabled': ({ inputs }) => !!inputs.isDisabled,
-        'vira-button-icon-only': ({ inputs }) => !inputs.text && !!inputs.icon,
+        'vira-button-disabled'({ inputs }) {
+            return !!inputs.isDisabled;
+        },
+        'vira-button-icon-only'({ inputs }) {
+            return !inputs.text && !!inputs.icon;
+        },
     },
     cssVars: {
         'vira-button-text-color': 'transparent',
@@ -174,7 +185,7 @@ export const ViraButton = defineViraElement()({
         'vira-button-border-width': '1px',
         'vira-button-border-radius': viraFormCssVars['vira-form-radius'].value,
     },
-    styles: ({ hostClasses, cssVars }) => {
+    styles({ hostClasses, cssVars }) {
         function buildVariantCssRule({ variantSelector, emphasisSelector, colors, }) {
             return css `
                 ${variantSelector}${emphasisSelector} {
@@ -332,16 +343,6 @@ export const ViraButton = defineViraElement()({
                 align-items: center;
             }
 
-            .caret-icon {
-                margin-left: 8px;
-            }
-
-            ${hostClasses['vira-button-with-menu-caret'].selector} {
-                button {
-                    padding-right: 6px;
-                }
-            }
-
             ${hostClasses['vira-button-disabled'].selector} {
                 cursor: not-allowed;
 
@@ -366,7 +367,7 @@ export const ViraButton = defineViraElement()({
             }
         `;
     },
-    render: ({ inputs }) => {
+    render({ inputs }) {
         const iconTemplate = inputs.icon
             ? html `
                   <${ViraIcon.assign({
@@ -381,16 +382,6 @@ export const ViraButton = defineViraElement()({
             : html `
                   <span class="empty-text">&nbsp;</span>
               `;
-        // eslint-disable-next-line @typescript-eslint/no-deprecated
-        const caretIconTemplate = inputs.showMenuCaret
-            ? html `
-                  <${ViraIcon.assign({
-                icon: ChevronDown16Icon,
-            })}
-                      class="caret-icon"
-                  ></${ViraIcon}>
-              `
-            : nothing;
         /* Both templates are interpolated with no whitespace between them so `+` selectors match. */
         const templates = inputs.showIconOnRight
             ? [
@@ -402,7 +393,7 @@ export const ViraButton = defineViraElement()({
                 textTemplate,
             ];
         return html `
-            <button ?disabled=${inputs.isDisabled}>${templates}${caretIconTemplate}</button>
+            <button ?disabled=${inputs.isDisabled}>${templates}</button>
         `;
     },
 });

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

@@ -20,14 +20,18 @@ export var ViraCardState;
 export const ViraCard = defineViraElement()({
     tagName: 'vira-card',
     hostClasses: {
-        'vira-card-error': ({ inputs }) => inputs.cardState === ViraCardState.Error,
-        'vira-card-success': ({ inputs }) => inputs.cardState === ViraCardState.Success,
+        'vira-card-error'({ inputs }) {
+            return inputs.cardState === ViraCardState.Error;
+        },
+        'vira-card-success'({ inputs }) {
+            return inputs.cardState === ViraCardState.Success;
+        },
     },
     cssVars: {
         'vira-card-border': css `1px solid ${viraFormCssVars['vira-form-border-color'].value}`,
         'vira-card-padding': '24px',
     },
-    styles: ({ hostClasses, cssVars }) => {
+    styles({ hostClasses, cssVars }) {
         return css `
             :host {
                 display: block;

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

@@ -40,5 +40,5 @@ export type ViraCheckboxInputs = {
 export declare const ViraCheckbox: import("element-vir").DeclarativeElementDefinition<`vira-${string}`, Readonly<ViraCheckboxInputs>, {
     hasSlottedLabel: boolean;
 }, {
-    valueChange: import("element-vir").DefineEvent<boolean>;
+    valueChange: import("element-vir").DefineElementEvent<boolean>;
 }, "vira-checkbox-horizontal" | "vira-checkbox-filled-checked" | "vira-checkbox-filled-unchecked", `vira-${string}-`, readonly ["vira-checkbox-label"], readonly []>;

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

@@ -24,11 +24,17 @@ export const ViraCheckbox = defineViraElement()({
         };
     },
     hostClasses: {
-        'vira-checkbox-horizontal': ({ inputs }) => !!inputs.useHorizontalLabel,
-        'vira-checkbox-filled-checked': ({ inputs }) => !!inputs.fillWhenChecked,
-        'vira-checkbox-filled-unchecked': ({ inputs }) => !!inputs.fillWhenUnchecked,
+        'vira-checkbox-horizontal'({ inputs }) {
+            return !!inputs.useHorizontalLabel;
+        },
+        'vira-checkbox-filled-checked'({ inputs }) {
+            return !!inputs.fillWhenChecked;
+        },
+        'vira-checkbox-filled-unchecked'({ inputs }) {
+            return !!inputs.fillWhenUnchecked;
+        },
     },
-    styles: ({ hostClasses }) => {
+    styles({ hostClasses }) {
         return css `
             :host {
                 display: inline-flex;
@@ -156,7 +162,9 @@ export const ViraCheckbox = defineViraElement()({
     render({ inputs, dispatch, events, slotNames, state, updateState }) {
         function updateValue() {
             if (!inputs.isDisabled) {
-                dispatch(new events.valueChange(!inputs.value));
+                dispatch(new events.valueChange({
+                    detail: !inputs.value,
+                }));
             }
         }
         const hasLabel = !!inputs.label || state.hasSlottedLabel;

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

@@ -32,5 +32,5 @@ export declare const ViraCollapsibleCard: import("element-vir").DeclarativeEleme
 }>, {
     isExpanded: boolean;
 }, {
-    expandToggle: import("element-vir").DefineEvent<boolean>;
+    expandToggle: import("element-vir").DefineElementEvent<boolean>;
 }, "vira-collapsible-card-expanded" | "vira-collapsible-card-expansion-blocked" | "vira-collapsible-card-card-styles", "vira-collapsible-card-content-gap", readonly ["vira-collapsible-card-header"], readonly ["openCaret"]>;

package/dist/elements/vira-collapsible-card.element.js

@@ -23,14 +23,20 @@ export const ViraCollapsibleCard = defineViraElement()({
         };
     },
     hostClasses: {
-        'vira-collapsible-card-expanded': ({ state }) => state.isExpanded,
-        'vira-collapsible-card-expansion-blocked': ({ inputs }) => !!inputs.blockExpansion,
-        'vira-collapsible-card-card-styles': ({ inputs }) => !inputs.rawCollapsible,
+        'vira-collapsible-card-expanded'({ state }) {
+            return state.isExpanded;
+        },
+        'vira-collapsible-card-expansion-blocked'({ inputs }) {
+            return !!inputs.blockExpansion;
+        },
+        'vira-collapsible-card-card-styles'({ inputs }) {
+            return !inputs.rawCollapsible;
+        },
     },
     cssVars: {
         'vira-collapsible-card-content-gap': '16px',
     },
-    styles: ({ hostClasses, cssVars }) => {
+    styles({ hostClasses, cssVars }) {
         return css `
             :host {
                 display: inline-flex;
@@ -160,7 +166,9 @@ export const ViraCollapsibleCard = defineViraElement()({
             updateState({
                 isExpanded: event.detail,
             });
-            dispatch(new events.expandToggle(event.detail));
+            dispatch(new events.expandToggle({
+                detail: event.detail,
+            }));
         })}
             >
                 <div

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

@@ -26,5 +26,5 @@ export declare const ViraCollapsibleWrapper: import("element-vir").DeclarativeEl
     isContentHidden: boolean;
     collapsingElement: HTMLDivElement | undefined;
 }, {
-    expandChange: import("element-vir").DefineEvent<boolean>;
+    expandChange: import("element-vir").DefineElementEvent<boolean>;
 }, "vira-collapsible-wrapper-expand-on-print", `vira-${string}-`, readonly ["vira-collapsible-wrapper-header"], readonly []>;

package/dist/elements/vira-collapsible-wrapper.element.js

@@ -31,10 +31,12 @@ export const ViraCollapsibleWrapper = defineViraElement()({
         };
     },
     hostClasses: {
-        'vira-collapsible-wrapper-expand-on-print': ({ inputs }) => !!inputs.expandOnPrint,
+        'vira-collapsible-wrapper-expand-on-print'({ inputs }) {
+            return !!inputs.expandOnPrint;
+        },
     },
     slotNames: ['vira-collapsible-wrapper-header'],
-    styles: ({ hostClasses }) => {
+    styles({ hostClasses }) {
         return css `
             :host {
                 display: flex;
@@ -156,7 +158,9 @@ export const ViraCollapsibleWrapper = defineViraElement()({
             <button
                 class="header-wrapper"
                 ${listen('click', () => {
-            dispatch(new events.expandChange(!inputs.expanded));
+            dispatch(new events.expandChange({
+                detail: !inputs.expanded,
+            }));
         })}
             >
                 <slot name=${slotNames['vira-collapsible-wrapper-header']}>Header</slot>

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

@@ -34,7 +34,7 @@ export declare const ViraDateInput: import("element-vir").DeclarativeElementDefi
     randomId: string;
 }, {
     /** Fires whenever the user selects or clears a date. */
-    valueChange: import("element-vir").DefineEvent<{
+    valueChange: import("element-vir").DefineElementEvent<{
         hour: import("date-vir").Hour;
         minute: import("date-vir").Minute;
         millisecond: number;

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

@@ -27,10 +27,14 @@ export const ViraDateInput = defineViraElement()({
         };
     },
     hostClasses: {
-        'vira-date-input-error': ({ inputs }) => !!inputs.hasError,
-        'vira-date-input-disabled': ({ inputs }) => !!inputs.isDisabled,
+        'vira-date-input-error'({ inputs }) {
+            return !!inputs.hasError;
+        },
+        'vira-date-input-disabled'({ inputs }) {
+            return !!inputs.isDisabled;
+        },
     },
-    styles: ({ hostClasses }) => {
+    styles({ hostClasses }) {
         return css `
             :host {
                 display: inline-block;
@@ -117,7 +121,9 @@ export const ViraDateInput = defineViraElement()({
                 .value=${inputValue}
                 ${listen('input', (event) => {
             const element = extractEventTarget(event, HTMLInputElement);
-            dispatch(new events.valueChange(parseInputElementValue(element, inputs.timezone || userTimezone)));
+            dispatch(new events.valueChange({
+                detail: parseInputElementValue(element, inputs.timezone || userTimezone),
+            }));
         })}
             />
         `;

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

@@ -20,5 +20,5 @@ export declare const ViraDrawer: import("element-vir").DeclarativeElementDefinit
     dragStartY: number;
     dragCurrentY: number;
 }, {
-    drawerClose: import("element-vir").DefineEvent<void>;
+    drawerClose: import("element-vir").DefineElementEvent<void>;
 }, "vira-drawer-dragging" | "vira-drawer-no-content-padding", "vira-drawer-backdrop-filter" | "vira-drawer-max-height", readonly ["vira-drawer-drawer-title"], readonly []>;

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

@@ -46,15 +46,19 @@ export const ViraDrawer = defineViraElement()({
         state.cleanupListeners?.();
     },
     hostClasses: {
-        'vira-drawer-dragging': ({ state }) => state.isDragging,
-        'vira-drawer-no-content-padding': ({ inputs }) => !!inputs.noContentPadding,
+        'vira-drawer-dragging'({ state }) {
+            return state.isDragging;
+        },
+        'vira-drawer-no-content-padding'({ inputs }) {
+            return !!inputs.noContentPadding;
+        },
     },
     slotNames: ['vira-drawer-drawer-title'],
     cssVars: {
         'vira-drawer-backdrop-filter': 'blur(3px)',
         'vira-drawer-max-height': '80dvh',
     },
-    styles: ({ cssVars, hostClasses }) => {
+    styles({ cssVars, hostClasses }) {
         return css `
             :host {
                 display: contents;
@@ -187,11 +191,13 @@ export const ViraDrawer = defineViraElement()({
             if (inputs.open) {
                 const removers = globalEventsToCloseDrawerOn.map((eventName) => {
                     return listenToGlobal(eventName, () => {
-                        dispatch(new events.drawerClose());
+                        dispatch(new events.drawerClose({
+                            detail: undefined,
+                        }));
                     });
                 });
                 updateState({
-                    cleanupListeners: () => {
+                    cleanupListeners() {
                         removers.forEach((remover) => remover());
                     },
                 });
@@ -200,7 +206,9 @@ export const ViraDrawer = defineViraElement()({
         function close() {
             if (inputs.open) {
                 state.cleanupListeners?.();
-                dispatch(new events.drawerClose());
+                dispatch(new events.drawerClose({
+                    detail: undefined,
+                }));
             }
         }
         if (state.dialogElement) {

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

@@ -37,13 +37,7 @@ export declare const ViraDropdown: import("element-vir").DeclarativeElementDefin
      */
     randomId: string;
 }, {
-    /**
-     * @deprecated Use `selectedValuesChange` instead. `selectedChange` is broken for
-     *   multi-select (it doesn't emit all the currently selected values) but is temporarily
-     *   left for backwards compatibility purposes. It will be removed entirely soon.
-     */
-    selectedChange: import("element-vir").DefineEvent<string[]>;
     /** Emits all currently selected values. */
-    selectedValuesChange: import("element-vir").DefineEvent<string[]>;
-    openChange: import("element-vir").DefineEvent<ShowPopUpResult | undefined>;
+    selectedValuesChange: import("element-vir").DefineElementEvent<string[]>;
+    openChange: import("element-vir").DefineElementEvent<ShowPopUpResult | undefined>;
 }, "vira-dropdown-", "vira-dropdown-", readonly [], readonly ["leadingIcon", "prefixText", "trigger"]>;