@aceshooting/lyra-ui 8.2.1 → 8.2.2

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## 8.2.2
+
+### Patch Changes
+
+- f0a41be: Fix: `<lr-input>` now forwards `name` and a host-supplied `id` to its internal native `<input>`, restoring password-manager autofill/save detection for shadow-DOM-aware password managers that key field detection off the actual control's `name`/`id` rather than `autocomplete` alone. The internal `<label for>` tracks whichever id is in use. Leaving `id` unset keeps the internal input at `id="input"`, unchanged from before.
+
 ## 8.2.1
 
 ### Patch Changes

package/dist/components/forms/input/input.class.d.ts

@@ -246,6 +246,15 @@ export declare class LyraInput extends LyraInput_base {
     private touched;
     private readonly slotPresence;
     private inputEl?;
+    /** Id of the internal native `<input>` (and the `for` of its paired `<label>`), so a
+     *  shadow-DOM-aware password manager keys its field detection off the same id the consumer put
+     *  on the host, rather than a fixed literal. Falls back to `"input"` when the host carries no
+     *  `id`, leaving the rendered output byte-identical to before this existed. `id` is a plain
+     *  inherited DOM property rather than a reactive `@property`, so a host `id` set declaratively in
+     *  markup is picked up on first render (the native IDL reflects the parsed attribute before Lit's
+     *  own `render()` runs); mutating `el.id` after first render only takes effect on this component's
+     *  next unrelated re-render. */
+    private get inputId();
     constructor();
     formResetCallback(): void;
     /** The internal native `<input>` element, for direct DOM access — mirrors `<lr-textarea>`'s own `input` getter. */

package/dist/components/forms/input/input.class.js

@@ -1,6 +1,6 @@
-var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3?target:desc===null?desc=Object.getOwnPropertyDescriptor(target,key):desc,d;if(typeof Reflect==="object"&&typeof Reflect.decorate==="function")r=Reflect.decorate(decorators,target,key,desc);else for(var i=decorators.length-1;i>=0;i--)if(d=decorators[i])r=(c<3?d(r):c>3?d(target,key,r):d(target,key))||r;return c>3&&r&&Object.defineProperty(target,key,r),r};import{html,nothing}from"lit";import{property,query,state}from"lit/decorators.js";import{LyraElement}from"../../../internal/lyra-element.js";import{FormAssociated,isBarredFromValidation}from"../../../internal/form-associated.js";import{SET_ANCHORED_VALIDITY}from"../../../internal/anchored-validity.js";import{lengthViolations}from"../../../internal/length-constraints.js";import{closeIcon,eyeIcon,eyeOffIcon}from"../../../internal/icons.js";import{styles}from"./input.styles.js";import{sizes}from"../../../internal/sizes.styles.js";import{autocorrectConverter,normalizeAutocorrect,spellcheckConverter}from"../../../internal/converters.js";import{finiteCount}from"../../../internal/numbers.js";import{submitOnEnter}from"../../../internal/submit-on-enter.js";import{dispatchNativeEvent,dispatchNativeInputEvent,relayNativeEvent}from"../../../internal/native-event-relay.js";import{SlotPresenceController}from"../../../internal/slot-presence-controller.js";import{LYRA_DEFAULT_clear,LYRA_DEFAULT_collapse,LYRA_DEFAULT_date,LYRA_DEFAULT_details,LYRA_DEFAULT_fieldRequired,LYRA_DEFAULT_hidePassword,LYRA_DEFAULT_inputLabel,LYRA_DEFAULT_open,LYRA_DEFAULT_restore,LYRA_DEFAULT_search,LYRA_DEFAULT_select,LYRA_DEFAULT_showPassword,LYRA_DEFAULT_valueInvalid}from"../../../internal/default-strings.generated.js";const LENGTH_CONSTRAINED_TYPES=["text","password","email","search","tel","url"];class LyraInputBase extends LyraElement{}class LyraInput extends FormAssociated(LyraInputBase){static{this.defaultStrings={...super.defaultStrings,clear:LYRA_DEFAULT_clear,collapse:LYRA_DEFAULT_collapse,date:LYRA_DEFAULT_date,details:LYRA_DEFAULT_details,fieldRequired:LYRA_DEFAULT_fieldRequired,hidePassword:LYRA_DEFAULT_hidePassword,inputLabel:LYRA_DEFAULT_inputLabel,open:LYRA_DEFAULT_open,restore:LYRA_DEFAULT_restore,search:LYRA_DEFAULT_search,select:LYRA_DEFAULT_select,showPassword:LYRA_DEFAULT_showPassword,valueInvalid:LYRA_DEFAULT_valueInvalid}}static{this.styles=[LyraElement.styles,sizes,styles]}get value(){return super.value}set value(next){super.value=next??""}get autocorrect(){return this.autocorrectValue}set autocorrect(next){this.autocorrectValue=normalizeAutocorrect(next);this.requestUpdate()}get inputmode(){return this.inputMode}set inputmode(next){this.inputMode=next??""}get enterkeyhint(){return this.enterKeyHint}set enterkeyhint(next){this.enterKeyHint=next??""}get defaultValueAlias(){return this.defaultValue}set defaultValueAlias(next){this.defaultValue=next??""}constructor(){super();this.type="text";this.size="m";this.appearance="outlined";this.filled=false;this.pill=false;this.placeholder="";this.clearable=false;this.withClear=false;this.readonly=false;this.label="";this.hint="";this.helpText="";this.withLabel=false;this.withHint=false;this.errorText="";this.accessibleLabel=null;this.autocomplete="";this.title="";this.autofocus=false;this.spellcheck=true;this.autocapitalize="";this.autocorrectValue=true;this.inputMode="";this.enterKeyHint="";this.passwordToggle=false;this.passwordVisible=false;this.withoutSpinButtons=false;this.noSpinButtons=false;this.touched=false;this.slotPresence=new SlotPresenceController(this);this.onInput=event=>{if(!this.inputEl)return;this.value=this.inputEl.value;relayNativeEvent(this,event);this.emit("lr-input",{value:this.value})};this.onChange=event=>{if(!this.inputEl)return;this.value=this.inputEl.value;relayNativeEvent(this,event);this.emit("lr-change",{value:this.value})};this.onFocus=event=>{relayNativeEvent(this,event);this.emit("lr-focus")};this.onBlur=event=>{if(!this.effectiveDisabled)this.touched=true;relayNativeEvent(this,event);this.emit("lr-blur")};this.onKeyDown=event=>{if(this.effectiveDisabled||this.readonly)return;submitOnEnter(this,event)};this.onTogglePasswordVisible=()=>{this.passwordVisible=!this.passwordVisible};this.onClear=()=>{if(this.effectiveDisabled||this.readonly||this.value==="")return;this.value="";if(this.inputEl)this.inputEl.value="";dispatchNativeInputEvent(this,{inputType:"deleteContentBackward"});this.emit("lr-input",{value:this.value});dispatchNativeEvent(this,"change");this.emit("lr-change",{value:this.value});this.emit("lr-clear");this.inputEl?.focus()};this.addEventListener("invalid",()=>{this.touched=true})}formResetCallback(){super.formResetCallback();this.touched=false}get input(){return this.inputEl??null}click(){if(!this.effectiveDisabled)this.inputEl?.click()}focus(options){if(!this.effectiveDisabled)this.inputEl?.focus(options)}blur(){this.inputEl?.blur()}select(){this.inputEl?.select()}get valueAsDate(){const native=this.inputEl;if(!native)return null;if(native.value!==this.value)native.value=this.value;return native.valueAsDate}set valueAsDate(next){const native=this.inputEl;if(!native)return;native.valueAsDate=next;this.value=native.value}get valueAsNumber(){const native=this.inputEl;if(!native)return Number.NaN;if(native.value!==this.value)native.value=this.value;return native.valueAsNumber}set valueAsNumber(next){const native=this.inputEl;if(!native)return;native.valueAsNumber=next;this.value=native.value}showPicker(){const native=this.inputEl;if(!native||this.effectiveDisabled||this.readonly)return;if(!("showPicker"in HTMLInputElement.prototype))return;try{native.showPicker()}catch{}}stepUp(steps=1){this.applyStep("up",steps)}stepDown(steps=1){this.applyStep("down",steps)}applyStep(direction,steps){const native=this.inputEl;if(!native||this.effectiveDisabled||this.readonly)return;const count=finiteCount(steps,1);if(count===0)return;try{if(direction==="up")native.stepUp(count);else native.stepDown(count)}catch{return}if(this.value!==native.value)this.value=native.value}get selectionStart(){return this.inputEl?.selectionStart??null}set selectionStart(value){if(this.inputEl)this.inputEl.selectionStart=value??0}get selectionEnd(){return this.inputEl?.selectionEnd??null}set selectionEnd(value){if(this.inputEl)this.inputEl.selectionEnd=value??0}setSelectionRange(selectionStart,selectionEnd,selectionDirection="none"){this.inputEl?.setSelectionRange(selectionStart,selectionEnd,selectionDirection)}setRangeText(replacement,start,end,selectMode="preserve"){const input=this.inputEl;if(!input)return;if(start===void 0||end===void 0){input.setRangeText(replacement)}else{input.setRangeText(replacement,start,end,selectMode)}this.value=input.value}updateValidity(){const native=this.inputEl;if(isBarredFromValidation(this,this.internals)){this[SET_ANCHORED_VALIDITY]({});return}if(!native){if(this.required&&this.value===""){this[SET_ANCHORED_VALIDITY]({valueMissing:true},this.localize("fieldRequired"))}else{this[SET_ANCHORED_VALIDITY]({})}return}if(native.value!==this.value)native.value=this.value;const sanitizedAway=this.value!==""&&native.value==="";const v=native.validity;const own=LENGTH_CONSTRAINED_TYPES.includes(this.type)?lengthViolations(this.value,this.minlength,this.maxlength):{tooShort:false,tooLong:false};const tooShort=v.tooShort||own.tooShort;const tooLong=v.tooLong||own.tooLong;if(v.valid&&!tooShort&&!tooLong){if(sanitizedAway){this[SET_ANCHORED_VALIDITY]({badInput:true},this.localize("valueInvalid"));return}this[SET_ANCHORED_VALIDITY]({});return}this[SET_ANCHORED_VALIDITY]({valueMissing:v.valueMissing,typeMismatch:v.typeMismatch,rangeUnderflow:v.rangeUnderflow,rangeOverflow:v.rangeOverflow,stepMismatch:v.stepMismatch,tooShort,tooLong,patternMismatch:v.patternMismatch,badInput:v.badInput},native.validationMessage||this.localize("valueInvalid"))}updated(changed){super.updated(changed);if(changed.has("value")){if(this.value==="")this.internals.states.add("blank");else this.internals.states.delete("blank")}if(changed.has("type")||changed.has("min")||changed.has("max")||changed.has("step")||changed.has("minlength")||changed.has("maxlength")||changed.has("pattern")||changed.has("readonly")){this.updateValidity()}}renderControls(){return nothing}get inputWrapperParts(){return"base form-control-input input-wrapper"}render(){const hasHint=this.slotPresence.has("hint")||this.slotPresence.has("help-text")||this.hint.length>0||this.helpText.length>0||this.withHint;const hasError=this.slotPresence.has("error")||this.errorText.length>0;const hasLabel=this.slotPresence.has("label")||this.label.length>0||this.withLabel;const describedBy=[hasError?"input-error":"",hasHint?"input-hint":""].filter(Boolean).join(" ");const isPassword=this.type==="password";const showPasswordToggle=isPassword&&this.passwordToggle;const nativeType=isPassword&&this.passwordVisible?"text":this.type;const canClear=(this.clearable||this.withClear)&&(this.type==="text"||this.type==="search")&&this.value!=="";return html`
+var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3?target:desc===null?desc=Object.getOwnPropertyDescriptor(target,key):desc,d;if(typeof Reflect==="object"&&typeof Reflect.decorate==="function")r=Reflect.decorate(decorators,target,key,desc);else for(var i=decorators.length-1;i>=0;i--)if(d=decorators[i])r=(c<3?d(r):c>3?d(target,key,r):d(target,key))||r;return c>3&&r&&Object.defineProperty(target,key,r),r};import{html,nothing}from"lit";import{property,query,state}from"lit/decorators.js";import{LyraElement}from"../../../internal/lyra-element.js";import{FormAssociated,isBarredFromValidation}from"../../../internal/form-associated.js";import{SET_ANCHORED_VALIDITY}from"../../../internal/anchored-validity.js";import{lengthViolations}from"../../../internal/length-constraints.js";import{closeIcon,eyeIcon,eyeOffIcon}from"../../../internal/icons.js";import{styles}from"./input.styles.js";import{sizes}from"../../../internal/sizes.styles.js";import{autocorrectConverter,normalizeAutocorrect,spellcheckConverter}from"../../../internal/converters.js";import{finiteCount}from"../../../internal/numbers.js";import{submitOnEnter}from"../../../internal/submit-on-enter.js";import{dispatchNativeEvent,dispatchNativeInputEvent,relayNativeEvent}from"../../../internal/native-event-relay.js";import{SlotPresenceController}from"../../../internal/slot-presence-controller.js";import{LYRA_DEFAULT_clear,LYRA_DEFAULT_collapse,LYRA_DEFAULT_date,LYRA_DEFAULT_details,LYRA_DEFAULT_fieldRequired,LYRA_DEFAULT_hidePassword,LYRA_DEFAULT_inputLabel,LYRA_DEFAULT_open,LYRA_DEFAULT_restore,LYRA_DEFAULT_search,LYRA_DEFAULT_select,LYRA_DEFAULT_showPassword,LYRA_DEFAULT_valueInvalid}from"../../../internal/default-strings.generated.js";const LENGTH_CONSTRAINED_TYPES=["text","password","email","search","tel","url"];class LyraInputBase extends LyraElement{}class LyraInput extends FormAssociated(LyraInputBase){static{this.defaultStrings={...super.defaultStrings,clear:LYRA_DEFAULT_clear,collapse:LYRA_DEFAULT_collapse,date:LYRA_DEFAULT_date,details:LYRA_DEFAULT_details,fieldRequired:LYRA_DEFAULT_fieldRequired,hidePassword:LYRA_DEFAULT_hidePassword,inputLabel:LYRA_DEFAULT_inputLabel,open:LYRA_DEFAULT_open,restore:LYRA_DEFAULT_restore,search:LYRA_DEFAULT_search,select:LYRA_DEFAULT_select,showPassword:LYRA_DEFAULT_showPassword,valueInvalid:LYRA_DEFAULT_valueInvalid}}static{this.styles=[LyraElement.styles,sizes,styles]}get value(){return super.value}set value(next){super.value=next??""}get autocorrect(){return this.autocorrectValue}set autocorrect(next){this.autocorrectValue=normalizeAutocorrect(next);this.requestUpdate()}get inputmode(){return this.inputMode}set inputmode(next){this.inputMode=next??""}get enterkeyhint(){return this.enterKeyHint}set enterkeyhint(next){this.enterKeyHint=next??""}get defaultValueAlias(){return this.defaultValue}set defaultValueAlias(next){this.defaultValue=next??""}get inputId(){return this.id||"input"}constructor(){super();this.type="text";this.size="m";this.appearance="outlined";this.filled=false;this.pill=false;this.placeholder="";this.clearable=false;this.withClear=false;this.readonly=false;this.label="";this.hint="";this.helpText="";this.withLabel=false;this.withHint=false;this.errorText="";this.accessibleLabel=null;this.autocomplete="";this.title="";this.autofocus=false;this.spellcheck=true;this.autocapitalize="";this.autocorrectValue=true;this.inputMode="";this.enterKeyHint="";this.passwordToggle=false;this.passwordVisible=false;this.withoutSpinButtons=false;this.noSpinButtons=false;this.touched=false;this.slotPresence=new SlotPresenceController(this);this.onInput=event=>{if(!this.inputEl)return;this.value=this.inputEl.value;relayNativeEvent(this,event);this.emit("lr-input",{value:this.value})};this.onChange=event=>{if(!this.inputEl)return;this.value=this.inputEl.value;relayNativeEvent(this,event);this.emit("lr-change",{value:this.value})};this.onFocus=event=>{relayNativeEvent(this,event);this.emit("lr-focus")};this.onBlur=event=>{if(!this.effectiveDisabled)this.touched=true;relayNativeEvent(this,event);this.emit("lr-blur")};this.onKeyDown=event=>{if(this.effectiveDisabled||this.readonly)return;submitOnEnter(this,event)};this.onTogglePasswordVisible=()=>{this.passwordVisible=!this.passwordVisible};this.onClear=()=>{if(this.effectiveDisabled||this.readonly||this.value==="")return;this.value="";if(this.inputEl)this.inputEl.value="";dispatchNativeInputEvent(this,{inputType:"deleteContentBackward"});this.emit("lr-input",{value:this.value});dispatchNativeEvent(this,"change");this.emit("lr-change",{value:this.value});this.emit("lr-clear");this.inputEl?.focus()};this.addEventListener("invalid",()=>{this.touched=true})}formResetCallback(){super.formResetCallback();this.touched=false}get input(){return this.inputEl??null}click(){if(!this.effectiveDisabled)this.inputEl?.click()}focus(options){if(!this.effectiveDisabled)this.inputEl?.focus(options)}blur(){this.inputEl?.blur()}select(){this.inputEl?.select()}get valueAsDate(){const native=this.inputEl;if(!native)return null;if(native.value!==this.value)native.value=this.value;return native.valueAsDate}set valueAsDate(next){const native=this.inputEl;if(!native)return;native.valueAsDate=next;this.value=native.value}get valueAsNumber(){const native=this.inputEl;if(!native)return Number.NaN;if(native.value!==this.value)native.value=this.value;return native.valueAsNumber}set valueAsNumber(next){const native=this.inputEl;if(!native)return;native.valueAsNumber=next;this.value=native.value}showPicker(){const native=this.inputEl;if(!native||this.effectiveDisabled||this.readonly)return;if(!("showPicker"in HTMLInputElement.prototype))return;try{native.showPicker()}catch{}}stepUp(steps=1){this.applyStep("up",steps)}stepDown(steps=1){this.applyStep("down",steps)}applyStep(direction,steps){const native=this.inputEl;if(!native||this.effectiveDisabled||this.readonly)return;const count=finiteCount(steps,1);if(count===0)return;try{if(direction==="up")native.stepUp(count);else native.stepDown(count)}catch{return}if(this.value!==native.value)this.value=native.value}get selectionStart(){return this.inputEl?.selectionStart??null}set selectionStart(value){if(this.inputEl)this.inputEl.selectionStart=value??0}get selectionEnd(){return this.inputEl?.selectionEnd??null}set selectionEnd(value){if(this.inputEl)this.inputEl.selectionEnd=value??0}setSelectionRange(selectionStart,selectionEnd,selectionDirection="none"){this.inputEl?.setSelectionRange(selectionStart,selectionEnd,selectionDirection)}setRangeText(replacement,start,end,selectMode="preserve"){const input=this.inputEl;if(!input)return;if(start===void 0||end===void 0){input.setRangeText(replacement)}else{input.setRangeText(replacement,start,end,selectMode)}this.value=input.value}updateValidity(){const native=this.inputEl;if(isBarredFromValidation(this,this.internals)){this[SET_ANCHORED_VALIDITY]({});return}if(!native){if(this.required&&this.value===""){this[SET_ANCHORED_VALIDITY]({valueMissing:true},this.localize("fieldRequired"))}else{this[SET_ANCHORED_VALIDITY]({})}return}if(native.value!==this.value)native.value=this.value;const sanitizedAway=this.value!==""&&native.value==="";const v=native.validity;const own=LENGTH_CONSTRAINED_TYPES.includes(this.type)?lengthViolations(this.value,this.minlength,this.maxlength):{tooShort:false,tooLong:false};const tooShort=v.tooShort||own.tooShort;const tooLong=v.tooLong||own.tooLong;if(v.valid&&!tooShort&&!tooLong){if(sanitizedAway){this[SET_ANCHORED_VALIDITY]({badInput:true},this.localize("valueInvalid"));return}this[SET_ANCHORED_VALIDITY]({});return}this[SET_ANCHORED_VALIDITY]({valueMissing:v.valueMissing,typeMismatch:v.typeMismatch,rangeUnderflow:v.rangeUnderflow,rangeOverflow:v.rangeOverflow,stepMismatch:v.stepMismatch,tooShort,tooLong,patternMismatch:v.patternMismatch,badInput:v.badInput},native.validationMessage||this.localize("valueInvalid"))}updated(changed){super.updated(changed);if(changed.has("value")){if(this.value==="")this.internals.states.add("blank");else this.internals.states.delete("blank")}if(changed.has("type")||changed.has("min")||changed.has("max")||changed.has("step")||changed.has("minlength")||changed.has("maxlength")||changed.has("pattern")||changed.has("readonly")){this.updateValidity()}}renderControls(){return nothing}get inputWrapperParts(){return"base form-control-input input-wrapper"}render(){const hasHint=this.slotPresence.has("hint")||this.slotPresence.has("help-text")||this.hint.length>0||this.helpText.length>0||this.withHint;const hasError=this.slotPresence.has("error")||this.errorText.length>0;const hasLabel=this.slotPresence.has("label")||this.label.length>0||this.withLabel;const describedBy=[hasError?"input-error":"",hasHint?"input-hint":""].filter(Boolean).join(" ");const isPassword=this.type==="password";const showPasswordToggle=isPassword&&this.passwordToggle;const nativeType=isPassword&&this.passwordVisible?"text":this.type;const canClear=(this.clearable||this.withClear)&&(this.type==="text"||this.type==="search")&&this.value!=="";return html`
       <div part="form-control">
-        <label part="form-control-label" for="input" ?hidden=${!hasLabel}>
+        <label part="form-control-label" for=${this.inputId} ?hidden=${!hasLabel}>
           <span part="label">${this.label}<slot name="label"></slot></span>
         </label>
         <div part=${this.inputWrapperParts}>
@@ -12,9 +12,10 @@ var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3
             <slot part="prefix" name="prefix"></slot>
           </span>
           <input
-            id="input"
+            id=${this.inputId}
             part="input"
             type=${nativeType}
+            name=${this.name||nothing}
             placeholder=${this.placeholder}
             title=${this.title||nothing}
             aria-label=${this.accessibleLabel||(hasLabel?nothing:this.placeholder||this.localize("inputLabel"))}

package/dist/internal/package-metadata.d.ts

@@ -3,4 +3,4 @@
  * Run `pnpm package-metadata` after changing package identity or version.
  */
 export declare const LYRA_PACKAGE_NAME: "@aceshooting/lyra-ui";
-export declare const LYRA_PACKAGE_VERSION: "8.2.1";
+export declare const LYRA_PACKAGE_VERSION: "8.2.2";

package/dist/internal/package-metadata.js

@@ -1 +1 @@
-const LYRA_PACKAGE_NAME="@aceshooting/lyra-ui";const LYRA_PACKAGE_VERSION="8.2.1";export{LYRA_PACKAGE_NAME,LYRA_PACKAGE_VERSION};
+const LYRA_PACKAGE_NAME="@aceshooting/lyra-ui";const LYRA_PACKAGE_VERSION="8.2.2";export{LYRA_PACKAGE_NAME,LYRA_PACKAGE_VERSION};

package/llms/components/lr-input.md

@@ -42,6 +42,12 @@ see "Enter-to-submit" below for the exact rules and for which controls deliberat
 - `value: string = ''` (from `FormAssociated`)
 - `defaultValue: string = ''` — reset value, backed by the standard `value` content attribute;
   `default-value` is accepted as a Shoelace attribute alias
+- `name: string` (from `FormAssociated`) and the plain inherited `id` are both forwarded to the
+  internal native `<input>` (previously the internal input carried neither, only a fixed
+  `id="input"`), so shadow-DOM-aware password managers that key field detection off the actual
+  control's own `name`/`id` — not `autocomplete` alone — recognize `<lr-input>` fields. The
+  internal `<label for>` tracks whichever id is in use. Leaving `id` unset on the host keeps the
+  internal input at `id="input"`, identical to before
 - `placeholder: string = ''`
 - `clearable: boolean = false` (reflected) — shows a localized clear action while a `text` or
   `search` input has a value; clearing preserves input focus

package/llms-full.txt

@@ -3393,6 +3393,12 @@ see "Enter-to-submit" below for the exact rules and for which controls deliberat
 - `value: string = ''` (from `FormAssociated`)
 - `defaultValue: string = ''` — reset value, backed by the standard `value` content attribute;
   `default-value` is accepted as a Shoelace attribute alias
+- `name: string` (from `FormAssociated`) and the plain inherited `id` are both forwarded to the
+  internal native `<input>` (previously the internal input carried neither, only a fixed
+  `id="input"`), so shadow-DOM-aware password managers that key field detection off the actual
+  control's own `name`/`id` — not `autocomplete` alone — recognize `<lr-input>` fields. The
+  internal `<label for>` tracks whichever id is in use. Leaving `id` unset on the host keeps the
+  internal input at `id="input"`, identical to before
 - `placeholder: string = ''`
 - `clearable: boolean = false` (reflected) — shows a localized clear action while a `text` or
   `search` input has a value; clearing preserves input focus

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aceshooting/lyra-ui",
-  "version": "8.2.1",
+  "version": "8.2.2",
   "description": "Free, independent Lit web components: an open-source alternative to Shoelace and Web Awesome with accessible forms, dashboards, charts, and agent UI.",
   "keywords": [
     "web-components",

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@aceshooting/lyra-ui",
-  "version": "8.2.1",
+  "version": "8.2.2",
   "description-markup": "markdown",
   "contributions": {
     "html": {