vira 31.31.7 → 32.0.0

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

@@ -110,12 +110,6 @@ export const ViraDropdown = defineViraElement()({
         }
     `,
     events: {
-        /**
-         * @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: defineElementEvent(),
         /** Emits all currently selected values. */
         selectedValuesChange: defineElementEvent(),
         openChange: defineElementEvent(),
@@ -175,9 +169,9 @@ export const ViraDropdown = defineViraElement()({
                                 option.value,
                             ]
                         : [option.value];
-                    // eslint-disable-next-line @typescript-eslint/no-deprecated
-                    dispatch(new events.selectedChange([option.value]));
-                    dispatch(new events.selectedValuesChange(newSelectedValues));
+                    dispatch(new events.selectedValuesChange({
+                        detail: newSelectedValues,
+                    }));
                 },
                 disabled: option.disabled,
                 selected: selectedOptions.includes(option),
@@ -198,7 +192,9 @@ export const ViraDropdown = 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/vira-error.element.js

@@ -13,7 +13,7 @@ export const ViraError = defineViraElement()({
     cssVars: {
         'vira-error-font-weight': viraFontCssVars['vira-font-weight-bold'].value,
     },
-    styles: ({ cssVars }) => {
+    styles({ cssVars }) {
         return css `
             :host {
                 color: ${viraFormCssVars['vira-form-error-color'].value};

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

@@ -47,10 +47,10 @@ export declare const ViraForm: import("element-vir").DeclarativeElementDefinitio
 }>, {
     lastIsValid: boolean;
 }, {
-    valueChange: import("element-vir").DefineEvent<{
+    valueChange: import("element-vir").DefineElementEvent<{
         key: string;
     } & ViraFormField>;
-    validChange: import("element-vir").DefineEvent<{
+    validChange: import("element-vir").DefineElementEvent<{
         allFieldsAreValid: boolean;
     }>;
 }, "vira-form-", "vira-form-", readonly [], readonly []>;

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

@@ -86,7 +86,9 @@ export const ViraForm = defineViraElement()({
                 lastIsValid: currentIsValid,
             });
             dispatch(new events.validChange({
-                allFieldsAreValid: currentIsValid,
+                detail: {
+                    allFieldsAreValid: currentIsValid,
+                },
             }));
         }
         function wrapFormField({ fieldTemplate, label, }) {
@@ -128,9 +130,11 @@ export const ViraForm = defineViraElement()({
                                 ${field.testId ? testId(field.testId) : nothing}
                                 ${listen(ViraCheckbox.events.valueChange, (event) => {
                         dispatch(new events.valueChange({
-                            key,
-                            ...field,
-                            value: event.detail,
+                            detail: {
+                                key,
+                                ...field,
+                                value: event.detail,
+                            },
                         }));
                     })}
                             >
@@ -178,9 +182,11 @@ export const ViraForm = defineViraElement()({
                                 ${field.testId ? testId(field.testId) : nothing}
                                 ${listen(ViraSelect.events.valueChange, (event) => {
                         dispatch(new events.valueChange({
-                            key,
-                            ...field,
-                            value: event.detail,
+                            detail: {
+                                key,
+                                ...field,
+                                value: event.detail,
+                            },
                         }));
                     })}
                             ></${ViraSelect}>
@@ -205,9 +211,11 @@ export const ViraForm = defineViraElement()({
                                 ${field.testId ? testId(field.testId) : nothing}
                                 ${listen(ViraTextArea.events.valueChange, (event) => {
                         dispatch(new events.valueChange({
-                            key,
-                            ...field,
-                            value: event.detail,
+                            detail: {
+                                key,
+                                ...field,
+                                value: event.detail,
+                            },
                         }));
                     })}
                             ></${ViraTextArea}>
@@ -231,17 +239,17 @@ export const ViraForm = defineViraElement()({
                         type: ViraInputType.Number,
                         attributePassthrough: {
                             ...horizontalLabelAttributes,
-                            ...(field.min === undefined
+                            ...(field.min == undefined
                                 ? {}
                                 : {
                                     min: String(field.min),
                                 }),
-                            ...(field.max === undefined
+                            ...(field.max == undefined
                                 ? {}
                                 : {
                                     max: String(field.max),
                                 }),
-                            ...(field.step === undefined
+                            ...(field.step == undefined
                                 ? {}
                                 : {
                                     step: String(field.step),
@@ -252,9 +260,11 @@ export const ViraForm = defineViraElement()({
                                 ${listen(ViraInput.events.valueChange, (event) => {
                         const numericValue = event.detail === '' ? undefined : Number(event.detail);
                         dispatch(new events.valueChange({
-                            key,
-                            ...field,
-                            value: numericValue,
+                            detail: {
+                                key,
+                                ...field,
+                                value: numericValue,
+                            },
                         }));
                     })}
                             ></${ViraInput}>
@@ -280,9 +290,11 @@ export const ViraForm = defineViraElement()({
                                 ${field.testId ? testId(field.testId) : nothing}
                                 ${listen(ViraDateInput.events.valueChange, (event) => {
                         dispatch(new events.valueChange({
-                            key,
-                            ...field,
-                            value: event.detail,
+                            detail: {
+                                key,
+                                ...field,
+                                value: event.detail,
+                            },
                         }));
                     })}
                             ></${ViraDateInput}>
@@ -335,9 +347,11 @@ export const ViraForm = defineViraElement()({
                                 ${field.testId ? testId(field.testId) : nothing}
                                 ${listen(ViraInput.events.valueChange, (event) => {
                         dispatch(new events.valueChange({
-                            key,
-                            ...field,
-                            value: event.detail,
+                            detail: {
+                                key,
+                                ...field,
+                                value: event.detail,
+                            },
                         }));
                     })}
                             ></${ViraInput}>

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

@@ -12,9 +12,11 @@ export const ViraIcon = defineViraElement()({
     tagName: 'vira-icon',
     hostClasses: {
         /** Ignores the given icon's embedded size and causes the <svg> element to fill its parent. */
-        'vira-icon-fit-container': ({ inputs }) => !!inputs.fitContainer || !!inputs.icon?.size,
+        'vira-icon-fit-container'({ inputs }) {
+            return !!inputs.fitContainer || !!inputs.icon?.size;
+        },
     },
-    styles: ({ hostClasses }) => {
+    styles({ hostClasses }) {
         return css `
             :host {
                 display: inline-flex;

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

@@ -40,6 +40,6 @@ export declare const ViraImage: import("element-vir").DeclarativeElementDefiniti
         [url: string]: true;
     }>;
 }, {
-    imageLoad: import("element-vir").DefineEvent<void>;
-    imageError: import("element-vir").DefineEvent<unknown>;
+    imageLoad: import("element-vir").DefineElementEvent<void>;
+    imageError: import("element-vir").DefineElementEvent<unknown>;
 }, "vira-image-height-constrained", `vira-${string}-`, readonly ["vira-image-loading", "vira-image-error"], readonly []>;

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

@@ -31,7 +31,9 @@ export const ViraImage = defineViraElement()({
         };
     },
     hostClasses: {
-        'vira-image-height-constrained': ({ inputs }) => inputs.dominantDimension === 'height',
+        'vira-image-height-constrained'({ inputs }) {
+            return inputs.dominantDimension === 'height';
+        },
     },
     slotNames: [
         'vira-image-loading',
@@ -41,7 +43,7 @@ export const ViraImage = defineViraElement()({
         imageLoad: defineElementEvent(),
         imageError: defineElementEvent(),
     },
-    styles: ({ hostClasses }) => {
+    styles({ hostClasses }) {
         return css `
             :host {
                 display: inline-flex;
@@ -131,7 +133,9 @@ export const ViraImage = defineViraElement()({
                     [imageUrl]: true,
                 },
             });
-            dispatch(new events.imageLoad());
+            dispatch(new events.imageLoad({
+                detail: undefined,
+            }));
         })}
                 ${listen('error', async (event) => {
             if (inputs._debugLoadDelay) {

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

@@ -54,11 +54,11 @@ export declare const ViraInput: import("element-vir").DeclarativeElementDefiniti
      * Fires whenever a user input created a new value. Does not fire if all input letters are
      * filtered out due to input restrictions.
      */
-    valueChange: import("element-vir").DefineEvent<string>;
+    valueChange: import("element-vir").DefineElementEvent<string>;
     /**
      * Fires when inputs are blocked. Useful for showing warnings or error messages to inform
      * the user why their input did not propagate if it was blocked. This does not fire for text
      * that was blocked out of programmatic "value" property assignments.
      */
-    inputBlocked: import("element-vir").DefineEvent<string>;
+    inputBlocked: import("element-vir").DefineElementEvent<string>;
 }, "vira-input-disabled" | "vira-input-fit-text" | "vira-input-clear-button-shown" | "vira-input-error", "vira-input-padding-horizontal" | "vira-input-padding-vertical", readonly [], readonly []>;

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

@@ -40,7 +40,7 @@ export const ViraInput = defineViraElement()({
         'vira-input-padding-horizontal': '12px',
         'vira-input-padding-vertical': '4px',
     },
-    styles: ({ hostClasses, cssVars }) => {
+    styles({ hostClasses, cssVars }) {
         return css `
             :host {
                 position: relative;
@@ -289,12 +289,20 @@ export const ViraInput = defineViraElement()({
         };
     },
     hostClasses: {
-        'vira-input-disabled': ({ inputs }) => !!inputs.disabled,
-        'vira-input-fit-text': ({ inputs }) => !!inputs.fitText,
-        'vira-input-clear-button-shown': ({ inputs }) => !!inputs.showClearButton,
-        'vira-input-error': ({ inputs }) => !!inputs.hasError,
+        'vira-input-disabled'({ inputs }) {
+            return !!inputs.disabled;
+        },
+        'vira-input-fit-text'({ inputs }) {
+            return !!inputs.fitText;
+        },
+        'vira-input-clear-button-shown'({ inputs }) {
+            return !!inputs.showClearButton;
+        },
+        'vira-input-error'({ inputs }) {
+            return !!inputs.hasError;
+        },
     },
-    render: ({ inputs, dispatch, state, updateState, events, host }) => {
+    render({ inputs, dispatch, state, updateState, events, host }) {
         const { filtered: filteredValue } = filterTextInputValue({
             value: inputs.value,
             allowed: inputs.allowedInputs,
@@ -380,10 +388,14 @@ export const ViraInput = defineViraElement()({
                 previousValue: filteredValue,
                 event,
                 inputBlockedCallback(blockedInput) {
-                    dispatch(new events.inputBlocked(blockedInput));
+                    dispatch(new events.inputBlocked({
+                        detail: blockedInput,
+                    }));
                 },
                 newValueCallback(newValue) {
-                    dispatch(new events.valueChange(newValue));
+                    dispatch(new events.valueChange({
+                        detail: newValue,
+                    }));
                 },
             });
         })}
@@ -403,7 +415,9 @@ export const ViraInput = defineViraElement()({
             if (inputs.disabled) {
                 return;
             }
-            dispatch(new events.valueChange(''));
+            dispatch(new events.valueChange({
+                detail: '',
+            }));
         })}
                         >
                             <${ViraIcon.assign({

package/dist/elements/vira-json-form.element.d.ts

@@ -31,5 +31,5 @@ export declare const ViraJsonForm: import("element-vir").DeclarativeElementDefin
     rawDraft: string | undefined;
     rawError: string | undefined;
 }, {
-    valueChange: import("element-vir").DefineEvent<JsonValue>;
+    valueChange: import("element-vir").DefineElementEvent<JsonValue>;
 }, "vira-json-form-", "vira-json-form-", readonly [], readonly []>;

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

@@ -208,7 +208,9 @@ export const ViraJsonForm = defineViraElement()({
             return entry == undefined ? 'null' : String(entry);
         }
         function emitRoot(newRoot) {
-            dispatch(new events.valueChange(newRoot));
+            dispatch(new events.valueChange({
+                detail: newRoot,
+            }));
         }
         function emitReplaceAt(path, newValue) {
             emitRoot(setValueAtPath({
@@ -448,7 +450,9 @@ export const ViraJsonForm = defineViraElement()({
                 return renderPlusButton({
                     isAddDisabled,
                     tooltip: isAddDisabled ? disabledReason : `Add ${viraJsonTypeLabels[onlyType]}`,
-                    onClick: () => onAdd(onlyType),
+                    onClick() {
+                        return onAdd(onlyType);
+                    },
                 });
             }
             const selectedType = getPendingType(pathKey, allowedTypes);
@@ -472,7 +476,9 @@ export const ViraJsonForm = defineViraElement()({
                 tooltip: isAddDisabled
                     ? disabledReason
                     : `Add ${viraJsonTypeLabels[selectedType]}`,
-                onClick: () => onAdd(selectedType),
+                onClick() {
+                    return onAdd(selectedType);
+                },
             })}
             `;
         }
@@ -490,7 +496,9 @@ export const ViraJsonForm = defineViraElement()({
                     return renderPlusButton({
                         isAddDisabled: false,
                         tooltip: `Add ${viraJsonTypeLabels[onlyType]}`,
-                        onClick: () => onAdd(createDefaultForJsonType(onlyType)),
+                        onClick() {
+                            return onAdd(createDefaultForJsonType(onlyType));
+                        },
                     });
                 }
                 const fallback = createDefaultForJsonType(onlyType);
@@ -503,7 +511,7 @@ export const ViraJsonForm = defineViraElement()({
                     ${renderPlusButton({
                     isAddDisabled: false,
                     tooltip: `Add ${viraJsonTypeLabels[onlyType]}`,
-                    onClick: () => {
+                    onClick() {
                         onAdd(pendingValue);
                         clearPending(pathKey);
                     },
@@ -530,7 +538,9 @@ export const ViraJsonForm = defineViraElement()({
                     ${renderPlusButton({
                     isAddDisabled: false,
                     tooltip: `Add ${viraJsonTypeLabels[selectedType]}`,
-                    onClick: () => onAdd(createDefaultForJsonType(selectedType)),
+                    onClick() {
+                        return onAdd(createDefaultForJsonType(selectedType));
+                    },
                 })}
                 `;
             }
@@ -651,7 +661,7 @@ export const ViraJsonForm = defineViraElement()({
                     allowedTypes: additionalAllowedTypes,
                     canAdd: canAddArbitraryField,
                     disabledReason: arbitraryAddDisabledReason,
-                    onAdd: (type) => {
+                    onAdd(type) {
                         if (!canAddArbitraryField) {
                             return;
                         }
@@ -751,7 +761,7 @@ export const ViraJsonForm = defineViraElement()({
                                   ${renderArrayAddControl({
                     pathKey,
                     allowedTypes: allowedItemTypes,
-                    onAdd: (newValue) => {
+                    onAdd(newValue) {
                         emitReplaceAt([
                             ...path,
                             value.length,

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

@@ -20,9 +20,11 @@ export const ViraLink = defineViraElement()({
         };
     },
     hostClasses: {
-        'vira-link-link-styles': ({ inputs }) => !inputs.disableLinkStyles,
+        'vira-link-link-styles'({ inputs }) {
+            return !inputs.disableLinkStyles;
+        },
     },
-    styles: ({ hostClasses }) => {
+    styles({ hostClasses }) {
         return css `
             :host {
                 display: inline;
@@ -72,7 +74,7 @@ export const ViraLink = defineViraElement()({
             }),
         ];
         updateState({
-            cleanupListeners: () => {
+            cleanupListeners() {
                 listenerRemovers.forEach((remover) => remover());
             },
         });

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

@@ -36,5 +36,5 @@ export declare const ViraModal: import("element-vir").DeclarativeElementDefiniti
     /** Remove listeners. */
     cleanupListeners: undefined | (() => void);
 }, {
-    modalClose: import("element-vir").DefineEvent<void>;
+    modalClose: import("element-vir").DefineElementEvent<void>;
 }, "vira-modal-phone-size" | "vira-modal-no-content-padding", "vira-modal-backdrop-filter" | "vira-modal-border-radius", readonly ["vira-modal-modal-title"], readonly []>;

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

@@ -40,15 +40,19 @@ export const ViraModal = defineViraElement()({
         state.cleanupListeners?.();
     },
     hostClasses: {
-        'vira-modal-phone-size': ({ inputs }) => !!inputs.isMobileSize,
-        'vira-modal-no-content-padding': ({ inputs }) => !!inputs.noContentPadding,
+        'vira-modal-phone-size'({ inputs }) {
+            return !!inputs.isMobileSize;
+        },
+        'vira-modal-no-content-padding'({ inputs }) {
+            return !!inputs.noContentPadding;
+        },
     },
     slotNames: ['vira-modal-modal-title'],
     cssVars: {
         'vira-modal-backdrop-filter': 'blur(3px)',
         'vira-modal-border-radius': '8px',
     },
-    styles: ({ hostClasses, cssVars }) => {
+    styles({ hostClasses, cssVars }) {
         return css `
             :host {
                 display: contents;
@@ -177,11 +181,13 @@ export const ViraModal = defineViraElement()({
             if (inputs.open) {
                 const removers = globalEventsToCloseModalOn.map((eventName) => {
                     return listenToGlobal(eventName, () => {
-                        dispatch(new events.modalClose());
+                        dispatch(new events.modalClose({
+                            detail: undefined,
+                        }));
                     });
                 });
                 updateState({
-                    cleanupListeners: () => {
+                    cleanupListeners() {
                         removers.forEach((remover) => remover());
                     },
                 });
@@ -190,7 +196,9 @@ export const ViraModal = defineViraElement()({
         function close() {
             if (inputs.open) {
                 state.cleanupListeners?.();
-                dispatch(new events.modalClose());
+                dispatch(new events.modalClose({
+                    detail: undefined,
+                }));
             }
         }
         return html `

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

@@ -22,7 +22,7 @@ export const ViraProgress = defineViraElement()({
         'vira-progress-border-radius': '99999999px',
         'vira-progress-height': '8px',
     },
-    styles: ({ cssVars }) => {
+    styles({ cssVars }) {
         return css `
             :host {
                 /* Default width that can easily be overridden because it's applied on the host. */

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

@@ -40,5 +40,5 @@ export declare const ViraSelect: import("element-vir").DeclarativeElementDefinit
     /** Removes event listeners registered during init. */
     cleanupListeners: undefined | (() => void);
 }, {
-    valueChange: import("element-vir").DefineEvent<string>;
+    valueChange: import("element-vir").DefineElementEvent<string>;
 }, "vira-select-disabled" | "vira-select-error" | "vira-select-has-label" | "vira-select-not-raw" | "vira-select-readonly", "vira-select-padding-horizontal" | "vira-select-padding-vertical" | "vira-select-icon-padding", readonly [], readonly []>;

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

@@ -53,13 +53,23 @@ export const ViraSelect = defineViraElement()({
         'vira-select-icon-padding': '44px',
     },
     hostClasses: {
-        'vira-select-disabled': ({ inputs }) => !!inputs.disabled,
-        'vira-select-error': ({ inputs }) => !!inputs.hasError,
-        'vira-select-has-label': ({ inputs }) => !!inputs.label,
-        'vira-select-not-raw': ({ inputs }) => !inputs.rawSelect,
-        'vira-select-readonly': ({ inputs }) => !!inputs.isReadonly,
+        'vira-select-disabled'({ inputs }) {
+            return !!inputs.disabled;
+        },
+        'vira-select-error'({ inputs }) {
+            return !!inputs.hasError;
+        },
+        'vira-select-has-label'({ inputs }) {
+            return !!inputs.label;
+        },
+        'vira-select-not-raw'({ inputs }) {
+            return !inputs.rawSelect;
+        },
+        'vira-select-readonly'({ inputs }) {
+            return !!inputs.isReadonly;
+        },
     },
-    styles: ({ hostClasses, cssVars }) => {
+    styles({ hostClasses, cssVars }) {
         return css `
             :host {
                 position: relative;
@@ -287,7 +297,7 @@ export const ViraSelect = defineViraElement()({
             }),
         ];
         updateState({
-            cleanupListeners: () => {
+            cleanupListeners() {
                 listenerRemovers.forEach((remover) => remover());
             },
         });
@@ -352,7 +362,9 @@ export const ViraSelect = defineViraElement()({
                 })
                     .findIndex((option) => option.value === value);
             }
-            dispatch(new events.valueChange(newValue));
+            dispatch(new events.valueChange({
+                detail: newValue,
+            }));
         })}
                     ${attributes(inputs.attributePassthrough?.select)}
                 >

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

@@ -120,5 +120,5 @@ export declare const ViraTabs: import("element-vir").DeclarativeElementDefinitio
     cleanupObserver: undefined | (() => void);
 }, {
     /** Fires when a tab is clicked with the corresponding tab entry. */
-    tabSelect: import("element-vir").DefineEvent<Readonly<ViraTab>>;
-}, "vira-tabs-bar-top" | "vira-tabs-bar-bottom" | "vira-tabs-bar-left" | "vira-tabs-bar-right" | "vira-tabs-color-red" | "vira-tabs-color-yellow" | "vira-tabs-color-green" | "vira-tabs-color-blue" | "vira-tabs-color-brand" | "vira-tabs-color-purple" | "vira-tabs-color-plain" | "vira-tabs-color-neutral" | "vira-tabs-color-teal" | "vira-tabs-color-pink" | "vira-tabs-color-grey" | "vira-tabs-icon-layout-vertical" | "vira-tabs-icon-layout-horizontal" | "vira-tabs-fill-width", "vira-tabs-active-color" | "vira-tabs-active-hover-color" | "vira-tabs-inactive-color" | "vira-tabs-inactive-hover-color" | "vira-tabs-bar-thickness", readonly [], readonly []>;
+    tabSelect: import("element-vir").DefineElementEvent<Readonly<ViraTab>>;
+}, "vira-tabs-color-red" | "vira-tabs-color-yellow" | "vira-tabs-color-green" | "vira-tabs-color-blue" | "vira-tabs-color-brand" | "vira-tabs-color-purple" | "vira-tabs-color-plain" | "vira-tabs-color-neutral" | "vira-tabs-color-teal" | "vira-tabs-color-pink" | "vira-tabs-color-grey" | "vira-tabs-icon-layout-vertical" | "vira-tabs-icon-layout-horizontal" | "vira-tabs-fill-width" | "vira-tabs-bar-top" | "vira-tabs-bar-bottom" | "vira-tabs-bar-left" | "vira-tabs-bar-right", "vira-tabs-active-color" | "vira-tabs-active-hover-color" | "vira-tabs-inactive-color" | "vira-tabs-inactive-hover-color" | "vira-tabs-bar-thickness", readonly [], readonly []>;