vira 25.3.0 → 25.4.0

package/dist/elements/dropdown/dropdown-helpers.d.ts

@@ -1,5 +1,5 @@
-import { PopUpManager, ShowPopUpResult } from '../../util/pop-up-manager.js';
-import { ViraDropdownOption } from './vira-dropdown-item.element.js';
+import { type PopUpManager, type ShowPopUpResult } from '../../util/pop-up-manager.js';
+import { type ViraDropdownOption } from './vira-dropdown-item.element.js';
 /**
  * Filters an array of {@link ViraDropdownOption} based on the given selection.
  *

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

@@ -1,5 +1,5 @@
-import { PartialWithUndefined } from '@augment-vir/common';
-import { HTMLTemplateResult } from 'element-vir';
+import { type PartialWithUndefined } from '@augment-vir/common';
+import { type HTMLTemplateResult } from 'element-vir';
 /**
  * An individual option for ViraDropdown.
  *

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

@@ -1,4 +1,5 @@
-import { ViraDropdownOption } from './vira-dropdown-item.element.js';
+import { type NavController } from 'device-navigation';
+import { type ViraDropdownOption } from './vira-dropdown-item.element.js';
 /**
  * Test ids for {@link ViraDropdownOptions}.
  *
@@ -14,6 +15,7 @@ export declare const viraDropdownOptionsTestIds: {
  * @category Elements
  */
 export declare const ViraDropdownOptions: import("element-vir").DeclarativeElementDefinition<"vira-dropdown-options", Readonly<{
+    navController: NavController;
     /** All dropdown options to show to the user. */
     options: ReadonlyArray<Readonly<ViraDropdownOption>>;
     /**

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

@@ -1,5 +1,5 @@
-import { nav, navSelector } from 'device-navigation';
-import { classMap, css, defineElementEvent, html, ifDefined, listen, nothing, testId, } from 'element-vir';
+import { nav, navAttribute, NavValue } from 'device-navigation';
+import { classMap, css, defineElementEvent, html, ifDefined, listen, testId } from 'element-vir';
 import { viraBorders } from '../../styles/border.js';
 import { viraFormCssVars } from '../../styles/form-themes.js';
 import { viraDisabledStyles } from '../../styles/index.js';
@@ -49,7 +49,10 @@ export const ViraDropdownOptions = defineViraElement()({
             outline: none;
         }
 
-        ${navSelector.css.selected('.dropdown-item:not(.disabled)')} {
+        ${navAttribute.css({
+        baseSelector: '.dropdown-item:not(.disabled):not(.selected)',
+        navValue: NavValue.Focused,
+    })} {
             background-color: ${viraFormCssVars['vira-form-selection-hover-background-color']
         .value};
             outline: none;
@@ -66,22 +69,24 @@ export const ViraDropdownOptions = defineViraElement()({
     `,
     render({ inputs, dispatch, events }) {
         const optionTemplates = inputs.options.map((option) => {
+            const selected = inputs.selectedOptions.includes(option);
             const innerTemplate = option.template ||
                 html `
                     <${ViraDropdownItem.assign({
                     label: option.label,
-                    selected: inputs.selectedOptions.includes(option),
+                    selected,
                 })}></${ViraDropdownItem}>
                 `;
             return html `
                 <div
                     class="dropdown-item ${classMap({
                 disabled: !!option.disabled,
+                selected,
             })}"
                     ${testId(viraDropdownOptionsTestIds.option)}
                     title=${ifDefined(option.hoverText || undefined)}
                     role="option"
-                    ${option.disabled ? nothing : nav()}
+                    ${nav(inputs.navController, { disabled: option.disabled || selected })}
                     ${listen('mousedown', (event) => {
                 /**
                  * Prevent this mousedown event from propagating to the window, which would

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

@@ -1,8 +1,7 @@
-import { PartialWithUndefined } from '@augment-vir/common';
-import { NavController } from 'device-navigation';
-import { ViraIconSvg } from '../../icons/icon-svg.js';
-import { PopUpManager, ShowPopUpResult } from '../../util/pop-up-manager.js';
-import { ViraDropdownOption } from './vira-dropdown-item.element.js';
+import { type PartialWithUndefined } from '@augment-vir/common';
+import { type ViraIconSvg } from '../../icons/icon-svg.js';
+import { PopUpManager, type ShowPopUpResult } from '../../util/pop-up-manager.js';
+import { type ViraDropdownOption } from './vira-dropdown-item.element.js';
 /**
  * Test ids for {@link ViraDropdown}.
  *
@@ -42,7 +41,6 @@ export declare const ViraDropdown: import("element-vir").DeclarativeElementDefin
     /** `undefined` means the pop up is not currently showing. */
     showPopUpResult: ShowPopUpResult | undefined;
     popUpManager: PopUpManager;
-    navController: NavController | undefined;
 }, {
     selectedChange: import("element-vir").DefineEvent<PropertyKey[]>;
     openChange: import("element-vir").DefineEvent<boolean>;

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

@@ -32,12 +32,11 @@ export const viraDropdownTestIds = {
  */
 export const ViraDropdown = defineViraElement()({
     tagName: 'vira-dropdown',
-    state() {
+    state({ host }) {
         return {
             /** `undefined` means the pop up is not currently showing. */
             showPopUpResult: undefined,
-            popUpManager: new PopUpManager(),
-            navController: undefined,
+            popUpManager: new PopUpManager(new NavController(host)),
         };
     },
     hostClasses: {
@@ -195,7 +194,6 @@ export const ViraDropdown = defineViraElement()({
             }
             dispatch(new events.selectedChange(createNewSelection(option.id, inputs.selected, !!inputs.isMultiSelect)));
         });
-        updateState({ navController: new NavController(host) });
     },
     render({ dispatch, events, state, inputs, updateState, host }) {
         assertUniqueIdProps(inputs.options);
@@ -304,6 +302,7 @@ export const ViraDropdown = defineViraElement()({
                             <${ViraDropdownOptions.assign({
             options: inputs.options,
             selectedOptions,
+            navController: state.popUpManager.navController,
         })}
                                 ${listen(ViraDropdownOptions.events.selectionChange, (event) => {
             /**

package/dist/elements/shared-text-input-logic.d.ts

@@ -1,3 +1,4 @@
+import { type AttributeValues } from 'element-vir';
 /**
  * Inputs shared between the multiple input elements.
  *
@@ -23,6 +24,8 @@ export type SharedTextInputElementInputs = {
     disableBrowserHelps?: boolean;
     /** Set this to true to make the whole element size to only fit the input text. */
     fitText?: boolean;
+    /** A set of attributes that will be applied to the inner native text element. */
+    attributePassthrough?: AttributeValues | undefined;
 };
 /**
  * Inputs used to check if the current input element value is allowed.

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

@@ -1,4 +1,4 @@
-import { ViraIconSvg } from '../icons/index.js';
+import { type ViraIconSvg } from '../icons/index.js';
 /**
  * Button styles available for {@link ViraButton}.
  *

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

@@ -1,4 +1,4 @@
-import { ViraIconSvg } from '../icons/icon-svg.js';
+import { type ViraIconSvg } from '../icons/icon-svg.js';
 /**
  * An element that renders a single {@link ViraIconSvg}.
  *

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

@@ -1,5 +1,5 @@
-import { Dimensions } from '@augment-vir/common';
-import { Duration, DurationUnit } from 'date-vir';
+import { type Dimensions } from '@augment-vir/common';
+import { type Duration, type DurationUnit } from 'date-vir';
 /**
  * An `<img>` element wrapper that handles size constraints and includes slots for loading and error
  * indicators.

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

@@ -1,5 +1,5 @@
-import { ViraIconSvg } from '../icons/index.js';
-import { SharedTextInputElementInputs } from './shared-text-input-logic.js';
+import { type ViraIconSvg } from '../icons/index.js';
+import { type SharedTextInputElementInputs } from './shared-text-input-logic.js';
 export * from './shared-text-input-logic.js';
 /**
  * Input types for {@link ViraInput}.

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

@@ -1,4 +1,4 @@
-import { css, defineElementEvent, html, listen, onResize, renderIf, } from 'element-vir';
+import { attributes, css, defineElementEvent, html, listen, nothing, onResize, renderIf, } from 'element-vir';
 import { CloseX24Icon } from '../icons/icon-svgs/close-x-24.icon.js';
 import { EyeClosed24Icon, EyeOpen24Icon } from '../icons/index.js';
 import { createFocusStyles, viraFocusCssVars } from '../styles/focus.js';
@@ -311,6 +311,9 @@ export const ViraInput = defineViraElement()({
             });
         })}
                     placeholder=${inputs.placeholder}
+                    ${inputs.attributePassthrough
+            ? attributes(inputs.attributePassthrough)
+            : nothing}
                 />
                 ${renderIf(!!(inputs.showClearButton && inputs.value), html `
                         <button

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

@@ -1,6 +1,5 @@
-import type { PartialWithUndefined } from '@augment-vir/common';
-import { SpaRoute, SpaRouter } from 'spa-router-vir';
-import { RequireExactlyOne } from 'type-fest';
+import { type PartialWithUndefined } from '@augment-vir/common';
+import { type SpaRoute, type SpaRouter } from 'spa-router-vir';
 /**
  * A hyperlink wrapper element that can be configured to emit route change events rather than just
  * being a raw link.
@@ -9,7 +8,7 @@ import { RequireExactlyOne } from 'type-fest';
  * @category Elements
  * @see https://electrovir.github.io/element-vir/vira/book/elements/vira-link
  */
-export declare const ViraLink: import("element-vir").DeclarativeElementDefinition<"vira-link", RequireExactlyOne<{
+export declare const ViraLink: import("element-vir").DeclarativeElementDefinition<"vira-link", import("type-fest/source/require-exactly-one.js")._RequireExactlyOne<{
     /**
      * A full raw URL link that will navigate the current window away or open a new tab. If this
      * property is provided for the inputs, don't provide a route property.
@@ -27,7 +26,7 @@ export declare const ViraLink: import("element-vir").DeclarativeElementDefinitio
         router: Pick<SpaRouter<any, any, any>, "createRouteUrl" | "setRouteOnDirectNavigation">;
         scrollToTop?: boolean;
     };
-}> & PartialWithUndefined<{
+}, "link" | "route"> & PartialWithUndefined<{
     aria?: {
         /**
          * This label will be attached to the inner `<a>` element's `aria-label` attribute.

package/dist/icons/icon-svg.d.ts

@@ -1,4 +1,4 @@
-import { TemplateResult } from 'element-vir';
+import { type TemplateResult } from 'element-vir';
 import { viraIconCssVars } from './icon-css-vars.js';
 /**
  * An individual Vira icon SVG definition.

package/dist/styles/color.d.ts

@@ -1,5 +1,5 @@
-import { Format } from 'colorjs.io/types/src/space';
-import { ColorTypes } from '../re-exports/colorjs-io.js';
+import { type Format } from 'colorjs.io/types/src/space';
+import { type ColorTypes } from '../re-exports/colorjs-io.js';
 /**
  * Asserts that the given color type is valid.
  *

package/dist/styles/shadows.d.ts

@@ -1,4 +1,4 @@
-import { CSSResult } from 'element-vir';
+import { type CSSResult } from 'element-vir';
 /**
  * CSS chunks for default Vira shadow styles.
  *

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

@@ -1,6 +1,6 @@
-import { MaybePromise } from '@augment-vir/common';
-import { Coords } from 'device-navigation';
-import { ExtractEventByType, ExtractEventTypes, ListenOptions, RemoveListenerCallback } from 'typed-event-target';
+import { type MaybePromise } from '@augment-vir/common';
+import { type Coords, type NavController } from 'device-navigation';
+import { type ExtractEventByType, type ExtractEventTypes, type ListenOptions, type RemoveListenerCallback } from 'typed-event-target';
 /**
  * A type used for representing a rectangle's position.
  *
@@ -120,11 +120,12 @@ export type PopUpManagerEvents = HidePopUpEvent | NavSelectEvent;
  * @category Pop Up
  */
 export declare class PopUpManager {
+    readonly navController: NavController;
     private listenTarget;
     private options;
     private cleanupCallbacks;
     private lastRootElement;
-    constructor(options?: Partial<PopUpManagerOptions> | undefined);
+    constructor(navController: NavController, options?: Partial<PopUpManagerOptions> | undefined);
     private attachGlobalListeners;
     /** Listen to events emitted from a {@link PopUpManager} instance. */
     listen<const EventDefinition extends Readonly<{

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

@@ -1,7 +1,7 @@
 import { assert } from '@augment-vir/assert';
 import { mapObjectValues } from '@augment-vir/common';
 import { findOverflowAncestor } from '@augment-vir/web';
-import { NavController, NavDirection } from 'device-navigation';
+import { NavDirection } from 'device-navigation';
 import { listenToPageActivation } from 'page-active';
 import { ListenTarget, defineTypedCustomEvent, defineTypedEvent, listenToGlobal, } from 'typed-event-target';
 /**
@@ -36,6 +36,7 @@ export class NavSelectEvent extends defineTypedCustomEvent()('nav-select') {
  * @category Pop Up
  */
 export class PopUpManager {
+    navController;
     listenTarget = new ListenTarget();
     options = {
         minDownSpace: 200,
@@ -44,11 +45,11 @@ export class PopUpManager {
     };
     cleanupCallbacks = [];
     lastRootElement;
-    constructor(options) {
+    constructor(navController, options) {
+        this.navController = navController;
         this.options = { ...this.options, ...options };
     }
-    attachGlobalListeners(rootElement) {
-        const navController = new NavController(rootElement);
+    attachGlobalListeners() {
         this.cleanupCallbacks = [
             listenToPageActivation(false, (isPageActive) => {
                 if (!isPageActive) {
@@ -72,7 +73,7 @@ export class PopUpManager {
                     if (keyCode === 'ArrowDown') {
                         event.stopImmediatePropagation();
                         event.preventDefault();
-                        navController.navigate({
+                        this.navController.navigate({
                             direction: NavDirection.Down,
                             allowWrapping: false,
                         });
@@ -80,7 +81,7 @@ export class PopUpManager {
                     else if (keyCode === 'ArrowUp') {
                         event.stopImmediatePropagation();
                         event.preventDefault();
-                        navController.navigate({
+                        this.navController.navigate({
                             direction: NavDirection.Up,
                             allowWrapping: false,
                         });
@@ -88,7 +89,7 @@ export class PopUpManager {
                     else if (keyCode === 'ArrowLeft') {
                         event.stopImmediatePropagation();
                         event.preventDefault();
-                        navController.navigate({
+                        this.navController.navigate({
                             direction: NavDirection.Left,
                             allowWrapping: false,
                         });
@@ -96,16 +97,15 @@ export class PopUpManager {
                     else if (keyCode === 'ArrowRight') {
                         event.stopImmediatePropagation();
                         event.preventDefault();
-                        navController.navigate({
+                        this.navController.navigate({
                             direction: NavDirection.Right,
                             allowWrapping: false,
                         });
                     }
                     else if (keyCode === 'Enter' || keyCode === 'Return') {
-                        const currentlyFocused = navController.getCurrentlyFocused();
-                        if (currentlyFocused) {
-                            navController.enterInto();
-                            this.listenTarget.dispatch(new NavSelectEvent({ detail: currentlyFocused.node.coords }));
+                        const result = this.navController.enterInto({ fallbackToActivate: true });
+                        if (result.success) {
+                            this.listenTarget.dispatch(new NavSelectEvent({ detail: result.coords }));
                             event.stopImmediatePropagation();
                             event.preventDefault();
                         }
@@ -156,7 +156,7 @@ export class PopUpManager {
         });
         const useUp = diff.top > diff.bottom + currentOptions.verticalDiffThreshold &&
             diff.bottom < currentOptions.minDownSpace;
-        this.attachGlobalListeners(rootElement);
+        this.attachGlobalListeners();
         return {
             popDown: !useUp,
             positions: {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "vira",
-    "version": "25.3.0",
+    "version": "25.4.0",
     "description": "A simple and highly versatile design system using element-vir.",
     "keywords": [
         "design",
@@ -37,36 +37,36 @@
         "test:docs": "virmator docs check"
     },
     "dependencies": {
-        "@augment-vir/assert": "^31.11.0",
-        "@augment-vir/common": "^31.11.0",
-        "@augment-vir/web": "^31.11.0",
+        "@augment-vir/assert": "^31.18.0",
+        "@augment-vir/common": "^31.18.0",
+        "@augment-vir/web": "^31.18.0",
         "colorjs.io": "^0.5.2",
         "date-vir": "^7.3.1",
-        "device-navigation": "^3.1.1",
+        "device-navigation": "^4.1.2",
         "lit-css-vars": "^3.0.11",
         "observavir": "^2.0.5",
         "page-active": "^1.0.1",
         "spa-router-vir": "^5.3.1",
-        "type-fest": "^4.40.0",
-        "typed-event-target": "^4.0.3"
+        "type-fest": "^4.41.0",
+        "typed-event-target": "^4.0.4"
     },
     "devDependencies": {
-        "@augment-vir/test": "^31.11.0",
+        "@augment-vir/test": "^31.18.0",
         "@web/dev-server-esbuild": "^1.0.4",
         "@web/test-runner": "^0.20.1",
         "@web/test-runner-commands": "^0.9.0",
         "@web/test-runner-playwright": "^0.11.0",
         "@web/test-runner-visual-regression": "^0.10.0",
-        "esbuild": "^0.25.2",
+        "esbuild": "^0.25.4",
         "istanbul-smart-text-reporter": "^1.1.5",
         "markdown-code-example-inserter": "^3.0.3",
-        "typedoc": "^0.28.2",
+        "typedoc": "^0.28.4",
         "typescript": "5.8.3",
-        "vite": "^6.2.6",
+        "vite": "^6.3.5",
         "vite-tsconfig-paths": "^5.1.4"
     },
     "peerDependencies": {
-        "element-vir": "^25.3.0"
+        "element-vir": "^25.4.0"
     },
     "engines": {
         "node": ">=22"