vira 31.16.0 → 31.16.1

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

@@ -3,7 +3,6 @@ import { type FullSpaRoute, type GenericTreePaths, type SpaRouter } from 'spa-ro
 import { type ViraIconSvg } from '../icons/icon-svg.js';
 import { ViraColorVariant } from '../styles/form-variants.js';
 import { ViraThemeColorName } from '../styles/vira-color-theme-object.js';
-import { type HorizontalAnchor, type PopUpOffset } from './pop-up/vira-pop-up-trigger.element.js';
 /**
  * Controls which edge of the tab the selection indicator bar appears on.
  *
@@ -46,7 +45,7 @@ export type ViraTab = {
  */
 export declare const ViraTabs: import("element-vir").DeclarativeElementDefinition<"vira-tabs", {
     tabs: ReadonlyArray<Readonly<ViraTab>>;
-    router: Pick<SpaRouter<any, any, any>, "createRouteUrl" | "setRouteOnDirectNavigation">;
+    router: Pick<SpaRouter<any, any, any>, "createRouteUrl" | "setRouteOnDirectNavigation" | "setRoute">;
     currentRoute: Readonly<FullSpaRoute>;
 } & PartialWithUndefined<{
     /**
@@ -69,22 +68,18 @@ export declare const ViraTabs: import("element-vir").DeclarativeElementDefinitio
      * @default ViraTabsIconLayout.Vertical
      */
     iconLayout: ViraTabsIconLayout;
-    /**
-     * Horizontal anchor for the dropdown menu. Only used when tabs overflow into a dropdown.
-     *
-     * @default HorizontalAnchor.Left
-     */
-    menuHorizontalAnchor: HorizontalAnchor;
-    /** Whether the dropdown trigger is disabled. Only used when tabs overflow into a dropdown. */
-    menuIsDisabled: boolean;
-    /** Offset for the dropdown pop-up. Only used when tabs overflow into a dropdown. */
-    menuPopUpOffset: Readonly<PopUpOffset>;
     /** When true, tabs and their container expand to fill all available horizontal space. */
     shouldFillWidth: boolean;
 }>, {
     isOverflowing: boolean;
     /** A callback to remove all internal observers. */
     cleanupObserver: undefined | (() => void);
+    /**
+     * Captured at the moment the overflow select is opened (mousedown or keydown on the
+     * select). Once the native picker opens, the OS owns keyboard input, so modifier state
+     * must be captured before that.
+     */
+    modifierKeyHeld: boolean;
 }, {
     /** Fires when a tab is clicked with the corresponding tab entry. */
     tabSelect: import("element-vir").DefineEvent<Readonly<ViraTab>>;

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

@@ -10,12 +10,9 @@ import { noNativeFormStyles, noUserSelect, viraDisabledStyles, viraTheme } from
 import { viraThemeByKeys, ViraThemeColorName } from '../styles/vira-color-theme-object.js';
 import { defineViraElement } from '../util/define-vira-element.js';
 import { createOverflowObserver } from '../util/overflow-observer.js';
-import { renderMenuItemEntries } from '../util/pop-up-helpers.js';
-import { ViraMenuTrigger } from './pop-up/vira-menu-trigger.element.js';
-import { ViraMenuCornerStyle } from './pop-up/vira-menu.element.js';
-import { ViraButton } from './vira-button.element.js';
 import { ViraIcon } from './vira-icon.element.js';
 import { ViraLink } from './vira-link.element.js';
+import { ViraSelect } from './vira-select.element.js';
 /**
  * Controls which edge of the tab the selection indicator bar appears on.
  *
@@ -56,6 +53,12 @@ export const ViraTabs = defineViraElement()({
             isOverflowing: false,
             /** A callback to remove all internal observers. */
             cleanupObserver: undefined,
+            /**
+             * Captured at the moment the overflow select is opened (mousedown or keydown on the
+             * select). Once the native picker opens, the OS owns keyboard input, so modifier state
+             * must be captured before that.
+             */
+            modifierKeyHeld: false,
         };
     },
     hostClasses: {
@@ -142,6 +145,7 @@ export const ViraTabs = defineViraElement()({
         return css `
             :host {
                 display: flex;
+                position: relative;
                 box-sizing: border-box;
                 ${noUserSelect};
                 width: 100%;
@@ -292,18 +296,19 @@ export const ViraTabs = defineViraElement()({
 
             ${hostClasses['vira-tabs-overflowing'].selector} .tabs-container {
                 visibility: hidden;
+                position: absolute;
                 height: 0;
             }
 
-            .overflow-menu {
+            ${ViraSelect} {
                 display: none;
             }
 
-            ${hostClasses['vira-tabs-overflowing'].selector} .overflow-menu {
-                display: flex;
+            ${hostClasses['vira-tabs-overflowing'].selector} ${ViraSelect} {
+                display: inline-flex;
                 align-items: center;
                 width: fit-content;
-                padding-left: 8px;
+                max-width: 100%;
             }
 
             ${hostClasses['vira-tabs-fill-width'].selector} {
@@ -329,10 +334,6 @@ export const ViraTabs = defineViraElement()({
                 display: flex;
                 padding: 8px 16px;
             }
-
-            ${ViraMenuTrigger} {
-                margin: 3px 0;
-            }
         `;
     },
     cleanup({ state }) {
@@ -392,53 +393,53 @@ export const ViraTabs = defineViraElement()({
                 `;
         }, check.isTruthy);
         const selectedTab = inputs.tabs.find((tab) => routeHasPaths(inputs.currentRoute, tab.paths));
-        const menuItems = renderMenuItemEntries(filterMap(inputs.tabs, (tab) => {
+        const selectOptions = filterMap(inputs.tabs, (tab) => {
             if (tab.isHidden) {
                 return undefined;
             }
-            const isSelected = routeHasPaths(inputs.currentRoute, tab.paths);
             return {
-                content: html `
-                            <${ViraLink.assign({
-                    route: {
-                        router: inputs.router,
-                        route: {
-                            paths: tab.paths.fullPaths,
-                        },
-                        scrollToTop: true,
-                    },
-                    disableLinkStyles: true,
-                })}>
-                                ${tab.label}
-                            </${ViraLink}>
-                        `,
-                selected: isSelected,
+                value: tab.paths.fullPaths.join('/'),
+                label: tab.label,
                 disabled: tab.isDisabled,
-                onClick() {
-                    if (!tab.isDisabled) {
-                        dispatch(new events.tabSelect(tab));
-                    }
-                },
             };
-        }, check.isTruthy));
+        }, check.isTruthy);
+        function captureModifierState(event) {
+            updateState({
+                modifierKeyHeld: event.ctrlKey || event.metaKey || event.shiftKey,
+            });
+        }
         return html `
-            <${ViraMenuTrigger.assign({
-            horizontalAnchor: inputs.menuHorizontalAnchor,
-            isDisabled: inputs.menuIsDisabled,
-            popUpOffset: inputs.menuPopUpOffset,
-            menuCornerStyle: ViraMenuCornerStyle.AllRounded,
+            <${ViraSelect.assign({
+            options: selectOptions,
+            value: selectedTab?.paths.fullPaths.join('/'),
         })}
-                class="overflow-menu"
-            >
-                <${ViraButton.assign({
-            text: selectedTab?.label || '',
-            showMenuCaret: true,
-            color: ViraColorVariant.Neutral,
+                ${listen('mousedown', captureModifierState)}
+                ${listen('keydown', captureModifierState)}
+                ${listen(ViraSelect.events.valueChange, (event) => {
+            try {
+                const selectedValue = event.detail;
+                const tab = inputs.tabs.find((tab) => tab.paths.fullPaths.join('/') === selectedValue);
+                if (!tab || tab.isDisabled) {
+                    return;
+                }
+                dispatch(new events.tabSelect(tab));
+                const route = {
+                    paths: tab.paths.fullPaths,
+                };
+                if (state.modifierKeyHeld) {
+                    globalThis.open(inputs.router.createRouteUrl(route), '_blank', 'noopener,noreferrer');
+                }
+                else {
+                    inputs.router.setRoute(route);
+                }
+            }
+            finally {
+                updateState({
+                    modifierKeyHeld: false,
+                });
+            }
         })}
-                    slot=${ViraMenuTrigger.slotNames.trigger}
-                ></${ViraButton}>
-                ${menuItems}
-            </${ViraMenuTrigger}>
+            ></${ViraSelect}>
             <ul
                 class="tabs-container"
                 role="tablist"

package/package.json

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