vira 31.5.7 → 31.6.0

package/dist/elements/index.d.ts

@@ -19,4 +19,5 @@ export * from './vira-modal.element.js';
 export * from './vira-overflow-switch.element.js';
 export * from './vira-progress.element.js';
 export * from './vira-select.element.js';
+export * from './vira-tabs.element.js';
 export * from './vira-tag.element.js';

package/dist/elements/index.js

@@ -19,4 +19,5 @@ export * from './vira-modal.element.js';
 export * from './vira-overflow-switch.element.js';
 export * from './vira-progress.element.js';
 export * from './vira-select.element.js';
+export * from './vira-tabs.element.js';
 export * from './vira-tag.element.js';

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

@@ -0,0 +1,79 @@
+import { type PartialWithUndefined } from '@augment-vir/common';
+import { type FullSpaRoute, type GenericTreePaths, type SpaRouter } from 'spa-router-vir';
+import { type ViraIconSvg } from '../icons/icon-svg.js';
+import { ViraColorVariant } from '../styles/form-variants.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.
+ *
+ * @category Internal
+ */
+export declare enum ViraTabsBarDirection {
+    Top = "top",
+    Bottom = "bottom",
+    Left = "left",
+    Right = "right"
+}
+/**
+ * Controls whether tab icons render above/below or beside the label text.
+ *
+ * @category Internal
+ */
+export declare enum ViraTabsIconLayout {
+    /** Icon renders above (or below) the label. */
+    Vertical = "vertical",
+    /** Icon renders beside the label. */
+    Horizontal = "horizontal"
+}
+/**
+ * A single tab entry for {@link ViraTabs}.
+ *
+ * @category Internal
+ */
+export type ViraTab = {
+    label: string;
+    paths: GenericTreePaths;
+} & PartialWithUndefined<{
+    icon: Readonly<ViraIconSvg>;
+    isHidden: boolean;
+    isDisabled: boolean;
+}>;
+/**
+ * A tab bar element that renders an array of tabs with an animated selection indicator.
+ *
+ * @category Elements
+ */
+export declare const ViraTabs: import("element-vir").DeclarativeElementDefinition<"vira-tabs", {
+    tabs: ReadonlyArray<Readonly<ViraTab>>;
+    router: Pick<SpaRouter<any, any, any>, "createRouteUrl" | "setRouteOnDirectNavigation">;
+    currentRoute: Readonly<FullSpaRoute>;
+} & PartialWithUndefined<{
+    /**
+     * Which edge of the tab the selection bar appears on.
+     *
+     * @default ViraTabsBarDirection.Bottom
+     */
+    barDirection: ViraTabsBarDirection;
+    /**
+     * Color variant for the tab selection indicator and active tab text.
+     *
+     * @default ViraColorVariant.Accent
+     */
+    colorVariant: ViraColorVariant.Accent | ViraColorVariant.Plain;
+    /**
+     * Layout direction for icons relative to their label text.
+     *
+     * @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>;
+}>, {}, {}, "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-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

@@ -0,0 +1,319 @@
+import { check } from '@augment-vir/assert';
+import { filterMap } from '@augment-vir/common';
+import { classMap, css, html, nothing } from 'element-vir';
+import { routeHasPaths, } from 'spa-router-vir';
+import { createFocusStyles } from '../styles/focus.js';
+import { viraFormCssVars } from '../styles/form-styles.js';
+import { ViraColorVariant } from '../styles/form-variants.js';
+import { noNativeFormStyles, noUserSelect, viraDisabledStyles, viraTheme } from '../styles/index.js';
+import { defineViraElement } from '../util/define-vira-element.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 { ViraOverflowSwitch } from './vira-overflow-switch.element.js';
+/**
+ * Controls which edge of the tab the selection indicator bar appears on.
+ *
+ * @category Internal
+ */
+export var ViraTabsBarDirection;
+(function (ViraTabsBarDirection) {
+    ViraTabsBarDirection["Top"] = "top";
+    ViraTabsBarDirection["Bottom"] = "bottom";
+    ViraTabsBarDirection["Left"] = "left";
+    ViraTabsBarDirection["Right"] = "right";
+})(ViraTabsBarDirection || (ViraTabsBarDirection = {}));
+/**
+ * Controls whether tab icons render above/below or beside the label text.
+ *
+ * @category Internal
+ */
+export var ViraTabsIconLayout;
+(function (ViraTabsIconLayout) {
+    /** Icon renders above (or below) the label. */
+    ViraTabsIconLayout["Vertical"] = "vertical";
+    /** Icon renders beside the label. */
+    ViraTabsIconLayout["Horizontal"] = "horizontal";
+})(ViraTabsIconLayout || (ViraTabsIconLayout = {}));
+/**
+ * A tab bar element that renders an array of tabs with an animated selection indicator.
+ *
+ * @category Elements
+ */
+export const ViraTabs = defineViraElement()({
+    tagName: 'vira-tabs',
+    hostClasses: {
+        'vira-tabs-bar-top': ({ inputs }) => inputs.barDirection === ViraTabsBarDirection.Top,
+        'vira-tabs-bar-bottom': ({ inputs }) => !inputs.barDirection || inputs.barDirection === ViraTabsBarDirection.Bottom,
+        'vira-tabs-bar-left': ({ inputs }) => inputs.barDirection === ViraTabsBarDirection.Left,
+        'vira-tabs-bar-right': ({ inputs }) => inputs.barDirection === ViraTabsBarDirection.Right,
+        'vira-tabs-color-accent': ({ inputs }) => !inputs.colorVariant || inputs.colorVariant === ViraColorVariant.Accent,
+        'vira-tabs-color-plain': ({ inputs }) => inputs.colorVariant === ViraColorVariant.Plain,
+        'vira-tabs-icon-layout-vertical': ({ inputs }) => !inputs.iconLayout || inputs.iconLayout === ViraTabsIconLayout.Vertical,
+        'vira-tabs-icon-layout-horizontal': ({ inputs }) => inputs.iconLayout === ViraTabsIconLayout.Horizontal,
+    },
+    cssVars: {
+        'vira-tabs-active-color': viraFormCssVars['vira-form-accent-primary-color'].value,
+        'vira-tabs-active-hover-color': viraFormCssVars['vira-form-accent-primary-hover-color'].value,
+        'vira-tabs-inactive-color': viraTheme.colors['vira-grey-foreground-header'].foreground.value,
+        'vira-tabs-inactive-hover-color': viraTheme.colors['vira-grey-foreground-non-body'].foreground.value,
+        'vira-tabs-bar-thickness': '3px',
+    },
+    styles: ({ hostClasses, cssVars }) => {
+        return css `
+            :host {
+                display: inline-flex;
+                box-sizing: border-box;
+                ${noUserSelect};
+                max-width: 100%;
+                max-height: 100%;
+            }
+
+            .tabs-container {
+                display: flex;
+                position: relative;
+                list-style: none;
+                margin: 0;
+                padding: 0;
+            }
+
+            ${hostClasses['vira-tabs-bar-top'].selector},
+            ${hostClasses['vira-tabs-bar-bottom'].selector} {
+                & .tabs-container {
+                    flex-direction: row;
+                }
+            }
+
+            ${hostClasses['vira-tabs-bar-left'].selector},
+            ${hostClasses['vira-tabs-bar-right'].selector} {
+                & .tabs-container {
+                    flex-direction: column;
+                }
+            }
+
+            li {
+                ${noNativeFormStyles};
+                cursor: pointer;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                padding: 8px 16px;
+                position: relative;
+                color: ${cssVars['vira-tabs-inactive-color'].value};
+                font-size: ${viraFormCssVars['vira-form-medium-text-size'].value};
+                text-decoration: none;
+                ${createFocusStyles({
+            renderInside: true,
+            elementBorderSize: '0',
+        })}
+
+                &::after {
+                    content: '';
+                    position: absolute;
+                    background-color: transparent;
+                }
+
+                &:hover {
+                    color: ${cssVars['vira-tabs-inactive-hover-color'].value};
+                }
+
+                &.selected {
+                    pointer-events: none;
+                    color: ${cssVars['vira-tabs-active-color'].value};
+
+                    &::after {
+                        background-color: ${cssVars['vira-tabs-active-color'].value};
+                    }
+                }
+
+                &.disabled {
+                    ${viraDisabledStyles};
+                }
+            }
+
+            ${hostClasses['vira-tabs-bar-bottom'].selector} {
+                & li::after {
+                    bottom: 0;
+                    left: 0;
+                    right: 0;
+                    height: ${cssVars['vira-tabs-bar-thickness'].value};
+                    border-radius: ${cssVars['vira-tabs-bar-thickness'].value}
+                        ${cssVars['vira-tabs-bar-thickness'].value} 0 0;
+                }
+            }
+
+            ${hostClasses['vira-tabs-bar-top'].selector} {
+                & li::after {
+                    top: 0;
+                    left: 0;
+                    right: 0;
+                    height: ${cssVars['vira-tabs-bar-thickness'].value};
+                    border-radius: 0 0 ${cssVars['vira-tabs-bar-thickness'].value}
+                        ${cssVars['vira-tabs-bar-thickness'].value};
+                }
+            }
+
+            ${hostClasses['vira-tabs-bar-left'].selector} {
+                & li::after {
+                    top: 0;
+                    bottom: 0;
+                    left: 0;
+                    width: ${cssVars['vira-tabs-bar-thickness'].value};
+                    border-radius: 0 ${cssVars['vira-tabs-bar-thickness'].value}
+                        ${cssVars['vira-tabs-bar-thickness'].value} 0;
+                }
+            }
+
+            ${hostClasses['vira-tabs-bar-right'].selector} {
+                & li::after {
+                    top: 0;
+                    bottom: 0;
+                    right: 0;
+                    width: ${cssVars['vira-tabs-bar-thickness'].value};
+                    border-radius: ${cssVars['vira-tabs-bar-thickness'].value} 0 0
+                        ${cssVars['vira-tabs-bar-thickness'].value};
+                }
+            }
+
+            ${hostClasses['vira-tabs-color-plain'].selector} {
+                ${cssVars['vira-tabs-active-color'].name}: ${viraTheme.colors['vira-grey-foreground-small-body'].foreground.value};
+                ${cssVars['vira-tabs-active-hover-color'].name}: ${viraTheme.colors['vira-grey-foreground-body'].foreground.value};
+            }
+
+            .tab-content {
+                display: flex;
+                align-items: center;
+                justify-content: center;
+            }
+
+            ${hostClasses['vira-tabs-icon-layout-vertical'].selector} {
+                & .tab-content {
+                    flex-direction: column;
+                    gap: 4px;
+                }
+            }
+
+            ${hostClasses['vira-tabs-icon-layout-horizontal'].selector} {
+                & .tab-content {
+                    flex-direction: row;
+                    gap: 8px;
+                }
+            }
+
+            ${ViraOverflowSwitch} {
+                max-width: 100%;
+            }
+
+            ${ViraLink} {
+                text-decoration: none;
+            }
+        `;
+    },
+    render({ inputs }) {
+        const tabs = filterMap(inputs.tabs, (tab) => {
+            if (tab.isHidden) {
+                return undefined;
+            }
+            const isSelected = routeHasPaths(inputs.currentRoute, tab.paths);
+            const iconTemplate = tab.icon
+                ? html `
+                          <${ViraIcon.assign({
+                    icon: tab.icon,
+                })}></${ViraIcon}>
+                      `
+                : nothing;
+            const isInert = isSelected || !!tab.isDisabled;
+            return html `
+                    <li
+                        class=${classMap({
+                selected: isSelected,
+                disabled: !!tab.isDisabled,
+            })}
+                        role="presentation"
+                    >
+                        <${ViraLink.assign({
+                route: {
+                    router: inputs.router,
+                    route: {
+                        paths: tab.paths.fullPaths,
+                    },
+                    scrollToTop: true,
+                },
+                disableLinkStyles: true,
+                attributePassthrough: {
+                    a: {
+                        role: 'tab',
+                        'aria-selected': String(isSelected),
+                        'aria-disabled': String(!!tab.isDisabled),
+                        tabindex: isInert ? '-1' : undefined,
+                    },
+                },
+            })}>
+                            <span class="tab-content">
+                                ${iconTemplate}
+                                <span class="tab-label">${tab.label}</span>
+                            </span>
+                        </${ViraLink}>
+                    </li>
+                `;
+        }, check.isTruthy);
+        const selectedTab = inputs.tabs.find((tab) => routeHasPaths(inputs.currentRoute, tab.paths));
+        const menuItems = renderMenuItemEntries(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,
+                disabled: tab.isDisabled,
+            };
+        }, check.isTruthy));
+        return html `
+            <${ViraOverflowSwitch.assign({
+            automaticallySwitch: true,
+        })}>
+                <ul
+                    class="tabs-container"
+                    role="tablist"
+                    slot=${ViraOverflowSwitch.slotNames.large}
+                >
+                    ${tabs}
+                </ul>
+                <${ViraMenuTrigger.assign({
+            horizontalAnchor: inputs.menuHorizontalAnchor,
+            isDisabled: inputs.menuIsDisabled,
+            popUpOffset: inputs.menuPopUpOffset,
+            menuCornerStyle: ViraMenuCornerStyle.AllRounded,
+        })}
+                    slot=${ViraOverflowSwitch.slotNames.small}
+                >
+                    <${ViraButton.assign({
+            text: selectedTab?.label || '',
+            showMenuCaret: true,
+            colorVariant: ViraColorVariant.Neutral,
+        })}
+                        slot=${ViraMenuTrigger.slotNames.trigger}
+                    ></${ViraButton}>
+                    ${menuItems}
+                </${ViraMenuTrigger}>
+            </${ViraOverflowSwitch}>
+        `;
+    },
+});

package/dist/util/pop-up-helpers.js

@@ -48,6 +48,11 @@ export function renderMenuItemEntries(items) {
             ...item,
         })}
                     ${listen('click', async (event) => {
+            if (item.disabled) {
+                event.stopImmediatePropagation();
+                event.preventDefault();
+                return;
+            }
             await item.onClick?.({
                 event,
                 index,

package/package.json

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