vira 30.1.2 → 30.1.4

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

@@ -88,33 +88,34 @@ export const ViraMenuItem = defineViraElement()({
         host.setAttribute('aria-selected', String(!!inputs.selected));
         host.setAttribute('aria-disabled', String(!!inputs.disabled));
         state.cleanup?.();
-        let propagating = false;
-        const listenerRemovers = [
-            listenTo(host, 'click', (event) => {
-                if (propagating) {
-                    return;
-                }
-                else if (inputs.disabled) {
+        const propagating = {};
+        function propagateMouseEvent(event) {
+            if (propagating[event.type]) {
+                return;
+            }
+            else if (inputs.disabled) {
+                event.preventDefault();
+                event.stopPropagation();
+                return;
+            }
+            const slotElement = assertWrap.instanceOf(host.shadowRoot.querySelector('slot'), HTMLSlotElement);
+            slotElement
+                .assignedElements({
+                flatten: true,
+            })
+                .forEach((element) => {
+                if (element instanceof HTMLElement && !event.composedPath().includes(element)) {
                     event.preventDefault();
                     event.stopPropagation();
-                    return;
+                    propagating[event.type] = true;
+                    element.dispatchEvent(new MouseEvent(event.type, event));
+                    delete propagating[event.type];
                 }
-                const slotElement = assertWrap.instanceOf(host.shadowRoot.querySelector('slot'), HTMLSlotElement);
-                slotElement
-                    .assignedElements({
-                    flatten: true,
-                })
-                    .forEach((element) => {
-                    if (element instanceof HTMLElement &&
-                        !event.composedPath().includes(element)) {
-                        event.preventDefault();
-                        event.stopPropagation();
-                        propagating = true;
-                        element.dispatchEvent(new MouseEvent(event.type, event));
-                        propagating = false;
-                    }
-                });
-            }),
+            });
+        }
+        const listenerRemovers = [
+            listenTo(host, 'click', propagateMouseEvent),
+            listenTo(host, 'mousedown', propagateMouseEvent),
             listenTo(host, 'mouseenter', () => {
                 if (!inputs.disabled) {
                     host.focus();

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

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

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

@@ -1,6 +1,8 @@
+import { assertWrap } from '@augment-vir/assert';
 import { randomString } from '@augment-vir/common';
 import { extractEventTarget } from '@augment-vir/web';
 import { attributes, classMap, css, defineElementEvent, html, ifDefined, listen, nothing, } from 'element-vir';
+import { listenTo } from 'typed-event-target';
 import { ChevronUp24Icon } from '../icons/index.js';
 import { viraDisabledStyles } from '../styles/disabled.js';
 import { createFocusStyles } from '../styles/focus.js';
@@ -25,6 +27,8 @@ export const ViraSelect = defineViraElement()({
              * provided.
              */
             randomId: randomString(32),
+            /** Removes event listeners registered during init. */
+            cleanup: undefined,
         };
     },
     events: {
@@ -72,7 +76,7 @@ export const ViraSelect = defineViraElement()({
                 cursor: pointer;
                 /* Prevent the left pixel of text getting cut off. */
                 padding-left: 0.5px;
-                padding-right: 26px;
+                padding-right: 28px;
                 overflow: hidden;
                 text-overflow: ellipsis;
 
@@ -182,6 +186,35 @@ export const ViraSelect = defineViraElement()({
             border-color: ${viraFormCssVars['vira-form-error-color'].value};
         }
     `,
+    init({ state, updateState, host }) {
+        state.cleanup?.();
+        const listenerRemovers = [
+            listenTo(host, 'mousedown', (event) => {
+                const selectElement = assertWrap.instanceOf(host.shadowRoot.querySelector('select'), HTMLSelectElement);
+                if (event.composedPath().includes(selectElement)) {
+                    return;
+                }
+                event.preventDefault();
+                event.stopPropagation();
+                /** `showPicker` is not in Safari. */
+                // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+                if (selectElement.showPicker) {
+                    selectElement.showPicker();
+                }
+            }),
+        ];
+        updateState({
+            cleanup: () => {
+                listenerRemovers.forEach((remover) => remover());
+            },
+        });
+    },
+    cleanup({ state, updateState }) {
+        state.cleanup?.();
+        updateState({
+            cleanup: undefined,
+        });
+    },
     render({ inputs, state, dispatch, events }) {
         const value = inputs.value || undefined;
         const placeholderOptionTemplate = inputs.placeholder || value == undefined

package/package.json

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