vira 26.4.1 → 26.5.1

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

@@ -1,4 +1,4 @@
-import { classMap, css, html, renderIf } from 'element-vir';
+import { css, html } from 'element-vir';
 import { Check24Icon } from '../../icons/icon-svgs/check-24.icon.js';
 import { noUserSelect } from '../../styles/index.js';
 import { defineViraElement } from '../define-vira-element.js';
@@ -12,26 +12,33 @@ import { ViraIcon } from '../vira-icon.element.js';
 export const ViraMenuItem = defineViraElement()({
     tagName: 'vira-menu-item',
     hostClasses: {
-        'vira-menu-item-selected': ({ inputs }) => inputs.selected,
+        'vira-menu-item-selected': ({ inputs }) => !inputs.hideCheckIcon && inputs.selected,
     },
     styles: ({ hostClasses }) => css `
         :host {
             display: flex;
             ${noUserSelect};
+            box-sizing: border-box;
+            max-width: 100%;
+            overflow: hidden;
         }
 
         .item {
             pointer-events: none;
             min-height: 24px;
             display: flex;
+            max-width: 100%;
             align-items: center;
             padding: 8px;
+            padding-right: 24px;
             padding-left: 0;
             text-align: left;
+            box-sizing: border-box;
         }
 
         ${hostClasses['vira-menu-item-selected'].selector} ${ViraIcon} {
             opacity: 1;
+            visibility: hidden;
         }
 
         /*
@@ -44,17 +51,11 @@ export const ViraMenuItem = defineViraElement()({
             margin-right: -2px;
             margin-left: 2px;
         }
-
-        .include-left-spacing {
-            padding-left: 12px;
-        }
     `,
     render({ inputs }) {
         return html `
-            <div class="item ${classMap({ 'include-left-spacing': !!inputs.hideCheckIcon })}">
-                ${renderIf(!inputs.hideCheckIcon, html `
-                        <${ViraIcon.assign({ icon: Check24Icon })}></${ViraIcon}>
-                    `)}
+            <div class="item">
+                <${ViraIcon.assign({ icon: Check24Icon })}></${ViraIcon}>
                 <slot>${inputs.label}</slot>
             </div>
         `;

package/dist/elements/pop-up/vira-menu-trigger.element.d.ts

@@ -3,7 +3,7 @@ import { type NavController } from 'device-navigation';
 import { type PopUpManager, type ShowPopUpResult } from '../../util/pop-up-manager.js';
 import { type MenuItem } from './pop-up-menu-item.js';
 import { type PopUpMenuCornerStyle } from './vira-pop-up-menu.element.js';
-import { type PopUpOffset } from './vira-pop-up-trigger.element.js';
+import { HorizontalAnchor, type PopUpOffset } from './vira-pop-up-trigger.element.js';
 /**
  * Test ids for {@link ViraMenuTrigger}.
  *
@@ -30,6 +30,20 @@ export declare const ViraMenuTrigger: import("element-vir").DeclarativeElementDe
     /** Hide menu item check mark icons. */
     hideCheckIcons: boolean;
     menuCornerStyle: PopUpMenuCornerStyle;
+    /**
+     * - `HorizontalAnchor.Left`: pop-up is anchored to the left side of the trigger and the
+     *   pop-up can grow to the right.
+     * - `HorizontalAnchor.Right`: pop-up is anchored to the right side of the trigger and the
+     *   pop-up can grow to the left.
+     * - `HorizontalAnchor.Both`: pop-up is anchored on both sides of the trigger and cannot grow
+     *   beyond it.
+     *
+     * Note that when `HorizontalAnchor.Both` is _not_ used, this anchor will cancel out any
+     * `popUpOffset` for the direction _opposite_ of the chosen anchor.
+     *
+     * @default HorizontalAnchor.Left
+     */
+    horizontalAnchor: HorizontalAnchor;
 }>, {
     navController: undefined | NavController;
     popUpManager: undefined | PopUpManager;

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

@@ -3,7 +3,7 @@ import { defineViraElement } from '../define-vira-element.js';
 import { updateSelectedItems } from './pop-up-helpers.js';
 import { ViraMenu } from './vira-menu.element.js';
 import { PopUpMenuDirection, ViraPopUpMenu, } from './vira-pop-up-menu.element.js';
-import { ViraPopUpTrigger } from './vira-pop-up-trigger.element.js';
+import { HorizontalAnchor, ViraPopUpTrigger, } from './vira-pop-up-trigger.element.js';
 /**
  * Test ids for {@link ViraMenuTrigger}.
  *
@@ -31,6 +31,10 @@ export const ViraMenuTrigger = defineViraElement()({
         ${ViraPopUpTrigger} {
             width: 100%;
         }
+
+        .full-width-menu {
+            width: 100%;
+        }
     `,
     events: {
         itemActivate: defineElementEvent(),
@@ -51,6 +55,7 @@ export const ViraMenuTrigger = defineViraElement()({
             keepOpenAfterInteraction: true,
             z_debug_forceOpenState: inputs.z_debug_forceOpenState,
             popUpOffset: inputs.popUpOffset,
+            horizontalAnchor: inputs.horizontalAnchor || HorizontalAnchor.Left,
         })}
                 class=${classMap({
             open: !!state.showPopUpResult,
@@ -95,6 +100,9 @@ export const ViraMenuTrigger = defineViraElement()({
                 cornerStyle: inputs.menuCornerStyle,
             })}
                               slot=${ViraPopUpTrigger.slotNames.popUp}
+                              class=${classMap({
+                'full-width-menu': inputs.horizontalAnchor === HorizontalAnchor.Both,
+            })}
                           >
                               <${ViraMenu.assign({
                 items: inputs.items,

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

@@ -39,6 +39,7 @@ export const ViraMenu = defineViraElement()({
             flex-direction: column;
 
             width: 100%;
+            max-width: 100%;
             max-height: 100%;
             overflow-y: auto;
             z-index: 100;

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

@@ -43,8 +43,7 @@ export const ViraPopUpMenu = defineViraElement()({
     styles: ({ hostClasses }) => css `
         :host {
             display: flex;
-
-            width: 100%;
+            max-width: 100%;
             max-height: 100%;
             overflow-y: auto;
             z-index: 99;

package/dist/elements/pop-up/vira-pop-up-trigger.element.d.ts

@@ -11,6 +11,29 @@ export type PopUpOffset = PartialWithUndefined<{
     right: number;
     left: number;
 }>;
+/**
+ * Anchor options for pop-ups.
+ *
+ * @category Internal
+ */
+export declare enum HorizontalAnchor {
+    /**
+     * The left side of the pop-up will be anchored to the left side of the trigger, allowing the
+     * pop-up to grow on the right side of the trigger.
+     */
+    Left = "left",
+    /**
+     * The Right side of the pop-up will be anchored to the right side of the trigger, allowing the
+     * pop-up to grow on the left side of the trigger.
+     */
+    Right = "right",
+    /**
+     * Restrict the pop-up on both sides.
+     *
+     * This is the default anchor for {@link ViraPopUpTrigger}.
+     */
+    Both = "both"
+}
 /**
  * An element with slots for a pop-up trigger and pop-up contents.
  *
@@ -26,6 +49,20 @@ export declare const ViraPopUpTrigger: import("element-vir").DeclarativeElementD
     keepOpenAfterInteraction: boolean;
     /** All values in px. */
     popUpOffset?: PopUpOffset;
+    /**
+     * - `HorizontalAnchor.Left`: pop-up is anchored to the left side of the trigger and the
+     *   pop-up can grow to the right.
+     * - `HorizontalAnchor.Right`: pop-up is anchored to the right side of the trigger and the
+     *   pop-up can grow to the left.
+     * - `HorizontalAnchor.Both`: pop-up is anchored on both sides of the trigger and cannot grow
+     *   beyond it. (This is the default experience.)
+     *
+     * Note that when `HorizontalAnchor.Both` is _not_ used, this anchor will cancel out any
+     * `popUpOffset` for the direction _opposite_ of the chosen anchor.
+     *
+     * @default HorizontalAnchor.Both
+     */
+    horizontalAnchor?: HorizontalAnchor;
 }>, {
     /** `undefined` means the pop up is not currently showing. */
     showPopUpResult: ShowPopUpResult | undefined;

package/dist/elements/pop-up/vira-pop-up-trigger.element.js

@@ -6,6 +6,30 @@ import { noNativeFormStyles, noUserSelect, viraDisabledStyles } from '../../styl
 import { HidePopUpEvent, NavSelectEvent, PopUpManager, } from '../../util/pop-up-manager.js';
 import { defineViraElement } from '../define-vira-element.js';
 import { triggerPopUpState } from './pop-up-helpers.js';
+/**
+ * Anchor options for pop-ups.
+ *
+ * @category Internal
+ */
+export var HorizontalAnchor;
+(function (HorizontalAnchor) {
+    /**
+     * The left side of the pop-up will be anchored to the left side of the trigger, allowing the
+     * pop-up to grow on the right side of the trigger.
+     */
+    HorizontalAnchor["Left"] = "left";
+    /**
+     * The Right side of the pop-up will be anchored to the right side of the trigger, allowing the
+     * pop-up to grow on the left side of the trigger.
+     */
+    HorizontalAnchor["Right"] = "right";
+    /**
+     * Restrict the pop-up on both sides.
+     *
+     * This is the default anchor for {@link ViraPopUpTrigger}.
+     */
+    HorizontalAnchor["Both"] = "both";
+})(HorizontalAnchor || (HorizontalAnchor = {}));
 /**
  * An element with slots for a pop-up trigger and pop-up contents.
  *
@@ -72,14 +96,15 @@ export const ViraPopUpTrigger = defineViraElement()({
             pointer-events: none;
             display: flex;
             flex-direction: column;
+            align-items: flex-start;
+            overflow: hidden;
 
             /* highest possible z-index */
             z-index: 2147483647;
-            left: 0;
-            right: 0;
 
             & > * {
                 pointer-events: auto;
+                max-width: 100%;
             }
         }
 
@@ -166,6 +191,24 @@ export const ViraPopUpTrigger = defineViraElement()({
                 triggerPopUp({ emitEvent: false, open: true }, undefined);
             }
         }
+        const leftCss = inputs.horizontalAnchor === HorizontalAnchor.Right && state.showPopUpResult
+            ? css `
+                      left: -${state.showPopUpResult.positions.diff.left}px;
+                  `
+            : css `
+                      left: ${inputs.popUpOffset?.left || 0}px;
+                  `;
+        const rightCss = state.showPopUpResult && inputs.horizontalAnchor === HorizontalAnchor.Left
+            ? css `
+                      right: -${state.showPopUpResult.positions.diff.right}px;
+                  `
+            : css `
+                      right: ${inputs.popUpOffset?.right || 0}px;
+                  `;
+        const horizontalPositionStyle = css `
+            ${leftCss}
+            ${rightCss}
+        `;
         /**
          * These styles do _not_ account for window resizing while the menu is open. I decided this
          * was not a major enough problem to tackle. If it becomes major enough in the future,
@@ -178,15 +221,13 @@ export const ViraPopUpTrigger = defineViraElement()({
                     css `
                       bottom: -${state.showPopUpResult.positions.diff.bottom}px;
                       top: calc(100% + ${inputs.popUpOffset?.vertical || 0}px);
-                      left: ${inputs.popUpOffset?.left || 0}px;
-                      right: ${inputs.popUpOffset?.right || 0}px;
+                      ${horizontalPositionStyle}
                   `
                 : /** Dropdown going up position. */
                     css `
                       top: -${state.showPopUpResult.positions.diff.top}px;
                       bottom: calc(100% + ${inputs.popUpOffset?.vertical || 0}px);
-                      left: ${inputs.popUpOffset?.left || 0}px;
-                      right: ${inputs.popUpOffset?.right || 0}px;
+                      ${horizontalPositionStyle}
                   `
             : undefined;
         function respondToClick(event) {

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

@@ -2,6 +2,7 @@ import { type PartialWithUndefined } from '@augment-vir/common';
 import { type ViraIconSvg } from '../icons/icon-svg.js';
 import { type ShowPopUpResult } from '../util/pop-up-manager.js';
 import { type MenuItem } from './pop-up/pop-up-menu-item.js';
+import { HorizontalAnchor } from './pop-up/vira-pop-up-trigger.element.js';
 /**
  * Test ids for {@link ViraDropdown}.
  *
@@ -36,6 +37,17 @@ export declare const ViraDropdown: import("element-vir").DeclarativeElementDefin
     isDisabled: boolean;
     /** For debugging purposes only. Very bad for actual production code use. */
     z_debug_forceOpenState: boolean;
+    /**
+     * - `HorizontalAnchor.Left`: dropdown is anchored to the left side of the trigger and the
+     *   dropdown can grow to the right.
+     * - `HorizontalAnchor.Right`: dropdown is anchored to the right side of the trigger and the
+     *   dropdown can grow to the left.
+     * - `HorizontalAnchor.Both`: dropdown is anchored on both sides of the trigger and cannot
+     *   grow beyond it. (This is the default experience.)
+     *
+     * @default HorizontalAnchor.Both
+     */
+    horizontalAnchor: HorizontalAnchor;
 }>, {
     /** `undefined` means the pop up is not currently showing. */
     showPopUpResult: ShowPopUpResult | undefined;

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

@@ -7,6 +7,7 @@ import { viraFormCssVars } from '../styles/form-themes.js';
 import { noUserSelect, viraAnimationDurations } from '../styles/index.js';
 import { defineViraElement } from './define-vira-element.js';
 import { ViraMenuTrigger } from './pop-up/vira-menu-trigger.element.js';
+import { HorizontalAnchor } from './pop-up/vira-pop-up-trigger.element.js';
 import { ViraIcon } from './vira-icon.element.js';
 /**
  * Test ids for {@link ViraDropdown}.
@@ -140,6 +141,7 @@ export const ViraDropdown = defineViraElement()({
                 vertical: -1,
                 right: 24,
             },
+            horizontalAnchor: inputs.horizontalAnchor || HorizontalAnchor.Both,
         })}
                 ${listen(ViraMenuTrigger.events.openChange, (event) => {
             updateState({ showPopUpResult: event.detail });

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

@@ -1,4 +1,5 @@
 import { clamp } from '@augment-vir/common';
+import { applyAttributes } from 'device-navigation';
 import { css, html } from 'element-vir';
 import { defineViraElement } from './define-vira-element.js';
 /**
@@ -45,12 +46,18 @@ export const ViraProgress = defineViraElement()({
             flex-grow: 1;
         }
     `,
-    render({ inputs }) {
+    render({ inputs, host }) {
         const min = inputs.min || 0;
         const max = inputs.max || 100;
         const totalRange = max - min;
         const value = inputs.value - min;
         const percentFull = clamp(Math.round((value / totalRange) * 100), { min: 0, max: 100 });
+        applyAttributes(host, {
+            'aria-valuemin': inputs.min,
+            'aria-valuemax': inputs.max,
+            'aria-valuenow': inputs.value,
+            'aria-role': 'progressbar',
+        });
         return html `
             <div
                 class="progress-bar"

package/dist/util/pop-up-manager.d.ts

@@ -59,7 +59,7 @@ export type PopUpManagerOptions = {
     supportNavigation: boolean;
 };
 /**
- * Output type from {@link PopUpManager.showPopUp}
+ * Output type from `PopUpManager.showPopUp`
  *
  * @category PopUp
  */

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

@@ -49,8 +49,21 @@ export class PopUpManager {
         this.navController = navController;
         this.options = { ...this.options, ...options };
     }
-    attachGlobalListeners() {
+    attachGlobalListeners(container) {
+        let firstFired = false;
+        const resizeObserver = new ResizeObserver(() => {
+            if (firstFired) {
+                this.removePopUp();
+            }
+            else {
+                firstFired = true;
+            }
+        });
+        resizeObserver.observe(container);
         this.cleanupCallbacks = [
+            () => {
+                resizeObserver.disconnect();
+            },
             listenToPageActivation(false, (isPageActive) => {
                 if (!isPageActive) {
                     this.removePopUp();
@@ -167,7 +180,7 @@ export class PopUpManager {
         });
         const useUp = diff.top > diff.bottom + currentOptions.verticalDiffThreshold &&
             diff.bottom < currentOptions.minDownSpace;
-        this.attachGlobalListeners();
+        this.attachGlobalListeners(container);
         return {
             popDown: !useUp,
             positions: {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "vira",
-    "version": "26.4.1",
+    "version": "26.5.1",
     "description": "A simple and highly versatile design system using element-vir.",
     "keywords": [
         "design",
@@ -38,21 +38,21 @@
         "test:docs": "virmator docs check"
     },
     "dependencies": {
-        "@augment-vir/assert": "^31.23.3",
-        "@augment-vir/common": "^31.23.3",
-        "@augment-vir/web": "^31.23.3",
+        "@augment-vir/assert": "^31.26.0",
+        "@augment-vir/common": "^31.26.0",
+        "@augment-vir/web": "^31.26.0",
         "colorjs.io": "^0.5.2",
         "date-vir": "^7.3.1",
         "device-navigation": "^4.5.5",
         "lit-css-vars": "^3.0.11",
-        "observavir": "^2.0.5",
+        "observavir": "^2.1.0",
         "page-active": "^1.0.1",
-        "spa-router-vir": "^6.1.1",
+        "spa-router-vir": "^6.1.3",
         "type-fest": "^4.41.0",
         "typed-event-target": "^4.1.0"
     },
     "devDependencies": {
-        "@augment-vir/test": "^31.23.3",
+        "@augment-vir/test": "^31.26.0",
         "@web/dev-server-esbuild": "^1.0.4",
         "@web/test-runner": "^0.20.2",
         "@web/test-runner-commands": "^0.9.0",
@@ -63,11 +63,11 @@
         "markdown-code-example-inserter": "^3.0.3",
         "typedoc": "^0.28.5",
         "typescript": "5.8.3",
-        "vite": "^6.3.5",
+        "vite": "^7.0.0",
         "vite-tsconfig-paths": "^5.1.4"
     },
     "peerDependencies": {
-        "element-vir": "^26.4.1"
+        "element-vir": "^26.5.1"
     },
     "engines": {
         "node": ">=22"