vira 25.3.1 → 25.4.0

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

@@ -1,6 +1,6 @@
 {
     "name": "vira",
-    "version": "25.3.1",
+    "version": "25.4.0",
     "description": "A simple and highly versatile design system using element-vir.",
     "keywords": [
         "design",
@@ -66,7 +66,7 @@
         "vite-tsconfig-paths": "^5.1.4"
     },
     "peerDependencies": {
-        "element-vir": "^25.3.1"
+        "element-vir": "^25.4.0"
     },
     "engines": {
         "node": ">=22"