vira 31.7.2 → 31.7.4

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

@@ -86,6 +86,8 @@ export const ViraMenuItem = defineViraElement()({
         }
 
         .slot-wrapper {
+            display: flex;
+            flex-grow: 1;
             overflow: hidden;
             text-overflow: ellipsis;
             white-space: nowrap;
@@ -118,7 +120,17 @@ export const ViraMenuItem = defineViraElement()({
                     event.preventDefault();
                     event.stopPropagation();
                     propagating[event.type] = true;
-                    element.dispatchEvent(new MouseEvent(event.type, event));
+                    if (event.type === 'click') {
+                        /**
+                         * Use `.click()` instead of dispatching a synthetic MouseEvent so that
+                         * the resulting event is trusted and carries user activation. This is
+                         * required for APIs like `showPicker()` on `<select>` elements.
+                         */
+                        element.click();
+                    }
+                    else {
+                        element.dispatchEvent(new MouseEvent(event.type, event));
+                    }
                     delete propagating[event.type];
                 }
             });

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

@@ -194,9 +194,25 @@ export const ViraSelect = defineViraElement()({
     `,
     init({ state, updateState, host }) {
         state.cleanupListeners?.();
+        function getSelectElement() {
+            return assertWrap.instanceOf(host.shadowRoot.querySelector('select'), HTMLSelectElement);
+        }
         const listenerRemovers = [
             listenTo(host, 'mousedown', (event) => {
-                const selectElement = assertWrap.instanceOf(host.shadowRoot.querySelector('select'), HTMLSelectElement);
+                const selectElement = getSelectElement();
+                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();
+                }
+            }),
+            listenTo(host, 'click', (event) => {
+                const selectElement = getSelectElement();
                 if (event.composedPath().includes(selectElement)) {
                     return;
                 }

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

@@ -80,4 +80,7 @@ export declare const ViraTabs: import("element-vir").DeclarativeElementDefinitio
     isOverflowing: boolean;
     /** A callback to remove all internal observers. */
     cleanupObserver: undefined | (() => void);
-}, {}, "vira-tabs-bar-top" | "vira-tabs-bar-bottom" | "vira-tabs-bar-left" | "vira-tabs-bar-right" | "vira-tabs-color-accent" | "vira-tabs-color-plain" | "vira-tabs-icon-layout-vertical" | "vira-tabs-icon-layout-horizontal" | "vira-tabs-overflowing", "vira-tabs-active-color" | "vira-tabs-active-hover-color" | "vira-tabs-inactive-color" | "vira-tabs-inactive-hover-color" | "vira-tabs-bar-thickness", readonly [], readonly []>;
+}, {
+    /** 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-accent" | "vira-tabs-color-plain" | "vira-tabs-icon-layout-vertical" | "vira-tabs-icon-layout-horizontal" | "vira-tabs-overflowing", "vira-tabs-active-color" | "vira-tabs-active-hover-color" | "vira-tabs-inactive-color" | "vira-tabs-inactive-hover-color" | "vira-tabs-bar-thickness", readonly [], readonly []>;

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

@@ -1,6 +1,6 @@
 import { check } from '@augment-vir/assert';
 import { filterMap } from '@augment-vir/common';
-import { classMap, css, html, nothing, onDomCreated } from 'element-vir';
+import { classMap, css, defineElementEvent, html, listen, nothing, onDomCreated } from 'element-vir';
 import { routeHasPaths, } from 'spa-router-vir';
 import { createFocusStyles } from '../styles/focus.js';
 import { viraFormCssVars } from '../styles/form-styles.js';
@@ -45,6 +45,10 @@ export var ViraTabsIconLayout;
  */
 export const ViraTabs = defineViraElement()({
     tagName: 'vira-tabs',
+    events: {
+        /** Fires when a tab is clicked with the corresponding tab entry. */
+        tabSelect: defineElementEvent(),
+    },
     state() {
         return {
             isOverflowing: false,
@@ -254,7 +258,7 @@ export const ViraTabs = defineViraElement()({
     cleanup({ state }) {
         state.cleanupObserver?.();
     },
-    render({ inputs, state, updateState, host }) {
+    render({ inputs, state, updateState, host, dispatch, events }) {
         const tabs = filterMap(inputs.tabs, (tab) => {
             if (tab.isHidden) {
                 return undefined;
@@ -275,6 +279,11 @@ export const ViraTabs = defineViraElement()({
                 disabled: !!tab.isDisabled,
             })}
                         role="presentation"
+                        ${listen('click', () => {
+                if (!tab.isDisabled) {
+                    dispatch(new events.tabSelect(tab));
+                }
+            })}
                     >
                         <${ViraLink.assign({
                 route: {
@@ -325,6 +334,11 @@ export const ViraTabs = defineViraElement()({
                         `,
                 selected: isSelected,
                 disabled: tab.isDisabled,
+                onClick() {
+                    if (!tab.isDisabled) {
+                        dispatch(new events.tabSelect(tab));
+                    }
+                },
             };
         }, check.isTruthy));
         return html `

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

@@ -339,6 +339,11 @@ export const ViraTag = defineViraElement()({
                 display: flex;
             }
 
+            ${hostClasses['vira-tag-size-small'].selector} button {
+                padding: 0 var(${cssVars['vira-tag-horizontal-padding'].name}, 8px);
+                gap: 4px;
+            }
+
             ${hostClasses['vira-tag-size-large'].selector} button {
                 padding: 0 var(${cssVars['vira-tag-horizontal-padding'].name}, 16px);
             }

package/package.json

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