vira 31.16.1 → 31.16.2

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

@@ -3,6 +3,7 @@ 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.
  *
@@ -45,7 +46,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" | "setRoute">;
+    router: Pick<SpaRouter<any, any, any>, "createRouteUrl" | "setRouteOnDirectNavigation">;
     currentRoute: Readonly<FullSpaRoute>;
 } & PartialWithUndefined<{
     /**
@@ -68,18 +69,22 @@ 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,9 +10,12 @@ 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.
  *
@@ -53,12 +56,6 @@ 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: {
@@ -145,7 +142,6 @@ export const ViraTabs = defineViraElement()({
         return css `
             :host {
                 display: flex;
-                position: relative;
                 box-sizing: border-box;
                 ${noUserSelect};
                 width: 100%;
@@ -296,19 +292,18 @@ export const ViraTabs = defineViraElement()({
 
             ${hostClasses['vira-tabs-overflowing'].selector} .tabs-container {
                 visibility: hidden;
-                position: absolute;
                 height: 0;
             }
 
-            ${ViraSelect} {
+            .overflow-menu {
                 display: none;
             }
 
-            ${hostClasses['vira-tabs-overflowing'].selector} ${ViraSelect} {
-                display: inline-flex;
+            ${hostClasses['vira-tabs-overflowing'].selector} .overflow-menu {
+                display: flex;
                 align-items: center;
                 width: fit-content;
-                max-width: 100%;
+                padding-left: 8px;
             }
 
             ${hostClasses['vira-tabs-fill-width'].selector} {
@@ -334,6 +329,10 @@ export const ViraTabs = defineViraElement()({
                 display: flex;
                 padding: 8px 16px;
             }
+
+            ${ViraMenuTrigger} {
+                margin: 3px 0;
+            }
         `;
     },
     cleanup({ state }) {
@@ -393,53 +392,53 @@ export const ViraTabs = defineViraElement()({
                 `;
         }, check.isTruthy);
         const selectedTab = inputs.tabs.find((tab) => routeHasPaths(inputs.currentRoute, tab.paths));
-        const selectOptions = filterMap(inputs.tabs, (tab) => {
+        const menuItems = renderMenuItemEntries(filterMap(inputs.tabs, (tab) => {
             if (tab.isHidden) {
                 return undefined;
             }
+            const isSelected = routeHasPaths(inputs.currentRoute, tab.paths);
             return {
-                value: tab.paths.fullPaths.join('/'),
-                label: tab.label,
+                content: html `
+                            <${ViraLink.assign({
+                    route: {
+                        router: inputs.router,
+                        route: {
+                            paths: tab.paths.fullPaths,
+                        },
+                        scrollToTop: true,
+                    },
+                    disableLinkStyles: true,
+                })}>
+                                ${tab.label}
+                            </${ViraLink}>
+                        `,
+                selected: isSelected,
                 disabled: tab.isDisabled,
+                onClick() {
+                    if (!tab.isDisabled) {
+                        dispatch(new events.tabSelect(tab));
+                    }
+                },
             };
-        }, check.isTruthy);
-        function captureModifierState(event) {
-            updateState({
-                modifierKeyHeld: event.ctrlKey || event.metaKey || event.shiftKey,
-            });
-        }
+        }, check.isTruthy));
         return html `
-            <${ViraSelect.assign({
-            options: selectOptions,
-            value: selectedTab?.paths.fullPaths.join('/'),
+            <${ViraMenuTrigger.assign({
+            horizontalAnchor: inputs.menuHorizontalAnchor,
+            isDisabled: inputs.menuIsDisabled,
+            popUpOffset: inputs.menuPopUpOffset,
+            menuCornerStyle: ViraMenuCornerStyle.AllRounded,
         })}
-                ${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,
-                });
-            }
+                class="overflow-menu"
+            >
+                <${ViraButton.assign({
+            text: selectedTab?.label || '',
+            showMenuCaret: true,
+            color: ViraColorVariant.Neutral,
         })}
-            ></${ViraSelect}>
+                    slot=${ViraMenuTrigger.slotNames.trigger}
+                ></${ViraButton}>
+                ${menuItems}
+            </${ViraMenuTrigger}>
             <ul
                 class="tabs-container"
                 role="tablist"

package/package.json

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