vira 31.23.0 → 31.24.1

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

@@ -37,6 +37,13 @@ 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>;
 }, "vira-dropdown-", "vira-dropdown-", readonly [], readonly ["leadingIcon", "prefixText", "trigger"]>;

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

@@ -110,7 +110,14 @@ 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(),
     },
     state() {
@@ -160,7 +167,17 @@ export const ViraDropdown = defineViraElement()({
             return {
                 content: option.label,
                 onClick() {
+                    const newSelectedValues = inputs.isMultiSelect
+                        ? selectedOptions.includes(option)
+                            ? filterMap(selectedOptions, (selectedOption) => selectedOption.value, (value, selectedOption) => selectedOption !== option)
+                            : [
+                                ...selectedOptions.map((selectedOption) => selectedOption.value),
+                                option.value,
+                            ]
+                        : [option.value];
+                    // eslint-disable-next-line @typescript-eslint/no-deprecated
                     dispatch(new events.selectedChange([option.value]));
+                    dispatch(new events.selectedValuesChange(newSelectedValues));
                 },
                 disabled: option.disabled,
                 selected: selectedOptions.includes(option),
@@ -171,6 +188,7 @@ export const ViraDropdown = defineViraElement()({
         const triggerTemplate = html `
             <${ViraPopUpTrigger.assign({
             ...inputs,
+            keepOpenAfterInteraction: inputs.isMultiSelect,
             focusOnClose: true,
             popUpOffset: {
                 vertical: -1,

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

@@ -225,7 +225,15 @@ export const ViraSelect = defineViraElement()({
                 /** `showPicker` is not in Safari. */
                 // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
                 if (selectElement.showPicker) {
-                    selectElement.showPicker();
+                    try {
+                        selectElement.showPicker();
+                    }
+                    catch {
+                        /**
+                         * Chromium throws `NotAllowedError` when `showPicker` runs without
+                         * transient user activation; the picker just won't open.
+                         */
+                    }
                 }
             }),
             listenTo(host, 'click', (event) => {
@@ -238,7 +246,15 @@ export const ViraSelect = defineViraElement()({
                 /** `showPicker` is not in Safari. */
                 // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
                 if (selectElement.showPicker) {
-                    selectElement.showPicker();
+                    try {
+                        selectElement.showPicker();
+                    }
+                    catch {
+                        /**
+                         * Chromium throws `NotAllowedError` when `showPicker` runs without
+                         * transient user activation; the picker just won't open.
+                         */
+                    }
                 }
             }),
         ];

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "vira",
-    "version": "31.23.0",
+    "version": "31.24.1",
     "description": "A simple and highly versatile design system using element-vir.",
     "keywords": [
         "design",