vira 26.4.0 → 26.5.0

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

@@ -26,6 +26,7 @@ export const ViraMenuItem = defineViraElement()({
             display: flex;
             align-items: center;
             padding: 8px;
+            padding-right: 24px;
             padding-left: 0;
             text-align: left;
         }
@@ -47,6 +48,7 @@ export const ViraMenuItem = defineViraElement()({
 
         .include-left-spacing {
             padding-left: 12px;
+            padding-right: 12px;
         }
     `,
     render({ inputs }) {

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}.
  *
@@ -51,6 +51,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,

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.
  *
@@ -75,8 +99,6 @@ export const ViraPopUpTrigger = defineViraElement()({
 
             /* highest possible z-index */
             z-index: 2147483647;
-            left: 0;
-            right: 0;
 
             & > * {
                 pointer-events: auto;
@@ -166,6 +188,24 @@ export const ViraPopUpTrigger = defineViraElement()({
                 triggerPopUp({ emitEvent: false, open: true }, undefined);
             }
         }
+        const horizontalPositionStyle = state.showPopUpResult
+            ? css `
+                  ${inputs.horizontalAnchor === HorizontalAnchor.Right
+                ? css `
+                            left: -${state.showPopUpResult.positions.diff.left}px;
+                        `
+                : css `
+                            left: ${inputs.popUpOffset?.left || 0}px;
+                        `}
+                  ${inputs.horizontalAnchor === HorizontalAnchor.Left
+                ? css `
+                            right: -${state.showPopUpResult.positions.diff.right}px;
+                        `
+                : css `
+                            right: ${inputs.popUpOffset?.right || 0}px;
+                        `}
+              `
+            : css ``;
         /**
          * 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 +218,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.d.ts

@@ -1,8 +1,8 @@
 import { type PartialWithUndefined } from '@augment-vir/common';
 /**
  * A [`<progress>`](https://developer.mozilla.org/docs/Web/HTML/Reference/Elements/progress)
- * alternative that supports custom styling in _all_ browsers via host styles or CSS variables _and_
- * prevents background bleed-through on curved corners.
+ * alternative that supports custom styling in _all_ browsers via CSS vars _and_ prevents background
+ * bleed.
  *
  * @category Progress
  * @category Elements

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

@@ -1,9 +1,11 @@
+import { clamp } from '@augment-vir/common';
+import { applyAttributes } from 'device-navigation';
 import { css, html } from 'element-vir';
 import { defineViraElement } from './define-vira-element.js';
 /**
  * A [`<progress>`](https://developer.mozilla.org/docs/Web/HTML/Reference/Elements/progress)
- * alternative that supports custom styling in _all_ browsers via host styles or CSS variables _and_
- * prevents background bleed-through on curved corners.
+ * alternative that supports custom styling in _all_ browsers via CSS vars _and_ prevents background
+ * bleed.
  *
  * @category Progress
  * @category Elements
@@ -28,33 +30,46 @@ export const ViraProgress = defineViraElement()({
             height: 10px;
             display: inline-flex;
             align-items: center;
-            background-color: ${cssVars['vira-progress-background-color'].value};
             border-radius: ${cssVars['vira-progress-border-radius'].value};
             color: ${cssVars['vira-progress-foreground-color'].value};
+            overflow: hidden;
         }
 
         .progress-bar {
             background-color: currentColor;
-            border-radius: calc(${cssVars['vira-progress-border-radius'].value} - 1px);
-            /* Add some extra pixels to prevent the background from bleeding through on the curved corners. */
-            height: calc(100% + 2px);
-            /* Overlap a bin on the left to prevent the background from bleeding through on the curved corners. */
-            margin-left: -1px;
+            height: 100%;
+        }
+
+        .background-bar {
+            background-color: ${cssVars['vira-progress-background-color'].value};
+            height: 100%;
+            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 = Math.round((value / totalRange) * 100);
+        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"
-                style=${css `
-                    width: calc(${percentFull}% + 1px);
-                `}
+                style=${percentFull
+            ? css `
+                          width: ${percentFull}%;
+                      `
+            : css `
+                          display: none;
+                      `}
             ></div>
+            <div class="background-bar"></div>
         `;
     },
 });

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/package.json

@@ -1,6 +1,6 @@
 {
     "name": "vira",
-    "version": "26.4.0",
+    "version": "26.5.0",
     "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.0"
+        "element-vir": "^26.5.0"
     },
     "engines": {
         "node": ">=22"