vira 25.4.2 → 25.4.3

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

@@ -1,3 +1,4 @@
+import { assertWrap } from '@augment-vir/assert';
 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';
@@ -95,7 +96,7 @@ export const ViraInput = defineViraElement()({
                 max-height: 100%;
             }
 
-            ${hostClasses['vira-input-clear-button-shown'].selector} label {
+            ${hostClasses['vira-input-clear-button-shown'].selector} .input-wrapper {
                 padding-right: 4px;
             }
 
@@ -122,7 +123,7 @@ export const ViraInput = defineViraElement()({
                 pointer-events: none;
             }
 
-            .label-border {
+            .wrapper-border {
                 top: -1px;
                 left: -1px;
                 border: 1px solid ${cssVars['vira-input-border-color'].value};
@@ -130,7 +131,7 @@ export const ViraInput = defineViraElement()({
                     ${viraAnimationDurations['vira-interaction-animation-duration'].value};
             }
 
-            label {
+            .input-wrapper {
                 ${noNativeFormStyles};
                 max-width: 100%;
                 flex-grow: 1;
@@ -142,7 +143,7 @@ export const ViraInput = defineViraElement()({
                 border-radius: ${viraBorders['vira-form-input-radius'].value};
                 background-color: ${cssVars['vira-input-background-color'].value};
                 /*
-                    Border colors are actually applied via the .label-border class. However, we must
+                    Border colors are actually applied via the .wrapper-border class. However, we must
                     apply a border here still so that it takes up space.
                 */
                 border: 1px solid transparent;
@@ -253,7 +254,7 @@ export const ViraInput = defineViraElement()({
         'vira-input-fit-text': ({ inputs }) => !!inputs.fitText,
         'vira-input-clear-button-shown': ({ inputs }) => !!inputs.showClearButton,
     },
-    render: ({ inputs, dispatch, state, updateState, events }) => {
+    render: ({ inputs, dispatch, state, updateState, events, host }) => {
         const { filtered: filteredValue } = filterTextInputValue({
             value: inputs.value,
             allowed: inputs.allowedInputs,
@@ -275,8 +276,19 @@ export const ViraInput = defineViraElement()({
              * spellchecking).
              */
             inputs.type === ViraInputType.Password;
+        /**
+         * Don't use a wrapping `<label>` element here because it will mess with browser and
+         * password manager autocomplete for passwords and usernames.
+         */
         return html `
-            <label>
+            <span
+                class="input-wrapper"
+                ${listen('mouseup', () => {
+            assertWrap
+                .instanceOf(host.shadowRoot.querySelector('input'), HTMLInputElement)
+                .focus();
+        })}
+            >
                 ${iconTemplate}
                 ${renderIf(!!inputs.fitText, html `
                         <span
@@ -353,8 +365,8 @@ export const ViraInput = defineViraElement()({
                     siblings of the focused <input> element.
                 -->
                 <div class="border-style focus-border"></div>
-                <div class="border-style label-border"></div>
-            </label>
+                <div class="border-style wrapper-border"></div>
+            </span>
         `;
     },
 });

package/package.json

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