vira 25.3.1 → 25.4.1

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

@@ -1,6 +1,6 @@
 import { assert } from '@augment-vir/assert';
 import { NavController } from 'device-navigation';
-import { classMap, css, defineElementEvent, html, ifDefined, listen, renderIf, testId, } from 'element-vir';
+import { classMap, css, defineElementEvent, html, ifDefined, listen, nothing, renderIf, testId, } from 'element-vir';
 import { ChevronUp24Icon } from '../../icons/index.js';
 import { viraBorders } from '../../styles/border.js';
 import { createFocusStyles, viraFocusCssVars } from '../../styles/focus.js';
@@ -227,7 +227,7 @@ export const ViraDropdown = defineViraElement()({
                       ${testId(viraDropdownTestIds.icon)}
                   ></${ViraIcon}>
               `
-            : '';
+            : nothing;
         const positionerStyles = state.showPopUpResult
             ? state.showPopUpResult.popDown
                 ? /** Dropdown going down position. */
@@ -249,7 +249,7 @@ export const ViraDropdown = defineViraElement()({
                           ${inputs.selectionPrefix}
                       </span>
                   `
-            : '';
+            : nothing;
         const selectionDisplay = shouldUsePlaceholder
             ? inputs.placeholder || ''
             : selectedOptions.map((item) => item.label).join(', ');

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.js

@@ -1,4 +1,4 @@
-import { css, html } from 'element-vir';
+import { css, html, nothing } from 'element-vir';
 import { viraBorders } from '../styles/border.js';
 import { viraDisabledStyles } from '../styles/disabled.js';
 import { viraAnimationDurations } from '../styles/durations.js';
@@ -114,12 +114,12 @@ export const ViraButton = defineViraElement()({
                 icon: inputs.icon,
             })}></${ViraIcon}>
               `
-            : '';
+            : nothing;
         const textTemplate = inputs.text
             ? html `
                   <span class="text-template">${inputs.text}</span>
               `
-            : '';
+            : nothing;
         return html `
             <button ?disabled=${inputs.disabled}>${iconTemplate} ${textTemplate}</button>
         `;

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, ifDefined, 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';
@@ -263,12 +263,12 @@ export const ViraInput = defineViraElement()({
             ? html `
                   <${ViraIcon.assign({ icon: inputs.icon })} class="left-side-icon"></${ViraIcon}>
               `
-            : '';
+            : nothing;
         const forcedInputWidthStyles = inputs.fitText
             ? css `
                   width: ${state.forcedInputWidth}px;
               `
-            : '';
+            : nothing;
         const shouldBlockBrowserHelps = inputs.disableBrowserHelps ||
             /**
              * Some browsers leaks passwords with their browser helps (like Chrome with
@@ -285,16 +285,16 @@ export const ViraInput = defineViraElement()({
             updateState({ forcedInputWidth: contentRect.width });
         })}
                         >
-                            <pre>${filteredValue || inputs.placeholder || ''}</pre>
+                            <pre>${filteredValue || inputs.placeholder || nothing}</pre>
                         </span>
                     `)}
                 <input
                     type=${calculateEffectiveInputType(inputs.type, state.showPassword)}
                     style=${forcedInputWidthStyles}
-                    autocomplete=${shouldBlockBrowserHelps ? 'off' : ''}
-                    autocorrect=${shouldBlockBrowserHelps ? 'off' : ''}
-                    autocapitalize=${shouldBlockBrowserHelps ? 'off' : ''}
-                    spellcheck=${shouldBlockBrowserHelps ? 'false' : ''}
+                    autocomplete=${ifDefined(shouldBlockBrowserHelps ? 'off' : undefined)}
+                    autocorrect=${ifDefined(shouldBlockBrowserHelps ? 'off' : undefined)}
+                    autocapitalize=${ifDefined(shouldBlockBrowserHelps ? 'off' : undefined)}
+                    spellcheck=${ifDefined(shouldBlockBrowserHelps ? 'false' : undefined)}
                     ?disabled=${inputs.disabled}
                     .value=${filteredValue}
                     ${listen('input', (event) => {
@@ -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/package.json

@@ -1,6 +1,6 @@
 {
     "name": "vira",
-    "version": "25.3.1",
+    "version": "25.4.1",
     "description": "A simple and highly versatile design system using element-vir.",
     "keywords": [
         "design",
@@ -37,23 +37,23 @@
         "test:docs": "virmator docs check"
     },
     "dependencies": {
-        "@augment-vir/assert": "^31.18.0",
-        "@augment-vir/common": "^31.18.0",
-        "@augment-vir/web": "^31.18.0",
+        "@augment-vir/assert": "^31.20.0",
+        "@augment-vir/common": "^31.20.0",
+        "@augment-vir/web": "^31.20.0",
         "colorjs.io": "^0.5.2",
         "date-vir": "^7.3.1",
-        "device-navigation": "^4.1.2",
+        "device-navigation": "^4.4.0",
         "lit-css-vars": "^3.0.11",
         "observavir": "^2.0.5",
         "page-active": "^1.0.1",
         "spa-router-vir": "^5.3.1",
         "type-fest": "^4.41.0",
-        "typed-event-target": "^4.0.4"
+        "typed-event-target": "^4.1.0"
     },
     "devDependencies": {
-        "@augment-vir/test": "^31.18.0",
+        "@augment-vir/test": "^31.20.0",
         "@web/dev-server-esbuild": "^1.0.4",
-        "@web/test-runner": "^0.20.1",
+        "@web/test-runner": "^0.20.2",
         "@web/test-runner-commands": "^0.9.0",
         "@web/test-runner-playwright": "^0.11.0",
         "@web/test-runner-visual-regression": "^0.10.0",
@@ -66,7 +66,7 @@
         "vite-tsconfig-paths": "^5.1.4"
     },
     "peerDependencies": {
-        "element-vir": "^25.3.1"
+        "element-vir": "^25.4.1"
     },
     "engines": {
         "node": ">=22"