vira 31.7.0 → 31.7.2

package/dist/elements/index.d.ts

@@ -16,7 +16,6 @@ export * from './vira-image.element.js';
 export * from './vira-input.element.js';
 export * from './vira-link.element.js';
 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';

package/dist/elements/index.js

@@ -16,7 +16,6 @@ export * from './vira-image.element.js';
 export * from './vira-input.element.js';
 export * from './vira-link.element.js';
 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';

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

@@ -76,4 +76,8 @@ export declare const ViraTabs: import("element-vir").DeclarativeElementDefinitio
     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 []>;
+}>, {
+    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 []>;

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

@@ -1,19 +1,19 @@
 import { check } from '@augment-vir/assert';
 import { filterMap } from '@augment-vir/common';
-import { classMap, css, html, nothing } from 'element-vir';
+import { classMap, css, html, nothing, onDomCreated } 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 { 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 { ViraOverflowSwitch } from './vira-overflow-switch.element.js';
 /**
  * Controls which edge of the tab the selection indicator bar appears on.
  *
@@ -45,6 +45,13 @@ export var ViraTabsIconLayout;
  */
 export const ViraTabs = defineViraElement()({
     tagName: 'vira-tabs',
+    state() {
+        return {
+            isOverflowing: false,
+            /** A callback to remove all internal observers. */
+            cleanupObserver: undefined,
+        };
+    },
     hostClasses: {
         'vira-tabs-bar-top': ({ inputs }) => inputs.barDirection === ViraTabsBarDirection.Top,
         'vira-tabs-bar-bottom': ({ inputs }) => !inputs.barDirection || inputs.barDirection === ViraTabsBarDirection.Bottom,
@@ -54,6 +61,7 @@ export const ViraTabs = defineViraElement()({
         '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,
+        'vira-tabs-overflowing': ({ state }) => state.isOverflowing,
     },
     cssVars: {
         'vira-tabs-active-color': viraFormCssVars['vira-form-accent-primary-color'].value,
@@ -69,7 +77,6 @@ export const ViraTabs = defineViraElement()({
                 box-sizing: border-box;
                 ${noUserSelect};
                 width: 100%;
-                height: 100%;
             }
 
             .tabs-container {
@@ -135,10 +142,8 @@ export const ViraTabs = defineViraElement()({
             }
 
             ${hostClasses['vira-tabs-bar-bottom'].selector} {
-                & .tabs-container {
-                    border-bottom: 1px solid
-                        ${viraTheme.colors['vira-grey-foreground-decoration'].foreground.value};
-                }
+                border-bottom: 1px solid
+                    ${viraTheme.colors['vira-grey-foreground-decoration'].foreground.value};
 
                 & li::after {
                     bottom: 0;
@@ -151,10 +156,8 @@ export const ViraTabs = defineViraElement()({
             }
 
             ${hostClasses['vira-tabs-bar-top'].selector} {
-                & .tabs-container {
-                    border-top: 1px solid
-                        ${viraTheme.colors['vira-grey-foreground-decoration'].foreground.value};
-                }
+                border-top: 1px solid
+                    ${viraTheme.colors['vira-grey-foreground-decoration'].foreground.value};
 
                 & li::after {
                     top: 0;
@@ -167,10 +170,8 @@ export const ViraTabs = defineViraElement()({
             }
 
             ${hostClasses['vira-tabs-bar-left'].selector} {
-                & .tabs-container {
-                    border-left: 1px solid
-                        ${viraTheme.colors['vira-grey-foreground-decoration'].foreground.value};
-                }
+                border-left: 1px solid
+                    ${viraTheme.colors['vira-grey-foreground-decoration'].foreground.value};
 
                 & li::after {
                     top: 0;
@@ -183,10 +184,8 @@ export const ViraTabs = defineViraElement()({
             }
 
             ${hostClasses['vira-tabs-bar-right'].selector} {
-                & .tabs-container {
-                    border-right: 1px solid
-                        ${viraTheme.colors['vira-grey-foreground-decoration'].foreground.value};
-                }
+                border-right: 1px solid
+                    ${viraTheme.colors['vira-grey-foreground-decoration'].foreground.value};
 
                 & li::after {
                     top: 0;
@@ -223,8 +222,19 @@ export const ViraTabs = defineViraElement()({
                 }
             }
 
-            ${ViraOverflowSwitch} {
-                max-width: 100%;
+            ${hostClasses['vira-tabs-overflowing'].selector} .tabs-container {
+                visibility: hidden;
+                height: 0;
+            }
+
+            .overflow-menu {
+                display: none;
+            }
+
+            ${hostClasses['vira-tabs-overflowing'].selector} .overflow-menu {
+                display: flex;
+                align-items: center;
+                width: fit-content;
             }
 
             ${ViraLink} {
@@ -235,9 +245,16 @@ export const ViraTabs = defineViraElement()({
                 display: flex;
                 padding: 8px 16px;
             }
+
+            ${ViraMenuTrigger} {
+                margin: 3px 0;
+            }
         `;
     },
-    render({ inputs }) {
+    cleanup({ state }) {
+        state.cleanupObserver?.();
+    },
+    render({ inputs, state, updateState, host }) {
         const tabs = filterMap(inputs.tabs, (tab) => {
             if (tab.isHidden) {
                 return undefined;
@@ -311,34 +328,43 @@ export const ViraTabs = defineViraElement()({
             };
         }, check.isTruthy));
         return html `
-            <${ViraOverflowSwitch.assign({
-            automaticallySwitch: true,
-        })}>
-                <ul
-                    class="tabs-container"
-                    role="tablist"
-                    slot=${ViraOverflowSwitch.slotNames.large}
-                >
-                    ${tabs}
-                </ul>
-                <${ViraMenuTrigger.assign({
+            <${ViraMenuTrigger.assign({
             horizontalAnchor: inputs.menuHorizontalAnchor,
             isDisabled: inputs.menuIsDisabled,
             popUpOffset: inputs.menuPopUpOffset,
             menuCornerStyle: ViraMenuCornerStyle.AllRounded,
         })}
-                    slot=${ViraOverflowSwitch.slotNames.small}
-                >
-                    <${ViraButton.assign({
+                class="overflow-menu"
+            >
+                <${ViraButton.assign({
             text: selectedTab?.label || '',
             showMenuCaret: true,
             colorVariant: ViraColorVariant.Neutral,
         })}
-                        slot=${ViraMenuTrigger.slotNames.trigger}
-                    ></${ViraButton}>
-                    ${menuItems}
-                </${ViraMenuTrigger}>
-            </${ViraOverflowSwitch}>
+                    slot=${ViraMenuTrigger.slotNames.trigger}
+                ></${ViraButton}>
+                ${menuItems}
+            </${ViraMenuTrigger}>
+            <ul
+                class="tabs-container"
+                role="tablist"
+                ${onDomCreated((tabsElement) => {
+            state.cleanupObserver?.();
+            updateState({
+                cleanupObserver: createOverflowObserver({
+                    element: tabsElement,
+                    widthElement: host,
+                    onChange(isOverflowing) {
+                        updateState({
+                            isOverflowing,
+                        });
+                    },
+                }),
+            });
+        })}
+            >
+                ${tabs}
+            </ul>
         `;
     },
 });

package/dist/util/index.d.ts

@@ -1,6 +1,7 @@
 export * from './define-table.js';
 export * from './define-vira-element.js';
 export * from './dynamic-element.js';
+export * from './overflow-observer.js';
 export * from './pop-up-helpers.js';
 export * from './pop-up-manager.js';
 export * from './shared-text-input-logic.js';

package/dist/util/index.js

@@ -1,6 +1,7 @@
 export * from './define-table.js';
 export * from './define-vira-element.js';
 export * from './dynamic-element.js';
+export * from './overflow-observer.js';
 export * from './pop-up-helpers.js';
 export * from './pop-up-manager.js';
 export * from './shared-text-input-logic.js';

package/dist/util/overflow-observer.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Creates an observer that monitors whether an element's content overflows its visible width. Uses
+ * a ResizeObserver for size changes and a MutationObserver for DOM content changes.
+ *
+ * @returns A cleanup function that disconnects all observers.
+ */
+export declare function createOverflowObserver({ element, widthElement, onChange, }: Readonly<{
+    /** The element whose `scrollWidth` is measured for content size. */
+    element: Element;
+    /**
+     * Optional separate element whose `clientWidth` is used as the available width. Defaults to
+     * `element`. Useful when `element` may be collapsed but the available width should come from a
+     * parent.
+     */
+    widthElement?: Element | undefined;
+    onChange: (isOverflowing: boolean) => void;
+}>): () => void;

package/dist/util/overflow-observer.js

@@ -0,0 +1,28 @@
+/**
+ * Creates an observer that monitors whether an element's content overflows its visible width. Uses
+ * a ResizeObserver for size changes and a MutationObserver for DOM content changes.
+ *
+ * @returns A cleanup function that disconnects all observers.
+ */
+export function createOverflowObserver({ element, widthElement, onChange, }) {
+    const availableWidthElement = widthElement || element;
+    function checkOverflow() {
+        onChange(element.scrollWidth > availableWidthElement.clientWidth);
+    }
+    const resizeObserver = new ResizeObserver(checkOverflow);
+    resizeObserver.observe(element);
+    if (availableWidthElement !== element) {
+        resizeObserver.observe(availableWidthElement);
+    }
+    const mutationObserver = new MutationObserver(checkOverflow);
+    mutationObserver.observe(element, {
+        childList: true,
+        subtree: true,
+        characterData: true,
+    });
+    checkOverflow();
+    return () => {
+        resizeObserver.disconnect();
+        mutationObserver.disconnect();
+    };
+}

package/package.json

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

package/dist/elements/vira-overflow-switch.element.d.ts

@@ -1,21 +0,0 @@
-/**
- * An element switches between two slots based on their overflow.
- *
- * @category Elements
- * @see https://electrovir.github.io/vira/book/elements/vira-overflow-switch
- */
-export declare const ViraOverflowSwitch: import("element-vir").DeclarativeElementDefinition<"vira-overflow-switch", ((Required<Pick<{
-    automaticallySwitch: boolean;
-    useSmall: boolean;
-}, "automaticallySwitch">> & Partial<Record<"useSmall", never>>) | (Required<Pick<{
-    automaticallySwitch: boolean;
-    useSmall: boolean;
-}, "useSmall">> & Partial<Record<"automaticallySwitch", never>>)) & Omit<{
-    automaticallySwitch: boolean;
-    useSmall: boolean;
-}, "automaticallySwitch" | "useSmall">, {
-    isOverflowing: boolean;
-    resizeObserver: undefined | ResizeObserver;
-    /** Called on cleanup to clear all listeners. */
-    cleanupListeners: undefined | (() => void);
-}, {}, "vira-overflow-switch-show-small", "vira-overflow-switch-", readonly ["large", "small"], readonly []>;

package/dist/elements/vira-overflow-switch.element.js

@@ -1,114 +0,0 @@
-import { css, html, onDomCreated } from 'element-vir';
-import { listenTo } from 'typed-event-target';
-import { defineViraElement } from '../util/define-vira-element.js';
-/**
- * An element switches between two slots based on their overflow.
- *
- * @category Elements
- * @see https://electrovir.github.io/vira/book/elements/vira-overflow-switch
- */
-export const ViraOverflowSwitch = defineViraElement()({
-    tagName: 'vira-overflow-switch',
-    slotNames: [
-        /** The child to render, if it fits. */
-        'large',
-        /** The child to render if the large one does not fit. */
-        'small',
-    ],
-    state() {
-        return {
-            isOverflowing: false,
-            resizeObserver: undefined,
-            /** Called on cleanup to clear all listeners. */
-            cleanupListeners: undefined,
-        };
-    },
-    hostClasses: {
-        'vira-overflow-switch-show-small': ({ state, inputs }) => state.isOverflowing || !!inputs.useSmall,
-    },
-    styles: ({ hostClasses }) => css `
-        :host {
-            display: inline-block;
-            max-width: 100%;
-        }
-
-        .large,
-        .small {
-            display: inline-block;
-        }
-
-        .small {
-            display: none;
-        }
-
-        /**
-         * When the large content overflows, hide it but keep it in layout so we can measure it.
-         * The small content is then shown instead. Using height: 0 + overflow: hidden instead of
-         * position: absolute keeps the large element in flow so the host's width still reflects
-         * the available container space, allowing the ResizeObserver to detect when there is
-         * enough room to un-collapse.
-         */
-        ${hostClasses['vira-overflow-switch-show-small'].selector} .large {
-            visibility: hidden;
-            height: 0;
-            overflow: hidden;
-        }
-
-        ${hostClasses['vira-overflow-switch-show-small'].selector} .small {
-            display: inline-block;
-        }
-    `,
-    cleanup({ state, updateState }) {
-        state.cleanupListeners?.();
-        updateState({
-            cleanupListeners: undefined,
-        });
-    },
-    render({ slotNames, updateState, inputs, host, state }) {
-        return html `
-            <div
-                class="large"
-                ${onDomCreated((largeElement) => {
-            if (!inputs.automaticallySwitch) {
-                return;
-            }
-            const overflowParams = {
-                elementToTest: largeElement,
-                host,
-                updateState,
-            };
-            const resizeObserver = new ResizeObserver(() => {
-                updateOverflowing(overflowParams);
-            });
-            resizeObserver.observe(host);
-            /**
-             * Also observe the large slot wrapper itself in case its own layout changes
-             * without host resizing.
-             */
-            resizeObserver.observe(largeElement);
-            const removeSlotChangeListener = listenTo(largeElement, 'slotchange', () => {
-                updateOverflowing(overflowParams);
-            });
-            /** Initial measurement: defer until after first layout. */
-            updateOverflowing(overflowParams);
-            state.cleanupListeners?.();
-            updateState({
-                cleanupListeners() {
-                    resizeObserver.disconnect();
-                    removeSlotChangeListener();
-                },
-            });
-        })}
-            >
-                <slot name=${slotNames.large}></slot>
-            </div>
-            <div class="small"><slot name=${slotNames.small}></slot></div>
-        `;
-    },
-});
-function updateOverflowing({ elementToTest, host, updateState, }) {
-    const isOverflowing = elementToTest.scrollWidth > host.clientWidth;
-    updateState({
-        isOverflowing,
-    });
-}