@aceshooting/lyra-ui 13.0.1 → 14.1.0

package/dist/components/forms/code-editor/code-editor.class.d.ts

@@ -12,18 +12,24 @@ import{type TemplateResult,type PropertyValues}from'lit';import{LyraElement}from
 * Pressing Escape releases the next Tab for native forward traversal instead of indenting; typing
 * any other key, or focus leaving the editor, re-arms Tab indentation.
 * In narrow allocations label/hint/error chrome wraps at the host boundary, while unbroken source
-* remains reachable through the editor's internal scroll surface instead of widening the page.
+* remains reachable through the editor's one internal scroll surface instead of widening the page.
 * When a containing block gives the host a definite block size, the host, form-control, editor,
 * and textarea chain fills that allocation; without one, the editor remains content-sized above
 * its active `--lr-code-editor-min-block-size` floor.
 * The native textarea receives `required` and explicit stateful `aria-invalid`: visible error
 * chrome wins immediately, while intrinsic/custom invalidity is exposed only after interaction.
+* Form reset restores the default and pristine interaction feedback while required and custom
+* validity constraints remain. Removed label/hint/error attributes render as absent chrome.
+* Host `aria-describedby` references resolve onto the native textarea before local error/hint
+* guidance and remain current across target replacement, reconnect, and adoption.
 *
 * Tab-width precedence, highest first: an explicitly assigned `tabSize` (property or `tab-size`
 * attribute) wins over everything; otherwise a host-level `--lr-code-editor-tab-size` override
 * wins; otherwise the stylesheet's `:host` default of `2` applies. The property therefore stays the
 * primary knob, but it no longer silently shadows the token while it sits at its default -- see
 * `indentWidth` for how the same order drives the Tab key, not just the rendered tab stops.
+* Native text and its private measurement use the same tab width. Soft/hard wrapping fits the
+* editor allocation; unwrapped text and wrapped lines share the editor frame's scroll surface.
 * @customElement lr-code-editor
 * @slot label - Visible label content.
 * @slot hint - Supporting text.
@@ -40,7 +46,7 @@ import{type TemplateResult,type PropertyValues}from'lit';import{LyraElement}from
 * @csspart form-control - Outer wrapper.
 * @csspart form-control-label - Label. Also carries the `label` part token for compatibility.
 * @csspart label - Alias of `form-control-label`.
-* @csspart editor - Editor frame.
+* @csspart editor - Editor frame and the component's only scrollport.
 * @csspart gutter - Line-number gutter.
 * @csspart textarea - Native textarea.
 * @csspart hint - Supporting text.
@@ -97,7 +103,7 @@ resize:LyraCodeEditorResize;
 *  `'small'`/`'medium'`/`'large'` spellings of `s`/`m`/`l`; the two render identically. Governs
 *  the gutter's and textarea's padding and font size, plus the editor frame's minimum block
 *  size. */
-size:LyraSize;private wrapValue;get wrap():LyraCodeEditorWrap;set wrap(next:LyraCodeEditorWrap|string|null);spellcheck:boolean;autofocus:boolean;title:string;autocapitalize:string;autocomplete:string;inputMode:string;enterKeyHint:string;private autocorrectValue;get autocorrect():boolean;set autocorrect(next:boolean|string);get inputmode():string;set inputmode(next:string);get enterkeyhint():string;set enterkeyhint(next:string);accessibleLabel:string;private touched;private hasLabelSlot;private hasHintSlot;private hasErrorSlot;private textarea?;private editor?;private gutterWindowStart;
+size:LyraSize;private wrapValue;get wrap():LyraCodeEditorWrap;set wrap(next:LyraCodeEditorWrap|string|null);spellcheck:boolean;autofocus:boolean;title:string;autocapitalize:string;autocomplete:string;inputMode:string;enterKeyHint:string;private autocorrectValue;get autocorrect():boolean;set autocorrect(next:boolean|string);get inputmode():string;set inputmode(next:string);get enterkeyhint():string;set enterkeyhint(next:string);accessibleLabel:string;private touched;private hasLabelSlot;private hasHintSlot;private hasErrorSlot;private textarea?;private editor?;private gutter?;private caretMeasure?;private gutterWindowStart;private caretOffset;private externalDescriptionLease?;private textGeometryObserver?;private wrappedLineStarts?;connectedCallback():void;disconnectedCallback():void;adoptedCallback():void;private syncExternalDescription;private releaseExternalDescription;formResetCallback():void;
 /** The normalized live value. Native textarea line endings are always LF; the host, form state,
 * gutter and selection APIs use that same representation. */
 get value():string;set value(next:string|null);get defaultValue():string;set defaultValue(next:string|null);private normalizeLineEndings;
@@ -107,4 +113,10 @@ private submissionValue;private syncSubmissionValue;
 /** Direct access to the owned native textarea. */
 get input():HTMLTextAreaElement|null;
 /** Reads both component state and the UA's synchronous fieldset cascade before public actions. */
-private get liveDisabled();click():void;focus(options?:FocusOptions):void;blur():void;select():void;get selectionStart():number|null;set selectionStart(value:number|null);get selectionEnd():number|null;set selectionEnd(value:number|null);get selectionDirection():'forward'|'backward'|'none'|null;set selectionDirection(value:'forward'|'backward'|'none'|null);setSelectionRange(start:number,end:number,direction?:'forward'|'backward'|'none'):void;setRangeText(replacement:string,start?:number,end?:number,selectionMode?:SelectionMode):void;scrollPosition(position?:{top?:number;left?:number;}):{top:number;left:number;}|undefined;private onInput;private onChange;private onFocus;private onBlur;private tabBypassArmed;private onKeyDown;private onLabelSlotChange;private onHintSlotChange;private onErrorSlotChange;protected willUpdate(changed:PropertyValues):void;protected updated(changed:PropertyValues):void;protected updateValidity():void;private countLines;private onEditorScroll;private gutterRows;private fitToContent;render():TemplateResult;}declare global{interface HTMLElementTagNameMap{'lr-code-editor':LyraCodeEditor;}}export{};
+private get liveDisabled();click():void;focus(options?:FocusOptions):void;blur():void;select():void;get selectionStart():number|null;set selectionStart(value:number|null);get selectionEnd():number|null;set selectionEnd(value:number|null);get selectionDirection():'forward'|'backward'|'none'|null;set selectionDirection(value:'forward'|'backward'|'none'|null);setSelectionRange(start:number,end:number,direction?:'forward'|'backward'|'none'):void;setRangeText(replacement:string,start?:number,end?:number,selectionMode?:SelectionMode):void;
+/** Reads or sets the editor frame's physical scroll offsets. The private native textarea is
+* deliberately sized to its matching text measurement layer, so it never owns a competing scroll
+* range that could desynchronize the line-number gutter or a programmatic scroll. */
+scrollPosition(position?:{top?:number;left?:number;}):{top:number;left:number;}|undefined;private onInput;private onChange;private onFocus;private onBlur;private tabBypassArmed;private onKeyDown;private onCaretChange;private syncCaretOffset;private scrollCaretIntoView;private onLabelSlotChange;private onHintSlotChange;private onErrorSlotChange;protected willUpdate(changed:PropertyValues):void;protected updated(changed:PropertyValues):void;protected updateValidity():void;private countLines;private syncGutterInlinePosition;private get wrapsText();private lineStarts;
+/** Measures logical line starts without creating one DOM node per source line. */
+private wrappedLineOffset;private syncGutterGeometry;private observeTextGeometry;private onEditorScroll;private gutterRows;private fitToContent;render():TemplateResult;}declare global{interface HTMLElementTagNameMap{'lr-code-editor':LyraCodeEditor;}}export{};

package/dist/components/forms/code-editor/code-editor.class.js

@@ -1,5 +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--)(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{styleMap}from"lit/directives/style-map.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{finiteInteger,finiteNumber}from"../../../internal/numbers.js";import{styles}from"./code-editor.styles.js";import{presenceTrueDefaultBooleanConverter as trueDefaultBooleanConverter}from"../../../internal/converters.js";import{sanitizeCssResize}from"../../../internal/safe-css.js";import{autocorrectConverter,normalizeAutocorrect}from"../../../internal/converters.js";import{lengthViolations}from"../../../internal/length-constraints.js";import{dispatchNativeInputEvent,relayNativeEvent}from"../../../internal/native-event-relay.js";import{LYRA_DEFAULT_codeEditorLabel,LYRA_DEFAULT_fieldRequired,LYRA_DEFAULT_valueInvalid}from"../../../internal/default-strings.generated.js";class LyraCodeEditorBase extends LyraElement{}class LyraCodeEditor extends FormAssociated(LyraCodeEditorBase){constructor(){super(...arguments),this.language="",this.lineNumbers=!0,this._tabSize=2,this.tabSizeAssigned=!1,this.label="",this.hint="",this.errorText="",this.placeholder="",this.readonly=!1,this._rows=4,this.cols=20,this.resize="both",this.size="m",this.wrapValue="off",this.spellcheck=!1,this.autofocus=!1,this.title="",this.autocapitalize="off",this.autocomplete="",this.inputMode="",this.enterKeyHint="",this.autocorrectValue=!1,this.accessibleLabel="",this.touched=!1,this.hasLabelSlot=!1,this.hasHintSlot=!1,this.hasErrorSlot=!1,this.gutterWindowStart=0,this.onInput=event=>{if(this.liveDisabled){event.stopPropagation();return}this.value=event.target.value,this.fitToContent(),relayNativeEvent(this,event),this.emit("lr-input",{value:this.value})},this.onChange=event=>{if(this.liveDisabled){event.stopPropagation();return}this.value=event.target.value,relayNativeEvent(this,event),this.emit("lr-change",{value:this.value})},this.onFocus=event=>{if(this.liveDisabled){event.stopPropagation();return}relayNativeEvent(this,event)},this.onBlur=event=>{this.liveDisabled||(this.touched=!0),this.tabBypassArmed=!1,relayNativeEvent(this,event)},this.tabBypassArmed=!1,this.onKeyDown=event=>{if(!this.liveDisabled){if(event.key==="Escape"){this.tabBypassArmed=!0;return}if(event.key==="Tab"){if(event.shiftKey)return;if(this.tabBypassArmed){this.tabBypassArmed=!1;return}if(this.readonly)return;event.preventDefault();const target=event.target,start=target.selectionStart;target.setRangeText(" ".repeat(this.indentWidth),start,target.selectionEnd,"end"),this.value=target.value,dispatchNativeInputEvent(this,{data:" ".repeat(this.indentWidth),inputType:"insertText"}),this.emit("lr-input",{value:this.value});return}this.tabBypassArmed=!1}},this.onLabelSlotChange=e=>{this.hasLabelSlot=e.target.assignedElements({flatten:!0}).length>0},this.onHintSlotChange=e=>{this.hasHintSlot=e.target.assignedElements({flatten:!0}).length>0},this.onErrorSlotChange=e=>{this.hasErrorSlot=e.target.assignedElements({flatten:!0}).length>0},this.onEditorScroll=()=>{if(!this.lineNumbers||!this.editor||!this.textarea)return;const computed=this.ownerDocument.defaultView?.getComputedStyle(this.textarea),lineHeight=computed?Number.parseFloat(computed.lineHeight):Number.NaN;if(!Number.isFinite(lineHeight)||lineHeight<=0)return;const next=Math.max(0,Math.floor(this.editor.scrollTop/lineHeight)-20);next!==this.gutterWindowStart&&(this.gutterWindowStart=next)}}static{this.defaultStrings={...super.defaultStrings,codeEditorLabel:LYRA_DEFAULT_codeEditorLabel,fieldRequired:LYRA_DEFAULT_fieldRequired,valueInvalid:LYRA_DEFAULT_valueInvalid}}static{this.styles=[LyraElement.styles,styles]}get tabSize(){return this._tabSize}set tabSize(value){const old=this._tabSize;this.tabSizeAssigned=value!=null,this._tabSize=finiteInteger(value,2,1,16),this.requestUpdate("tabSize",old)}get indentWidth(){if(this.tabSizeAssigned||!this.textarea)return this._tabSize;const resolved=getComputedStyle(this.textarea).tabSize.trim();return/^\d+(?:\.\d+)?$/.test(resolved)?finiteInteger(Number(resolved),this._tabSize,1,16):this._tabSize}get rows(){return this._rows}set rows(next){const previous=this._rows;this._rows=finiteInteger(next,4,1),this.requestUpdate("rows",previous)}get minlength(){return this._minlength}set minlength(next){const previous=this._minlength;this._minlength=next!==void 0&&Number.isFinite(next)&&next>=0?finiteInteger(next,0,0):void 0,this.requestUpdate("minlength",previous)}get maxlength(){return this._maxlength}set maxlength(next){const previous=this._maxlength;this._maxlength=next!==void 0&&Number.isFinite(next)&&next>=0?finiteInteger(next,0,0):void 0,this.requestUpdate("maxlength",previous)}get wrap(){return this.wrapValue}set wrap(next){const old=this.wrapValue;this.wrapValue=next==="soft"||next==="hard"?next:"off",this.syncSubmissionValue(),this.requestUpdate("wrap",old)}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 value(){return super.value}set value(next){super.value=this.normalizeLineEndings(next),this.syncSubmissionValue()}get defaultValue(){return super.defaultValue}set defaultValue(next){super.defaultValue=this.normalizeLineEndings(next),this.syncSubmissionValue()}normalizeLineEndings(value){return String(value??"").replace(/\r\n?/g,`
-`)}submissionValue(){if(this.wrap!=="hard")return this.value;const view=this.ownerDocument?.defaultView;if(!view?.FormData)return this.value;const form=this.ownerDocument.createElement("form"),textarea=this.ownerDocument.createElement("textarea");textarea.name="value",textarea.wrap="hard",textarea.cols=finiteInteger(this.cols,20,1,1e6),textarea.value=this.value,form.append(textarea),(this.isConnected?this.ownerDocument.body:null)?.append(form);try{const serialized=new view.FormData(form).get("value");return typeof serialized=="string"?serialized:this.value}catch{return this.value}finally{form.remove()}}syncSubmissionValue(){this.internals&&this.internals.setFormValue(this.submissionValue(),this.value)}get input(){return this.textarea??null}get liveDisabled(){return this.effectiveDisabled||this.matches(":disabled")}click(){this.liveDisabled||this.textarea?.click()}focus(options){this.liveDisabled||this.textarea?.focus(options)}blur(){this.textarea?.blur()}select(){this.textarea?.select()}get selectionStart(){return this.textarea?.selectionStart??null}set selectionStart(value){this.textarea&&(this.textarea.selectionStart=value??0)}get selectionEnd(){return this.textarea?.selectionEnd??null}set selectionEnd(value){this.textarea&&(this.textarea.selectionEnd=value??0)}get selectionDirection(){return this.textarea?.selectionDirection??null}set selectionDirection(value){this.textarea&&(this.textarea.selectionDirection=value??"none")}setSelectionRange(start,end,direction){this.textarea?.setSelectionRange(start,end,direction)}setRangeText(replacement,start,end,selectionMode){const textarea=this.textarea;textarea&&(textarea.setRangeText(replacement,start??textarea.selectionStart,end??textarea.selectionEnd,selectionMode),this.value=textarea.value,this.fitToContent())}scrollPosition(position){if(this.textarea){if(position===void 0)return{top:this.textarea.scrollTop,left:this.textarea.scrollLeft};position.top!==void 0&&(this.textarea.scrollTop=finiteNumber(position.top,this.textarea.scrollTop)),position.left!==void 0&&(this.textarea.scrollLeft=finiteNumber(position.left,this.textarea.scrollLeft))}}willUpdate(changed){super.willUpdate(changed),this.hasUpdated||(this.hasLabelSlot=Array.from(this.children??[]).some(el=>el.getAttribute("slot")==="label"),this.hasHintSlot=Array.from(this.children??[]).some(el=>el.getAttribute("slot")==="hint"),this.hasErrorSlot=Array.from(this.children??[]).some(el=>el.getAttribute("slot")==="error"))}updated(changed){super.updated(changed),this.textarea&&this.textarea.value!==this.value&&(this.textarea.value=this.value),(changed.has("touched")||changed.has("required")||changed.has("value")||changed.has("minlength")||changed.has("maxlength")||changed.has("readonly"))&&(this.updateValidity(),this.toggleAttribute("data-invalid",this.touched&&!this.internals.validity.valid)),(changed.has("wrap")||changed.has("cols"))&&this.syncSubmissionValue(),(changed.has("resize")||changed.has("value")||changed.has("rows")||changed.has("cols"))&&this.fitToContent()}updateValidity(){if(isBarredFromValidation(this,this.internals)){this[SET_ANCHORED_VALIDITY]({});return}if(this.required&&this.value===""){this[SET_ANCHORED_VALIDITY]({valueMissing:!0},this.localize("fieldRequired"));return}const native=this.textarea;native&&native.value!==this.value&&(native.value=this.value);const own=lengthViolations(this.value,this.minlength,this.maxlength),tooShort=!!native?.validity.tooShort||own.tooShort,tooLong=!!native?.validity.tooLong||own.tooLong;this[SET_ANCHORED_VALIDITY](tooShort||tooLong?{tooShort,tooLong}:{},tooShort||tooLong?native?.validationMessage||this.localize("valueInvalid"):"")}countLines(){if(!this.lineNumbers)return 0;let count=1;for(let index=0;index<this.value.length;index++)this.value.charCodeAt(index)===10&&count++;return count}gutterRows(lineCount){const start=Math.min(this.gutterWindowStart,Math.max(0,lineCount-1)),end=Math.min(lineCount,start+200),rows=Array.from({length:end-start},(_value,offset)=>{const index=start+offset;return html`<span
+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--)(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{styleMap}from"lit/directives/style-map.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{acquireResolvedAriaRelationship}from"../../../internal/aria-controls.js";import{finiteInteger,finiteNumber}from"../../../internal/numbers.js";import{styles}from"./code-editor.styles.js";import{presenceTrueDefaultBooleanConverter as trueDefaultBooleanConverter}from"../../../internal/converters.js";import{sanitizeCssResize}from"../../../internal/safe-css.js";import{autocorrectConverter,normalizeAutocorrect}from"../../../internal/converters.js";import{lengthViolations}from"../../../internal/length-constraints.js";import{dispatchNativeInputEvent,relayNativeEvent}from"../../../internal/native-event-relay.js";import{LYRA_DEFAULT_codeEditorLabel,LYRA_DEFAULT_fieldRequired,LYRA_DEFAULT_valueInvalid}from"../../../internal/default-strings.generated.js";class LyraCodeEditorBase extends LyraElement{}class LyraCodeEditor extends FormAssociated(LyraCodeEditorBase){constructor(){super(...arguments),this.language="",this.lineNumbers=!0,this._tabSize=2,this.tabSizeAssigned=!1,this.label="",this.hint="",this.errorText="",this.placeholder="",this.readonly=!1,this._rows=4,this.cols=20,this.resize="both",this.size="m",this.wrapValue="off",this.spellcheck=!1,this.autofocus=!1,this.title="",this.autocapitalize="off",this.autocomplete="",this.inputMode="",this.enterKeyHint="",this.autocorrectValue=!1,this.accessibleLabel="",this.touched=!1,this.hasLabelSlot=!1,this.hasHintSlot=!1,this.hasErrorSlot=!1,this.gutterWindowStart=0,this.caretOffset=0,this.onInput=event=>{if(this.liveDisabled){event.stopPropagation();return}this.value=event.target.value,this.syncCaretOffset(),this.fitToContent(),relayNativeEvent(this,event),this.emit("lr-input",{value:this.value})},this.onChange=event=>{if(this.liveDisabled){event.stopPropagation();return}this.value=event.target.value,relayNativeEvent(this,event),this.emit("lr-change",{value:this.value})},this.onFocus=event=>{if(this.liveDisabled){event.stopPropagation();return}const textarea=event.target;queueMicrotask(()=>{this.isConnected&&this.textarea===textarea&&this.shadowRoot?.activeElement===textarea&&this.syncCaretOffset()}),relayNativeEvent(this,event)},this.onBlur=event=>{this.liveDisabled||(this.touched=!0),this.tabBypassArmed=!1,relayNativeEvent(this,event)},this.tabBypassArmed=!1,this.onKeyDown=event=>{if(!this.liveDisabled){if(event.key==="Escape"){this.tabBypassArmed=!0;return}if(event.key==="Tab"){if(event.shiftKey)return;if(this.tabBypassArmed){this.tabBypassArmed=!1;return}if(this.readonly)return;event.preventDefault();const target=event.target,start=target.selectionStart;target.setRangeText(" ".repeat(this.indentWidth),start,target.selectionEnd,"end"),this.value=target.value,dispatchNativeInputEvent(this,{data:" ".repeat(this.indentWidth),inputType:"insertText"}),this.emit("lr-input",{value:this.value});return}this.tabBypassArmed=!1}},this.onCaretChange=()=>{this.syncCaretOffset()},this.onLabelSlotChange=e=>{this.hasLabelSlot=e.target.assignedElements({flatten:!0}).length>0},this.onHintSlotChange=e=>{this.hasHintSlot=e.target.assignedElements({flatten:!0}).length>0},this.onErrorSlotChange=e=>{this.hasErrorSlot=e.target.assignedElements({flatten:!0}).length>0},this.onEditorScroll=()=>{if(this.syncGutterInlinePosition(),!this.lineNumbers||!this.editor||!this.textarea)return;const computed=this.ownerDocument.defaultView?.getComputedStyle(this.textarea),lineHeight=computed?Number.parseFloat(computed.lineHeight):Number.NaN;if(!Number.isFinite(lineHeight)||lineHeight<=0)return;let firstVisible=Math.floor(this.editor.scrollTop/lineHeight);if(this.wrapsText){const offsets=this.lineStarts();let low=0,high=offsets.length-1;for(;low<high;){const middle=Math.ceil((low+high)/2);this.wrappedLineOffset(offsets[middle])<=this.editor.scrollTop?low=middle:high=middle-1}firstVisible=low}const next=Math.max(0,firstVisible-20);next!==this.gutterWindowStart&&(this.gutterWindowStart=next)}}static{this.defaultStrings={...super.defaultStrings,codeEditorLabel:LYRA_DEFAULT_codeEditorLabel,fieldRequired:LYRA_DEFAULT_fieldRequired,valueInvalid:LYRA_DEFAULT_valueInvalid}}static{this.styles=[LyraElement.styles,styles]}get tabSize(){return this._tabSize}set tabSize(value){const old=this._tabSize;this.tabSizeAssigned=value!=null,this._tabSize=finiteInteger(value,2,1,16),this.requestUpdate("tabSize",old)}get indentWidth(){if(this.tabSizeAssigned||!this.textarea)return this._tabSize;const resolved=getComputedStyle(this.textarea).tabSize.trim();return/^\d+(?:\.\d+)?$/.test(resolved)?finiteInteger(Number(resolved),this._tabSize,1,16):this._tabSize}get rows(){return this._rows}set rows(next){const previous=this._rows;this._rows=finiteInteger(next,4,1),this.requestUpdate("rows",previous)}get minlength(){return this._minlength}set minlength(next){const previous=this._minlength;this._minlength=next!==void 0&&Number.isFinite(next)&&next>=0?finiteInteger(next,0,0):void 0,this.requestUpdate("minlength",previous)}get maxlength(){return this._maxlength}set maxlength(next){const previous=this._maxlength;this._maxlength=next!==void 0&&Number.isFinite(next)&&next>=0?finiteInteger(next,0,0):void 0,this.requestUpdate("maxlength",previous)}get wrap(){return this.wrapValue}set wrap(next){const old=this.wrapValue;this.wrapValue=next==="soft"||next==="hard"?next:"off",this.syncSubmissionValue(),this.requestUpdate("wrap",old)}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??""}connectedCallback(){super.connectedCallback(),this.hasUpdated&&(this.syncExternalDescription(),this.observeTextGeometry())}disconnectedCallback(){this.textGeometryObserver?.disconnect(),this.textGeometryObserver=void 0,this.releaseExternalDescription(),super.disconnectedCallback()}adoptedCallback(){super.adoptedCallback(),this.releaseExternalDescription(),this.textGeometryObserver?.disconnect(),this.textGeometryObserver=void 0,this.isConnected&&this.hasUpdated&&(this.syncExternalDescription(),this.observeTextGeometry())}syncExternalDescription(){if(!this.isConnected)return;const owner=this.textarea;owner&&(this.externalDescriptionLease?this.externalDescriptionLease.update(owner):this.externalDescriptionLease=acquireResolvedAriaRelationship(this,owner,"aria-describedby"))}releaseExternalDescription(){this.externalDescriptionLease?.release(),this.externalDescriptionLease=void 0}formResetCallback(){super.formResetCallback(),this.touched=!1}get value(){return super.value}set value(next){super.value=this.normalizeLineEndings(next),this.syncSubmissionValue()}get defaultValue(){return super.defaultValue}set defaultValue(next){super.defaultValue=this.normalizeLineEndings(next),this.syncSubmissionValue()}normalizeLineEndings(value){return String(value??"").replace(/\r\n?/g,`
+`)}submissionValue(){if(this.wrap!=="hard")return this.value;const view=this.ownerDocument?.defaultView;if(!view?.FormData)return this.value;const form=this.ownerDocument.createElement("form"),textarea=this.ownerDocument.createElement("textarea");textarea.name="value",textarea.wrap="hard",textarea.cols=finiteInteger(this.cols,20,1,1e6),textarea.value=this.value,form.append(textarea),(this.isConnected?this.ownerDocument.body:null)?.append(form);try{const serialized=new view.FormData(form).get("value");return typeof serialized=="string"?serialized:this.value}catch{return this.value}finally{form.remove()}}syncSubmissionValue(){this.internals&&this.internals.setFormValue(this.submissionValue(),this.value)}get input(){return this.textarea??null}get liveDisabled(){return this.effectiveDisabled||this.matches(":disabled")}click(){this.liveDisabled||this.textarea?.click()}focus(options){this.liveDisabled||this.textarea?.focus(options)}blur(){this.textarea?.blur()}select(){this.textarea?.select(),this.syncCaretOffset()}get selectionStart(){return this.textarea?.selectionStart??null}set selectionStart(value){this.textarea&&(this.textarea.selectionStart=value??0,this.syncCaretOffset())}get selectionEnd(){return this.textarea?.selectionEnd??null}set selectionEnd(value){this.textarea&&(this.textarea.selectionEnd=value??0,this.syncCaretOffset())}get selectionDirection(){return this.textarea?.selectionDirection??null}set selectionDirection(value){this.textarea&&(this.textarea.selectionDirection=value??"none",this.syncCaretOffset())}setSelectionRange(start,end,direction){this.textarea?.setSelectionRange(start,end,direction),this.syncCaretOffset()}setRangeText(replacement,start,end,selectionMode){const textarea=this.textarea;textarea&&(textarea.setRangeText(replacement,start??textarea.selectionStart,end??textarea.selectionEnd,selectionMode),this.value=textarea.value,this.syncCaretOffset(),this.fitToContent())}scrollPosition(position){const editor=this.editor;if(editor){if(position===void 0)return{top:editor.scrollTop,left:editor.scrollLeft};position.top!==void 0&&(editor.scrollTop=finiteNumber(position.top,editor.scrollTop)),position.left!==void 0&&(editor.scrollLeft=finiteNumber(position.left,editor.scrollLeft)),this.syncGutterInlinePosition()}}syncCaretOffset(){const textarea=this.textarea;if(!textarea)return;const next=finiteInteger(textarea.selectionEnd,0,0,this.value.length);if(next===this.caretOffset){this.scrollCaretIntoView();return}this.caretOffset=next}scrollCaretIntoView(){const editor=this.editor,marker=this.caretMeasure;if(!editor||!marker)return;const frame=editor.getBoundingClientRect();let caret=marker.getBoundingClientRect(),text=marker.nextSibling;for(;text&&(text.nodeType!==3||!text.textContent);)text=text.nextSibling;if(text){const range=this.ownerDocument.createRange();range.setStart(text,0),text.textContent?.startsWith(`
+`)?range.setEnd(text,1):range.collapse(!0);const measured=range.getBoundingClientRect();measured.height>0&&(caret=measured)}const gutterWidth=this.gutter?.getBoundingClientRect().width??0,viewportLeft=frame.left+editor.clientLeft,viewportTop=frame.top+editor.clientTop,textLeft=viewportLeft+(this.effectiveDirection==="rtl"?0:gutterWidth),textRight=viewportLeft+editor.clientWidth-(this.effectiveDirection==="rtl"?gutterWidth:0),viewportBottom=viewportTop+editor.clientHeight,left=caret.left<textLeft?caret.left-textLeft:caret.right>textRight?caret.right-textRight:0,top=caret.top<viewportTop?caret.top-viewportTop:caret.bottom>viewportBottom?caret.bottom-viewportBottom:0;left===0&&top===0||(editor.scrollBy({left:finiteNumber(left,0),top:finiteNumber(top,0)}),this.syncGutterInlinePosition())}willUpdate(changed){super.willUpdate(changed),this.hasUpdated||(this.hasLabelSlot=Array.from(this.children??[]).some(el=>el.getAttribute("slot")==="label"),this.hasHintSlot=Array.from(this.children??[]).some(el=>el.getAttribute("slot")==="hint"),this.hasErrorSlot=Array.from(this.children??[]).some(el=>el.getAttribute("slot")==="error"))}updated(changed){super.updated(changed),this.syncExternalDescription(),this.textarea&&this.textarea.value!==this.value&&(this.textarea.value=this.value),(changed.has("touched")||changed.has("required")||changed.has("value")||changed.has("minlength")||changed.has("maxlength")||changed.has("readonly"))&&(this.updateValidity(),this.toggleAttribute("data-invalid",this.touched&&!this.internals.validity.valid)),(changed.has("wrap")||changed.has("cols"))&&this.syncSubmissionValue(),(changed.has("resize")||changed.has("value")||changed.has("rows")||changed.has("cols"))&&this.fitToContent(),this.syncGutterInlinePosition(),this.observeTextGeometry(),this.syncGutterGeometry(),(changed.has("caretOffset")||changed.has("value"))&&this.scrollCaretIntoView()}updateValidity(){if(isBarredFromValidation(this,this.internals)){this[SET_ANCHORED_VALIDITY]({});return}if(this.required&&this.value===""){this[SET_ANCHORED_VALIDITY]({valueMissing:!0},this.localize("fieldRequired"));return}const native=this.textarea;native&&native.value!==this.value&&(native.value=this.value);const own=lengthViolations(this.value,this.minlength,this.maxlength),tooShort=!!native?.validity.tooShort||own.tooShort,tooLong=!!native?.validity.tooLong||own.tooLong;this[SET_ANCHORED_VALIDITY](tooShort||tooLong?{tooShort,tooLong}:{},tooShort||tooLong?native?.validationMessage||this.localize("valueInvalid"):"")}countLines(){if(!this.lineNumbers)return 0;let count=1;for(let index=0;index<this.value.length;index++)this.value.charCodeAt(index)===10&&count++;return count}syncGutterInlinePosition(){const editor=this.editor,gutter=this.gutter;!editor||!gutter||gutter.style.setProperty("--_lr-code-editor-gutter-scroll-translation",`${finiteNumber(editor.scrollLeft,0)}px`)}get wrapsText(){return this.wrap==="soft"||this.wrap==="hard"}lineStarts(){if(this.wrappedLineStarts?.value===this.value)return this.wrappedLineStarts.offsets;const offsets=[0];for(let index=0;index<this.value.length;index++)this.value.charCodeAt(index)===10&&offsets.push(index+1);return this.wrappedLineStarts={value:this.value,offsets},offsets}wrappedLineOffset(offset){const measure=this.renderRoot.querySelector(".editor-measure");if(!measure)return 0;const nodes=Array.from(measure.childNodes).filter(node=>node.nodeType===3),range=this.ownerDocument.createRange(),first=nodes.find(node=>(node.textContent?.length??0)>0);if(!first)return 0;range.setStart(first,0),range.setEnd(first,1);const firstTop=range.getBoundingClientRect().top;let remaining=offset;for(const node of nodes){const length=node.textContent?.length??0;if(remaining<length)return range.setStart(node,remaining),range.setEnd(node,remaining+1),range.getBoundingClientRect().top-firstTop;remaining-=length}return 0}syncGutterGeometry(){if(!this.lineNumbers)return;const lines=this.renderRoot.querySelectorAll(".gutter-line"),start=Math.min(this.gutterWindowStart,Math.max(0,this.countLines()-1)),offsets=this.wrapsText?this.lineStarts():void 0,positions=offsets?Array.from(lines,(_line,index)=>this.wrappedLineOffset(offsets[start+index]??0)):void 0,height=this.renderRoot.querySelector(".editor-measure")?.getBoundingClientRect().height;height!==void 0&&this.gutter?.style.setProperty("block-size",`${height}px`),lines.forEach((line,index)=>{line.style.insetBlockStart=positions?`${positions[index]}px`:`calc(var(--lr-code-editor-line-height, var(--_lr-code-editor-line-height)) * ${start+index}em)`})}observeTextGeometry(){if(!this.lineNumbers||!this.isConnected){this.textGeometryObserver?.disconnect(),this.textGeometryObserver=void 0;return}if(this.textGeometryObserver)return;const measure=this.renderRoot.querySelector(".editor-measure"),ownerDocument=this.ownerDocument,Observer=ownerDocument.defaultView?.ResizeObserver;if(!measure||!Observer)return;const observer=new Observer(()=>{!this.isConnected||this.ownerDocument!==ownerDocument||this.textGeometryObserver!==observer||(this.onEditorScroll(),this.syncGutterGeometry())});this.textGeometryObserver=observer,observer.observe(measure)}gutterRows(lineCount){const start=Math.min(this.gutterWindowStart,Math.max(0,lineCount-1)),end=Math.min(lineCount,start+200),rows=Array.from({length:end-start},(_value,offset)=>{const index=start+offset;return html`<span
         class="gutter-line"
         style=${styleMap({insetBlockStart:`calc(var(--lr-code-editor-line-height, var(--_lr-code-editor-line-height)) * ${index}em)`})}
         >${index+1}</span
@@ -8,7 +9,7 @@ var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3
         class="gutter-window"
         style=${styleMap({blockSize:`calc(var(--lr-code-editor-line-height, var(--_lr-code-editor-line-height)) * ${lineCount}em)`})}
         >${rows}</span
-      >`}fitToContent(){const textarea=this.textarea;if(!textarea)return;if(this.resize!=="auto"){textarea.style.blockSize="",textarea.style.overflowY="";return}textarea.style.blockSize="auto",textarea.style.overflowY="hidden";const computed=this.ownerDocument.defaultView?.getComputedStyle(textarea);if(!computed)return;const border=Number.parseFloat(computed.borderBlockStartWidth)+Number.parseFloat(computed.borderBlockEndWidth),contentBlockSize=textarea.scrollHeight+(Number.isFinite(border)?border:0);textarea.style.blockSize=`${contentBlockSize}px`,textarea.style.overflowY=textarea.scrollHeight>textarea.clientHeight?"auto":"hidden"}render(){const lineCount=this.countLines(),textareaStyle={resize:this.resize==="auto"?"none":sanitizeCssResize(this.resize,"both"),...this.tabSizeAssigned?{"--lr-code-editor-tab-size":String(this._tabSize)}:{}},hasLabel=this.hasLabelSlot||this.label.length>0,hasHint=this.hasHintSlot||this.hint.length>0,hasError=this.hasErrorSlot||this.errorText.length>0,describedBy=[hasError?"textarea-error":"",hasHint?"textarea-hint":""].filter(Boolean).join(" "),label=this.hasAttribute("aria-label")?this.getAttribute("aria-label"):this.accessibleLabel||(hasLabel?nothing:this.localize("codeEditorLabel")),invalid=hasError||this.touched&&!this.internals.validity.valid;return html`<div part="form-control">
+      >`}fitToContent(){const textarea=this.textarea;if(!textarea)return;if(this.resize!=="auto"){textarea.style.blockSize="",textarea.style.overflowY="";return}textarea.style.blockSize="auto",textarea.style.overflowY="hidden";const computed=this.ownerDocument.defaultView?.getComputedStyle(textarea);if(!computed)return;const border=Number.parseFloat(computed.borderBlockStartWidth)+Number.parseFloat(computed.borderBlockEndWidth),contentBlockSize=textarea.scrollHeight+(Number.isFinite(border)?border:0);textarea.style.blockSize=`${contentBlockSize}px`,textarea.style.overflowY=textarea.scrollHeight>textarea.clientHeight?"auto":"hidden"}render(){const lineCount=this.countLines(),textareaStyle={resize:this.resize==="auto"?"none":sanitizeCssResize(this.resize,"both")},contentStyle=this.tabSizeAssigned?{"--lr-code-editor-tab-size":String(this._tabSize)}:{},hasLabel=this.hasLabelSlot||(this.label??"").length>0,hasHint=this.hasHintSlot||(this.hint??"").length>0,hasError=this.hasErrorSlot||(this.errorText??"").length>0,describedBy=[hasError?"textarea-error":"",hasHint?"textarea-hint":""].filter(Boolean).join(" "),label=this.hasAttribute("aria-label")?this.getAttribute("aria-label"):this.accessibleLabel||(hasLabel?nothing:this.localize("codeEditorLabel")),invalid=hasError||this.touched&&!this.internals.validity.valid;return html`<div part="form-control">
       <label part="label form-control-label" for="textarea" ?hidden=${!hasLabel}
         >${this.label}<slot
           name="label"
@@ -20,10 +21,15 @@ var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3
         data-language=${this.language}
         @scroll=${this.onEditorScroll}
       >
-        ${this.lineNumbers?html`<div part="gutter" aria-hidden="true">
-              ${this.gutterRows(lineCount)}
-            </div>`:nothing}
-        <textarea
+        ${this.lineNumbers?html`<div part="gutter" aria-hidden="true">${this.gutterRows(lineCount)}</div>`:nothing}
+        <div class="editor-content" data-wrap=${this.wrap} style=${styleMap(contentStyle)}>
+          <span class="editor-measure" data-wrap=${this.wrap} aria-hidden="true"
+            >${this.value.slice(0,this.caretOffset)}<span
+              class="editor-caret-measure"
+            ></span
+            >${this.value.slice(this.caretOffset)}​</span
+          >
+          <textarea
           id="textarea"
           part="textarea"
           .value=${this.value}
@@ -51,9 +57,13 @@ var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3
           @input=${this.onInput}
           @change=${this.onChange}
           @keydown=${this.onKeyDown}
+          @keyup=${this.onCaretChange}
+          @mouseup=${this.onCaretChange}
+          @select=${this.onCaretChange}
           @focus=${this.onFocus}
           @blur=${this.onBlur}
-        ></textarea>
+          ></textarea>
+        </div>
       </div>
       <div id="textarea-hint" part="hint" ?hidden=${!hasHint}>
         ${this.hint}<slot
@@ -67,4 +77,4 @@ var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3
           @slotchange=${this.onErrorSlotChange}
         ></slot>
       </div>
-    </div>`}}__decorate([property({reflect:!0,useDefault:!0})],LyraCodeEditor.prototype,"language",void 0),__decorate([property({converter:trueDefaultBooleanConverter,reflect:!0,attribute:"line-numbers"})],LyraCodeEditor.prototype,"lineNumbers",void 0),__decorate([property({type:Number,attribute:"tab-size"})],LyraCodeEditor.prototype,"tabSize",null),__decorate([property()],LyraCodeEditor.prototype,"label",void 0),__decorate([property()],LyraCodeEditor.prototype,"hint",void 0),__decorate([property({attribute:"error-text"})],LyraCodeEditor.prototype,"errorText",void 0),__decorate([property()],LyraCodeEditor.prototype,"placeholder",void 0),__decorate([property({type:Boolean,reflect:!0})],LyraCodeEditor.prototype,"readonly",void 0),__decorate([property({type:Number,useDefault:!0})],LyraCodeEditor.prototype,"rows",null),__decorate([property({type:Number,useDefault:!0})],LyraCodeEditor.prototype,"cols",void 0),__decorate([property({type:Number})],LyraCodeEditor.prototype,"minlength",null),__decorate([property({type:Number})],LyraCodeEditor.prototype,"maxlength",null),__decorate([property({reflect:!0,useDefault:!0})],LyraCodeEditor.prototype,"resize",void 0),__decorate([property({reflect:!0})],LyraCodeEditor.prototype,"size",void 0),__decorate([property({attribute:"wrap",useDefault:!0})],LyraCodeEditor.prototype,"wrap",null),__decorate([property({converter:{fromAttribute:value=>value===""||value==="true"},useDefault:!0})],LyraCodeEditor.prototype,"spellcheck",void 0),__decorate([property({type:Boolean})],LyraCodeEditor.prototype,"autofocus",void 0),__decorate([property()],LyraCodeEditor.prototype,"title",void 0),__decorate([property()],LyraCodeEditor.prototype,"autocapitalize",void 0),__decorate([property()],LyraCodeEditor.prototype,"autocomplete",void 0),__decorate([property({attribute:"inputmode"})],LyraCodeEditor.prototype,"inputMode",void 0),__decorate([property({attribute:"enterkeyhint"})],LyraCodeEditor.prototype,"enterKeyHint",void 0),__decorate([property({converter:autocorrectConverter,useDefault:!0})],LyraCodeEditor.prototype,"autocorrect",null),__decorate([property({attribute:"aria-label"})],LyraCodeEditor.prototype,"accessibleLabel",void 0),__decorate([state()],LyraCodeEditor.prototype,"touched",void 0),__decorate([state()],LyraCodeEditor.prototype,"hasLabelSlot",void 0),__decorate([state()],LyraCodeEditor.prototype,"hasHintSlot",void 0),__decorate([state()],LyraCodeEditor.prototype,"hasErrorSlot",void 0),__decorate([query("textarea")],LyraCodeEditor.prototype,"textarea",void 0),__decorate([query('[part="editor"]')],LyraCodeEditor.prototype,"editor",void 0),__decorate([state()],LyraCodeEditor.prototype,"gutterWindowStart",void 0);export{LyraCodeEditor};
+    </div>`}}__decorate([property({reflect:!0,useDefault:!0})],LyraCodeEditor.prototype,"language",void 0),__decorate([property({converter:trueDefaultBooleanConverter,reflect:!0,attribute:"line-numbers"})],LyraCodeEditor.prototype,"lineNumbers",void 0),__decorate([property({type:Number,attribute:"tab-size"})],LyraCodeEditor.prototype,"tabSize",null),__decorate([property()],LyraCodeEditor.prototype,"label",void 0),__decorate([property()],LyraCodeEditor.prototype,"hint",void 0),__decorate([property({attribute:"error-text"})],LyraCodeEditor.prototype,"errorText",void 0),__decorate([property()],LyraCodeEditor.prototype,"placeholder",void 0),__decorate([property({type:Boolean,reflect:!0})],LyraCodeEditor.prototype,"readonly",void 0),__decorate([property({type:Number,useDefault:!0})],LyraCodeEditor.prototype,"rows",null),__decorate([property({type:Number,useDefault:!0})],LyraCodeEditor.prototype,"cols",void 0),__decorate([property({type:Number})],LyraCodeEditor.prototype,"minlength",null),__decorate([property({type:Number})],LyraCodeEditor.prototype,"maxlength",null),__decorate([property({reflect:!0,useDefault:!0})],LyraCodeEditor.prototype,"resize",void 0),__decorate([property({reflect:!0})],LyraCodeEditor.prototype,"size",void 0),__decorate([property({attribute:"wrap",useDefault:!0})],LyraCodeEditor.prototype,"wrap",null),__decorate([property({converter:{fromAttribute:value=>value===""||value==="true"},useDefault:!0})],LyraCodeEditor.prototype,"spellcheck",void 0),__decorate([property({type:Boolean})],LyraCodeEditor.prototype,"autofocus",void 0),__decorate([property()],LyraCodeEditor.prototype,"title",void 0),__decorate([property()],LyraCodeEditor.prototype,"autocapitalize",void 0),__decorate([property()],LyraCodeEditor.prototype,"autocomplete",void 0),__decorate([property({attribute:"inputmode"})],LyraCodeEditor.prototype,"inputMode",void 0),__decorate([property({attribute:"enterkeyhint"})],LyraCodeEditor.prototype,"enterKeyHint",void 0),__decorate([property({converter:autocorrectConverter,useDefault:!0})],LyraCodeEditor.prototype,"autocorrect",null),__decorate([property({attribute:"aria-label"})],LyraCodeEditor.prototype,"accessibleLabel",void 0),__decorate([state()],LyraCodeEditor.prototype,"touched",void 0),__decorate([state()],LyraCodeEditor.prototype,"hasLabelSlot",void 0),__decorate([state()],LyraCodeEditor.prototype,"hasHintSlot",void 0),__decorate([state()],LyraCodeEditor.prototype,"hasErrorSlot",void 0),__decorate([query("textarea")],LyraCodeEditor.prototype,"textarea",void 0),__decorate([query('[part="editor"]')],LyraCodeEditor.prototype,"editor",void 0),__decorate([query('[part="gutter"]')],LyraCodeEditor.prototype,"gutter",void 0),__decorate([query(".editor-caret-measure")],LyraCodeEditor.prototype,"caretMeasure",void 0),__decorate([state()],LyraCodeEditor.prototype,"gutterWindowStart",void 0),__decorate([state()],LyraCodeEditor.prototype,"caretOffset",void 0);export{LyraCodeEditor};

package/dist/components/forms/code-editor/code-editor.styles.js

@@ -1 +1 @@
-import{css}from"lit";import{formControlRequiredMarker}from"../../../internal/form-control.styles.js";const styles=css` :host { display: block; block-size: 100%; --_lr-code-editor-min-block-size: var(--lr-size-8rem); --_lr-code-editor-padding: var(--lr-space-s); --_lr-code-editor-font-size: var(--lr-font-size-m); --_lr-code-editor-line-height: 1.5; --_lr-code-editor-tab-size: 2; } :host([size="2xs"]) { --_lr-code-editor-min-block-size: var(--lr-size-4rem); --_lr-code-editor-padding: var(--lr-space-2xs); --_lr-code-editor-font-size: var(--lr-font-size-2xs); } :host([size="xs"]) { --_lr-code-editor-min-block-size: var(--lr-size-5rem); --_lr-code-editor-padding: var(--lr-space-xs); --_lr-code-editor-font-size: var(--lr-font-size-xs); } :host([size="s"]), :host([size="small"]) { --_lr-code-editor-min-block-size: var(--lr-size-6rem); --_lr-code-editor-padding: var(--lr-size-0-375rem); --_lr-code-editor-font-size: var(--lr-font-size-sm); } :host([size="medium"]) { --_lr-code-editor-min-block-size: var(--lr-size-8rem); --_lr-code-editor-padding: var(--lr-space-s); --_lr-code-editor-font-size: var(--lr-font-size-m); } :host([size="l"]), :host([size="large"]) { --_lr-code-editor-min-block-size: var(--lr-size-10rem); --_lr-code-editor-padding: var(--lr-space-m); --_lr-code-editor-font-size: var(--lr-font-size-lg); } :host([size="xl"]) { --_lr-code-editor-min-block-size: var(--lr-size-12rem); --_lr-code-editor-padding: var(--lr-space-l); --_lr-code-editor-font-size: var(--lr-font-size-xl); } [part="form-control"] { display: flex; flex-direction: column; block-size: 100%; gap: var(--lr-space-xs); } [part~="label"] { color: var(--lr-color-text); font-weight: var(--lr-font-weight-semibold); } ${formControlRequiredMarker} [part='editor'] { display: grid; flex: 1 1 auto; grid-template-columns: auto max-content; block-size: 100%; overflow: auto; min-block-size: var( --lr-code-editor-min-block-size, var(--_lr-code-editor-min-block-size) ); border: var(--lr-border-width-thin) solid var(--lr-color-border); border-radius: var(--lr-radius); background: var(--lr-color-surface); } [part="gutter"] { position: relative; padding: var(--lr-code-editor-padding, var(--_lr-code-editor-padding)) var(--lr-space-xs); border-inline-end: var(--lr-border-width-thin) solid var(--lr-color-border); color: var(--lr-color-text-quiet); text-align: end; white-space: pre; user-select: none; font: inherit; font-size: var( --lr-code-editor-font-size, var(--_lr-code-editor-font-size) ); line-height: var( --lr-code-editor-line-height, var(--_lr-code-editor-line-height) ); } .gutter-measure { visibility: hidden; } .gutter-window { position: absolute; inset-block-start: var( --lr-code-editor-padding, var(--_lr-code-editor-padding) ); inset-inline: var(--lr-space-xs); display: block; } .gutter-line { position: absolute; inset-inline: 0; } [part="textarea"] { display: block; box-sizing: border-box; inline-size: max-content; min-inline-size: 100%; min-block-size: var( --lr-code-editor-min-block-size, var(--_lr-code-editor-min-block-size) ); block-size: 100%; overflow: visible; padding: var(--lr-code-editor-padding, var(--_lr-code-editor-padding)); resize: both; border: 0; outline: 0; background: transparent; color: var(--lr-color-text); font: var(--lr-font-mono); font-size: var( --lr-code-editor-font-size, var(--_lr-code-editor-font-size) ); line-height: var( --lr-code-editor-line-height, var(--_lr-code-editor-line-height) ); tab-size: var(--lr-code-editor-tab-size, var(--_lr-code-editor-tab-size)); } [part="textarea"]:focus-visible { outline: var(--lr-focus-ring-width) solid var(--lr-focus-ring-color); outline-offset: calc(var(--lr-focus-ring-offset) * -1); } [part="textarea"]::placeholder { color: var(--lr-color-text-quiet); } :host(:not(:disabled)) [part="editor"]:hover { border-color: var(--lr-code-editor-hover-border, var(--lr-color-brand)); } [part="hint"], [part="error"] { color: var(--lr-color-text-quiet); font-size: var(--lr-font-size-sm); } [part="error"] { color: var(--lr-color-danger); } :host([data-invalid]) [part="editor"] { border-color: var(--lr-code-editor-invalid-border, var(--lr-color-danger)); } :host(:disabled) { opacity: var(--lr-opacity-disabled); cursor: not-allowed; } [part="form-control"], [part~="form-control-label"], [part="hint"], [part="error"] { min-inline-size: 0; max-inline-size: 100%; overflow-wrap: anywhere; } `;export{styles};
+import{css}from"lit";import{formControlRequiredMarker}from"../../../internal/form-control.styles.js";const styles=css` :host { display: block; block-size: 100%; --_lr-code-editor-min-block-size: var(--lr-size-8rem); --_lr-code-editor-padding: var(--lr-space-s); --_lr-code-editor-font-size: var(--lr-font-size-m); --_lr-code-editor-line-height: 1.5; --_lr-code-editor-tab-size: 2; } :host([size='2xs']) { --_lr-code-editor-min-block-size: var(--lr-size-4rem); --_lr-code-editor-padding: var(--lr-space-2xs); --_lr-code-editor-font-size: var(--lr-font-size-2xs); } :host([size='xs']) { --_lr-code-editor-min-block-size: var(--lr-size-5rem); --_lr-code-editor-padding: var(--lr-space-xs); --_lr-code-editor-font-size: var(--lr-font-size-xs); } :host([size='s']), :host([size='small']) { --_lr-code-editor-min-block-size: var(--lr-size-6rem); --_lr-code-editor-padding: var(--lr-size-0-375rem); --_lr-code-editor-font-size: var(--lr-font-size-sm); } :host([size='medium']) { --_lr-code-editor-min-block-size: var(--lr-size-8rem); --_lr-code-editor-padding: var(--lr-space-s); --_lr-code-editor-font-size: var(--lr-font-size-m); } :host([size='l']), :host([size='large']) { --_lr-code-editor-min-block-size: var(--lr-size-10rem); --_lr-code-editor-padding: var(--lr-space-m); --_lr-code-editor-font-size: var(--lr-font-size-lg); } :host([size='xl']) { --_lr-code-editor-min-block-size: var(--lr-size-12rem); --_lr-code-editor-padding: var(--lr-space-l); --_lr-code-editor-font-size: var(--lr-font-size-xl); } [part='form-control'] { display: flex; flex-direction: column; block-size: 100%; gap: var(--lr-space-xs); } [part~='label'] { color: var(--lr-color-text); font-weight: var(--lr-font-weight-semibold); } ${formControlRequiredMarker} [part='editor'] { display: grid; flex: 1 1 auto; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); block-size: 100%; contain: size; contain-intrinsic-block-size: var( --lr-code-editor-min-block-size, var(--_lr-code-editor-min-block-size) ); overflow: auto; min-block-size: var( --lr-code-editor-min-block-size, var(--_lr-code-editor-min-block-size) ); border: var(--lr-border-width-thin) solid var(--lr-color-border); border-radius: var(--lr-radius); background: var(--lr-color-surface); } [part='gutter'] { box-sizing: border-box; grid-area: 1 / 1; min-block-size: 100%; align-self: start; position: relative; transform: translateX( var(--_lr-code-editor-gutter-scroll-translation, 0) ); z-index: var(--lr-layer-content); padding: var(--lr-code-editor-padding, var(--_lr-code-editor-padding)) var(--lr-space-xs); border-inline-end: var(--lr-border-width-thin) solid var(--lr-color-border); background: var(--lr-color-surface); color: var(--lr-color-text-quiet); text-align: end; white-space: pre; user-select: none; font: inherit; font-family: var(--lr-font-mono); font-size: var( --lr-code-editor-font-size, var(--_lr-code-editor-font-size) ); line-height: var( --lr-code-editor-line-height, var(--_lr-code-editor-line-height) ); } .editor-content { grid-area: 1 / 2; position: relative; align-self: start; box-sizing: border-box; inline-size: max-content; min-inline-size: 100%; block-size: 100%; min-block-size: 0; } :host(:not([resize='auto'])) .editor-content { block-size: max-content; min-block-size: 100%; } .editor-measure { display: block; box-sizing: border-box; inline-size: max-content; block-size: max-content; min-inline-size: 100%; padding: var(--lr-code-editor-padding, var(--_lr-code-editor-padding)); color: transparent; font: inherit; font-family: var(--lr-font-mono); font-size: var( --lr-code-editor-font-size, var(--_lr-code-editor-font-size) ); line-height: var( --lr-code-editor-line-height, var(--_lr-code-editor-line-height) ); tab-size: var(--lr-code-editor-tab-size, var(--_lr-code-editor-tab-size)); white-space: pre; pointer-events: none; user-select: none; opacity: 0; } .editor-content:where([data-wrap='soft'], [data-wrap='hard']) { inline-size: 100%; block-size: max-content; min-block-size: 100%; } .editor-measure:where([data-wrap='soft'], [data-wrap='hard']) { inline-size: 100%; overflow-wrap: anywhere; white-space: pre-wrap; } .editor-caret-measure { display: inline-block; inline-size: 0; block-size: var(--lr-size-1em); } .gutter-measure { visibility: hidden; } .gutter-window { position: absolute; inset-block-start: var( --lr-code-editor-padding, var(--_lr-code-editor-padding) ); inset-inline: var(--lr-space-xs); display: block; } .gutter-line { position: absolute; inset-inline: 0; } [part='textarea'] { display: block; position: absolute; inset: 0; box-sizing: border-box; inline-size: 100%; min-inline-size: 0; block-size: 100%; min-block-size: 0; overflow: hidden; padding: var(--lr-code-editor-padding, var(--_lr-code-editor-padding)); resize: both; border: 0; outline: 0; background: transparent; color: var(--lr-color-text); font: inherit; font-family: var(--lr-font-mono); font-size: var( --lr-code-editor-font-size, var(--_lr-code-editor-font-size) ); line-height: var( --lr-code-editor-line-height, var(--_lr-code-editor-line-height) ); tab-size: var(--lr-code-editor-tab-size, var(--_lr-code-editor-tab-size)); } [part='textarea']:focus-visible { outline: var(--lr-focus-ring-width) solid var(--lr-focus-ring-color); outline-offset: calc(var(--lr-focus-ring-offset) * -1); } [part='textarea']::placeholder { color: var(--lr-color-text-quiet); } :host(:not(:disabled)) [part='editor']:hover { border-color: var(--lr-code-editor-hover-border, var(--lr-color-brand)); } [part='hint'], [part='error'] { color: var(--lr-color-text-quiet); font-size: var(--lr-font-size-sm); } [part='error'] { color: var(--lr-color-danger); } :host([data-invalid]) [part='editor'] { border-color: var(--lr-code-editor-invalid-border, var(--lr-color-danger)); } :host(:disabled) { opacity: var(--lr-opacity-disabled); cursor: not-allowed; } [part='form-control'], [part~='form-control-label'], [part='hint'], [part='error'] { min-inline-size: 0; max-inline-size: 100%; overflow-wrap: anywhere; } `;export{styles};

package/dist/components/forms/color-picker/color-picker.class.d.ts

@@ -22,6 +22,10 @@ export interface LyraColorPickerSwatch{color:string;label?:string;}export interf
 * Pointer drags are reversible previews: a release commits the latest colour, while cancellation,
 * lost capture, disablement, disconnection, or document adoption silently restores the colour and
 * submitted form value that existed before the gesture.
+* Own or fieldset disablement discards an unfinished text draft without committing it and blocks
+* palette/format actions immediately. An enabled text-field blur still commits a valid draft;
+* changing format remains silent. Host-root external descriptions precede local trigger guidance
+* and follow source replacement, removal, reinsertion, reconnection and document adoption.
 * The popup participates in the shared nonmodal overlay stack, so Escape and an outside pointer
 * dismiss it only while it is topmost; closing a newer overlay hands focus back through the
 * manager instead of collapsing every open popup under the same event.
@@ -188,7 +192,7 @@ get open():boolean;set open(next:boolean);private applyOpenState;private hasLabe
 /** Set by the `value` setter; consumed once per update cycle by `willUpdate()`. Parsing is
 *  deferred so a declarative `value` attribute is interpreted with the `format`/`opacity`/
 *  `uppercase` attributes that arrive alongside it, whatever order they land in. */
-private valueNeedsParse;private pendingInput;private hintId;private errorId;private labelId;private valueTextId;private triggerId;private panelId;
+private valueNeedsParse;private pendingInput;private localDescriptionIds;private externalDescriptionLease?;private get liveDisabled();private syncExternalDescription;private releaseExternalDescription;private hintId;private errorId;private labelId;private valueTextId;private triggerId;private panelId;
 /** Which control a pointer drag is currently steering, plus the box it maps onto. */
 private drag?;
 /** Exact realm carrying the active drag listeners, retained across adoption for symmetric cleanup. */
@@ -219,7 +223,7 @@ private applyColor;
 /** Emits the native and migrated commit pair for a completed value-changing interaction. */
 private emitCommit;
 /** `applyColor()` plus the commit pair a discrete interaction ends with. */
-private commitColor;private normalizedSwatches;private triggerEl;private panelEl;private positionPanel;private activatePanel;private teardownOverlay;private onDocumentPointerDown;private onTriggerClick;private beginDrag;private applyPointer;private onPointerMove;private onPointerUp;private onPointerCancel;private cancelDrag;private endDrag;
+private commitColor;private swatchSource;private projectedSwatches;private normalizedSwatches;private triggerEl;private panelEl;private positionPanel;private activatePanel;private teardownOverlay;private onDocumentPointerDown;private onTriggerClick;private beginDrag;private applyPointer;private onPointerMove;private onPointerUp;private onPointerCancel;private cancelDrag;private endDrag;
 /** Resolves an arrow key to a signed step along the inline axis, honouring text direction. */
 private inlineStep;private onGridKeyDown;private onHueKeyDown;private onAlphaKeyDown;private applyKeyboardColor;
 /** One discrete press pairs a keydown (`input`) with a keyup (`change`); OS key repeat re-fires

package/dist/components/forms/color-picker/color-picker.class.js

@@ -1,4 +1,4 @@
-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--)(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,state}from"lit/decorators.js";import{styleMap}from"lit/directives/style-map.js";import{LyraElement}from"../../../internal/lyra-element.js";import{FormAssociated}from"../../../internal/form-associated.js";import{hostAriaLabel,nextId,srOnly}from"../../../internal/a11y.js";import{deferredPlaceReady as place}from"../../../internal/anchored-overlay-runtime.js";import{isRtl,rtlAwarePlacement}from"../../../internal/rtl.js";import{activateNonmodalOverlay,composedContains}from"../../../internal/nonmodal-overlay-manager.js";import{relayNativeEvent}from"../../../internal/native-event-relay.js";import{getNumberFormat}from"../../../internal/intl-cache.js";import{finiteRange}from"../../../internal/numbers.js";import{eyeIcon}from"../../../internal/icons.js";import{dispatchNativeEvent,dispatchNativeInputEvent}from"../../../internal/native-event-relay.js";import{cssColor,formatColor,hsva,parseColor,sameColor,withAlphaFormat}from"./color-core.js";import{sizes}from"../../../internal/sizes.styles.js";import{styles}from"./color-picker.styles.js";import{currentValidityValidator}from"../form-validator.js";import{LYRA_DEFAULT_colorPicker,LYRA_DEFAULT_colorPickerCurrentValue,LYRA_DEFAULT_colorPickerEyeDropper,LYRA_DEFAULT_colorPickerHue,LYRA_DEFAULT_colorPickerHueValue,LYRA_DEFAULT_colorPickerOpacity,LYRA_DEFAULT_colorPickerOpacityValue,LYRA_DEFAULT_colorPickerSaturationBrightness,LYRA_DEFAULT_colorPickerSaturationBrightnessValue,LYRA_DEFAULT_colorPickerSwatch,LYRA_DEFAULT_colorPickerSwatches,LYRA_DEFAULT_colorPickerToggleFormat,LYRA_DEFAULT_colorPickerValueField,LYRA_DEFAULT_fieldRequired}from"../../../internal/default-strings.generated.js";const SMALL_STEP=1,LARGE_STEP_MULTIPLIER=10,FORMAT_CYCLE=["hex","rgb","hsl","hsv"];function eyeDropperConstructor(ownerWindow){return ownerWindow?.EyeDropper}function isNodeValue(value){if(value===null||typeof value!="object")return!1;const candidate=value;return typeof candidate.nodeType=="number"&&typeof candidate.getRootNode=="function"}function isElementValue(value){return!isNodeValue(value)||value.nodeType!==1?!1:typeof value.matches=="function"}class ColorPickerBase extends LyraElement{}class LyraColorPicker extends FormAssociated(ColorPickerBase){static{this.defaultStrings={...super.defaultStrings,colorPicker:LYRA_DEFAULT_colorPicker,colorPickerCurrentValue:LYRA_DEFAULT_colorPickerCurrentValue,colorPickerEyeDropper:LYRA_DEFAULT_colorPickerEyeDropper,colorPickerHue:LYRA_DEFAULT_colorPickerHue,colorPickerHueValue:LYRA_DEFAULT_colorPickerHueValue,colorPickerOpacity:LYRA_DEFAULT_colorPickerOpacity,colorPickerOpacityValue:LYRA_DEFAULT_colorPickerOpacityValue,colorPickerSaturationBrightness:LYRA_DEFAULT_colorPickerSaturationBrightness,colorPickerSaturationBrightnessValue:LYRA_DEFAULT_colorPickerSaturationBrightnessValue,colorPickerSwatch:LYRA_DEFAULT_colorPickerSwatch,colorPickerSwatches:LYRA_DEFAULT_colorPickerSwatches,colorPickerToggleFormat:LYRA_DEFAULT_colorPickerToggleFormat,colorPickerValueField:LYRA_DEFAULT_colorPickerValueField,fieldRequired:LYRA_DEFAULT_fieldRequired}}static get validators(){return[currentValidityValidator("required","disabled","value")]}static{this.styles=[LyraElement.styles,srOnly,sizes,styles]}get open(){return this._open}set open(next){const normalized=!!next&&!this.effectiveDisabled;if(normalized!==this._open){if(!this.hasRenderedOnce||!this.isConnected){this.applyOpenState(normalized);return}if(this.emit(normalized?"lr-show":"lr-hide",null,{cancelable:!0}).defaultPrevented){this.toggleAttribute("open",this._open);return}this.applyOpenState(normalized)}}applyOpenState(next){const old=this._open;this._open=next,this.requestUpdate("open",old)}constructor(){super(),this.label="",this.hint="",this.withLabel=!1,this.withHint=!1,this.errorText="",this.accessibleLabel="",this.size="m",this.format="hex",this.opacity=!1,this.uppercase=!1,this.swatches="",this.withoutFormatToggle=!1,this.noFormatToggle=!1,this.inline=!1,this.hoist=!1,this.placement="bottom-start",this._open=!1,this.hasLabel=!1,this.hasHint=!1,this.hasError=!1,this.hasEyeDropper=!1,this.color=hsva(0,0,0,1),this.valueNeedsParse=!1,this.pendingInput="",this.hintId=nextId("color-picker-hint"),this.errorId=nextId("color-picker-error"),this.labelId=nextId("color-picker-label"),this.valueTextId=nextId("color-picker-value"),this.triggerId=nextId("color-picker-trigger"),this.panelId=nextId("color-picker-panel"),this.dragChanged=!1,this.keyboardChanged=!1,this.restoreFocusOnClose=!0,this.eyeDropperGeneration=0,this.suppressDisconnectedClose=!1,this.pendingPlacementEffects=0,this.interactionGeneration=0,this.hasRenderedOnce=!1,this.onDocumentPointerDown=event=>{const target=event.composedPath()[0];if(!(isElementValue(target)&&composedContains(this,target))){if(this.overlayHandle?.isActive()){this.overlayHandle.dismissBackdrop();return}this.restoreFocusOnClose=!1,this.hide()}},this.onTriggerClick=()=>{this.effectiveDisabled||(this.open=!this.open)},this.onPointerMove=event=>{if(this.drag?.pointerId===event.pointerId){if(this.effectiveDisabled){this.cancelDrag();return}this.applyPointer(event)}},this.onPointerUp=event=>{if(this.drag?.pointerId!==event.pointerId)return;if(this.effectiveDisabled){this.cancelDrag();return}this.applyPointer(event);const changed=this.dragChanged;this.endDrag(),changed&&this.emitCommit()},this.onPointerCancel=event=>{this.drag?.pointerId===event.pointerId&&this.cancelDrag()},this.onGridKeyDown=event=>{if(this.effectiveDisabled)return;const step=SMALL_STEP*(event.shiftKey?LARGE_STEP_MULTIPLIER:1),inline=this.inlineStep(event);let next;inline!==null?next=hsva(this.color.h,this.color.s+inline,this.color.v,this.color.a):event.key==="ArrowUp"?next=hsva(this.color.h,this.color.s,this.color.v+step,this.color.a):event.key==="ArrowDown"?next=hsva(this.color.h,this.color.s,this.color.v-step,this.color.a):event.key==="Home"?next=hsva(this.color.h,0,this.color.v,this.color.a):event.key==="End"&&(next=hsva(this.color.h,100,this.color.v,this.color.a)),next&&(event.preventDefault(),this.applyKeyboardColor(next))},this.onHueKeyDown=event=>{if(this.effectiveDisabled)return;const step=SMALL_STEP*(event.shiftKey?LARGE_STEP_MULTIPLIER:1),inline=this.inlineStep(event);let hue;inline!==null?hue=this.color.h+inline:event.key==="ArrowUp"?hue=this.color.h+step:event.key==="ArrowDown"?hue=this.color.h-step:event.key==="Home"?hue=0:event.key==="End"&&(hue=360),hue!==void 0&&(event.preventDefault(),this.applyKeyboardColor(hsva(finiteRange(hue,0,0,360),this.color.s,this.color.v,this.color.a)))},this.onAlphaKeyDown=event=>{if(this.effectiveDisabled)return;const step=SMALL_STEP*(event.shiftKey?LARGE_STEP_MULTIPLIER:1)/100,inline=this.inlineStep(event);let alpha;inline!==null?alpha=this.color.a+inline/100:event.key==="ArrowUp"?alpha=this.color.a+step:event.key==="ArrowDown"?alpha=this.color.a-step:event.key==="Home"?alpha=0:event.key==="End"&&(alpha=1),alpha!==void 0&&(event.preventDefault(),this.applyKeyboardColor(hsva(this.color.h,this.color.s,this.color.v,alpha)))},this.onControlKeyUp=()=>{this.keyboardChanged&&(this.keyboardChanged=!1,this.emitCommit())},this.onFieldInput=event=>{event.stopPropagation(),this.pendingInput=event.target.value},this.onFieldChange=event=>{event.stopPropagation();const field=event.target,parsed=parseColor(field.value);parsed&&this.commitColor(parsed),this.pendingInput="",this.requestUpdate()},this.onFieldKeyDown=event=>{event.key==="Enter"&&(event.preventDefault(),this.onFieldChange(event))},this.onFormatClick=()=>{const index=FORMAT_CYCLE.indexOf(this.format);this.format=FORMAT_CYCLE[(index+1)%FORMAT_CYCLE.length]},this.onEyeDropperClick=()=>{const ownerWindow=this.ownerDocument.defaultView;if(!this.isConnected||!ownerWindow)return;const Constructor=eyeDropperConstructor(ownerWindow);if(!Constructor||this.effectiveDisabled)return;this.cancelEyeDropper();const generation=this.eyeDropperGeneration,controller=new ownerWindow.AbortController;this.eyeDropperAbort=controller,new Constructor().open({signal:controller.signal}).then(result=>{if(controller.signal.aborted||generation!==this.eyeDropperGeneration||!this.isConnected||this.ownerDocument.defaultView!==ownerWindow||this.effectiveDisabled)return;const parsed=parseColor(result?.sRGBHex??"");parsed&&this.commitColor(this.opacity?hsva(parsed.h,parsed.s,parsed.v,this.color.a):parsed)}).catch(()=>{}).finally(()=>{generation===this.eyeDropperGeneration&&(this.eyeDropperAbort=void 0)})},this.onControlFocus=event=>{event.stopPropagation();const previous=event.relatedTarget;isNodeValue(previous)&&this.renderRoot.contains(previous)||relayNativeEvent(this,event)},this.onControlBlur=event=>{event.stopPropagation();const next=event.relatedTarget;isNodeValue(next)&&this.renderRoot.contains(next)||(relayNativeEvent(this,event),this.requestUpdate())},this.controlFocusListener={capture:!0,handleEvent:event=>this.onControlFocus(event)},this.controlBlurListener={capture:!0,handleEvent:event=>this.onControlBlur(event)},this.onSlotChange=event=>{const slot=event.target,assigned=slot.assignedElements({flatten:!0}).length>0;slot.name==="label"&&(this.hasLabel=assigned),slot.name==="hint"&&(this.hasHint=assigned),slot.name==="error"&&(this.hasError=assigned)},this.addEventListener("focusout",()=>this.requestUpdate())}connectedCallback(){super.connectedCallback();const seedEnvironmentState=()=>{const hasSlot=name=>Array.from(this.children).some(el=>el.getAttribute("slot")===name);this.hasLabel=hasSlot("label"),this.hasHint=hasSlot("hint"),this.hasError=hasSlot("error"),this.hasEyeDropper=!!eyeDropperConstructor(this.ownerDocument.defaultView)};this.hasUpdated?seedEnvironmentState():this.seedFirstRenderState(seedEnvironmentState)}disconnectedCallback(){this.suppressDisconnectedClose=this.open,this.open=!1,this.teardownOverlay(!1),this.cancelEyeDropper(),this.interactionGeneration+=1,this.keyboardChanged=!1,this.cancelDrag(),super.disconnectedCallback()}adoptedCallback(){super.adoptedCallback(),this.cancelDrag(),this.cancelEyeDropper()}get value(){return super.value}set value(next){this.endDrag(),super.value=next??"",this.valueNeedsParse=!0}willUpdate(changed){super.willUpdate(changed);const formatChanged=changed.has("format")||changed.has("opacity")||changed.has("uppercase");if(formatChanged&&this.cancelDrag(),this.effectiveDisabled&&(this.open&&this.applyOpenState(!1),this.keyboardChanged=!1,this.cancelDrag()),!this.valueNeedsParse&&!formatChanged)return;const shouldReserialize=formatChanged;if(this.valueNeedsParse){this.valueNeedsParse=!1;const parsed=parseColor(super.value);if(parsed){this.color=parsed,this.writeSerializedValue();return}}shouldReserialize&&parseColor(super.value)!==null&&this.writeSerializedValue()}updated(changed){if(super.updated(changed),changed.has("open")){const suppressClose=!this.open&&this.suppressDisconnectedClose;this.suppressDisconnectedClose=!1;const announceOpen=this.open&&this.hasRenderedOnce&&this.isConnected;this.open&&!this.inline?(this.pendingPlacementEffects=announceOpen?3:2,this.activatePanel()):(this.pendingPlacementEffects=0,this.teardownOverlay(this.restoreFocusOnClose),this.pendingInput=""),this.hasRenderedOnce&&this.isConnected&&!suppressClose&&(this.open&&this.inline?this.emit("lr-after-show"):this.open||this.emit("lr-after-hide"))}else if(changed.has("inline"))if(this.inline){this.teardownOverlay(),this.panelEl()?.style.removeProperty("position");const announceOpen=(this.pendingPlacementEffects&1)!==0;this.pendingPlacementEffects=0,announceOpen&&this.emit("lr-after-show")}else this.open&&this.activatePanel();else this.open&&!this.inline&&(changed.has("placement")||changed.has("size")||changed.has("hoist"))&&this.positionPanel();this.hasRenderedOnce=!0}show(){this.open=!0}hide(){this.open=!1}getFormattedValue(format="hex"){return formatColor(this.color,format,this.uppercase)}getHexString(hue,saturation,brightness,alpha=100){const normalizedAlpha=finiteRange(alpha,100,0,100);return formatColor(hsva(hue,saturation,brightness,normalizedAlpha/100),normalizedAlpha<100?"hexa":"hex",this.uppercase)}click(){this.effectiveDisabled||(this.inline?this.renderRoot?.querySelector('[part~="input"]')?.click():this.triggerEl()?.click())}focus(options){this.effectiveDisabled||(this.inline?this.renderRoot?.querySelector('[part~="grid-handle"]')?.focus(options):this.triggerEl()?.focus(options))}blur(){const active=this.shadowRoot?.activeElement;active&&typeof active.blur=="function"&&active.blur()}reportValidity(){const valid=super.reportValidity();return this.requestUpdate(),valid}setCustomValidity(message){super.setCustomValidity(message),this.requestUpdate()}resetValidity(){super.resetValidity(),this.requestUpdate()}activeFormat(){return withAlphaFormat(this.format,this.opacity)}writeSerializedValue(){const serialized=formatColor(this.color,this.activeFormat(),this.uppercase);return serialized===super.value?!1:(super.value=serialized,!0)}applyColor(next){next.h===this.color.h&&next.s===this.color.s&&next.v===this.color.v&&next.a===this.color.a||(this.color=next);const changed=this.writeSerializedValue();return changed&&(dispatchNativeInputEvent(this),this.emit("lr-input")),changed}emitCommit(){dispatchNativeEvent(this,"change"),this.emit("lr-change",{value:this.value})}commitColor(next){const changed=this.applyColor(next);return changed&&this.emitCommit(),changed}normalizedSwatches(){const raw=this.swatches,entries=Array.isArray(raw)?raw:String(raw??"").split(";"),result=[];for(const entry of entries)if(typeof entry=="string"){const color=entry.trim();color&&result.push({color})}else if(entry&&typeof entry.color=="string"&&entry.color.trim()){const label=typeof entry.label=="string"&&entry.label.trim()?entry.label:void 0;result.push({color:entry.color.trim(),...label===void 0?{}:{label}})}return result}triggerEl(){return this.renderRoot?.querySelector('[part~="trigger"]')}panelEl(){return this.renderRoot?.querySelector('[part~="panel"]')}positionPanel(){this.cleanupPositioner?.(),this.cleanupPositioner=void 0;const anchor=this.triggerEl(),panel=this.panelEl();if(!anchor||!panel)return;const handle=place(anchor,panel,{placement:rtlAwarePlacement(this.placement,this),strategy:this.hoist?"fixed":"absolute"});this.cleanupPositioner=handle,handle.ready.then(positioned=>{if(this.cleanupPositioner!==handle||!this.open||this.inline||!this.isConnected)return;if(!positioned){this.pendingPlacementEffects=0,this.suppressDisconnectedClose=!0,this.applyOpenState(!1);return}const effects=this.pendingPlacementEffects;this.pendingPlacementEffects=0,effects&2&&this.overlayHandle?.focusInitial(),effects&1&&this.emit("lr-after-show")})}activatePanel(){!this.isConnected||this.inline||(this.pendingPlacementEffects|=2,this.positionPanel(),this.restoreFocusOnClose=!0,this.overlayHandle=activateNonmodalOverlay({host:this,panel:()=>this.panelEl(),onEscape:()=>this.hide(),onBackdrop:()=>{this.restoreFocusOnClose=!1,this.hide(),this.open&&(this.restoreFocusOnClose=!0)},restoreFocusTo:this.triggerEl()}),this.lightDismissDocument=this.ownerDocument,this.lightDismissDocument.addEventListener("pointerdown",this.onDocumentPointerDown,!0))}teardownOverlay(restoreFocus=!0){this.cleanupPositioner?.(),this.cleanupPositioner=void 0,this.overlayHandle?.deactivate({restoreFocus}),this.overlayHandle=void 0,this.lightDismissDocument?.removeEventListener("pointerdown",this.onDocumentPointerDown,!0),this.lightDismissDocument=void 0,this.restoreFocusOnClose=!0}beginDrag(event,track,box){const dragWindow=box.ownerDocument.defaultView;if(!this.isConnected||!dragWindow||this.effectiveDisabled||this.drag!==void 0||event.pointerType==="mouse"&&event.button!==0)return;const rect=box.getBoundingClientRect();this.drag={pointerId:event.pointerId,track,rect,rtl:isRtl(this),startColor:{...this.color},startValue:this.captureLiveValueCheckpoint()},this.dragChanged=!1;try{box.setPointerCapture(event.pointerId)}catch{}this.dragWindow=dragWindow,dragWindow.addEventListener("pointermove",this.onPointerMove),dragWindow.addEventListener("pointerup",this.onPointerUp),dragWindow.addEventListener("pointercancel",this.onPointerCancel),dragWindow.addEventListener("lostpointercapture",this.onPointerCancel),this.applyPointer(event)}applyPointer(event){const drag=this.drag;if(!drag)return;const{rect,rtl,track}=drag,rawX=rect.width===0?0:(event.clientX-rect.left)/rect.width,ratioX=finiteRange(rtl?1-rawX:rawX,0,0,1);let next;if(track==="grid"){const rawY=rect.height===0?0:(event.clientY-rect.top)/rect.height,ratioY=finiteRange(rawY,0,0,1);next=hsva(this.color.h,ratioX*100,(1-ratioY)*100,this.color.a)}else track==="hue"?next=hsva(ratioX*360,this.color.s,this.color.v,this.color.a):next=hsva(this.color.h,this.color.s,this.color.v,ratioX);this.dragChanged=this.applyColor(next)||this.dragChanged}cancelDrag(){const drag=this.drag;drag&&(this.endDrag(),this.color=drag.startColor,this.restoreLiveValueCheckpoint(drag.startValue),this.valueNeedsParse=!1)}endDrag(){this.drag=void 0,this.dragChanged=!1;const dragWindow=this.dragWindow;this.dragWindow=void 0,dragWindow?.removeEventListener("pointermove",this.onPointerMove),dragWindow?.removeEventListener("pointerup",this.onPointerUp),dragWindow?.removeEventListener("pointercancel",this.onPointerCancel),dragWindow?.removeEventListener("lostpointercapture",this.onPointerCancel)}inlineStep(event){const rtl=isRtl(this),forward=rtl?"ArrowLeft":"ArrowRight",backward=rtl?"ArrowRight":"ArrowLeft",step=SMALL_STEP*(event.shiftKey?LARGE_STEP_MULTIPLIER:1);return event.key===forward?step:event.key===backward?-step:null}applyKeyboardColor(next){const generation=this.interactionGeneration,changed=this.applyColor(next);generation===this.interactionGeneration&&(this.keyboardChanged=changed||this.keyboardChanged)}onSwatchClick(swatch){const parsed=parseColor(swatch.color);parsed&&this.commitColor(this.opacity?parsed:hsva(parsed.h,parsed.s,parsed.v,1))}cancelEyeDropper(){this.eyeDropperGeneration+=1,this.eyeDropperAbort?.abort(),this.eyeDropperAbort=void 0}formatNumber(value){return getNumberFormat(this.effectiveLocale,{maximumFractionDigits:0}).format(value)}renderGrid(){const saturation=Math.round(this.color.s),brightness=Math.round(this.color.v);return html`<div
+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--)(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,state}from"lit/decorators.js";import{styleMap}from"lit/directives/style-map.js";import{live}from"lit/directives/live.js";import{LyraElement}from"../../../internal/lyra-element.js";import{FormAssociated}from"../../../internal/form-associated.js";import{hostAriaLabel,nextId,srOnly}from"../../../internal/a11y.js";import{deferredPlaceReady as place}from"../../../internal/anchored-overlay-runtime.js";import{isRtl,rtlAwarePlacement}from"../../../internal/rtl.js";import{activateNonmodalOverlay,composedContains}from"../../../internal/nonmodal-overlay-manager.js";import{relayNativeEvent}from"../../../internal/native-event-relay.js";import{getNumberFormat}from"../../../internal/intl-cache.js";import{finiteRange}from"../../../internal/numbers.js";import{activeElementIn}from"../../../internal/active-element.js";import{acquireNativeControlDescription}from"../../../internal/native-control-description.js";import{getOwnDataDescriptor,MISSING_OWN_DATA_DESCRIPTOR,UNSAFE_OWN_DATA_DESCRIPTOR}from"../../../internal/data-descriptors.js";import{eyeIcon}from"../../../internal/icons.js";import{dispatchNativeEvent,dispatchNativeInputEvent}from"../../../internal/native-event-relay.js";import{cssColor,formatColor,hsva,parseColor,sameColor,withAlphaFormat}from"./color-core.js";import{sizes}from"../../../internal/sizes.styles.js";import{styles}from"./color-picker.styles.js";import{currentValidityValidator}from"../form-validator.js";import{LYRA_DEFAULT_colorPicker,LYRA_DEFAULT_colorPickerCurrentValue,LYRA_DEFAULT_colorPickerEyeDropper,LYRA_DEFAULT_colorPickerHue,LYRA_DEFAULT_colorPickerHueValue,LYRA_DEFAULT_colorPickerOpacity,LYRA_DEFAULT_colorPickerOpacityValue,LYRA_DEFAULT_colorPickerSaturationBrightness,LYRA_DEFAULT_colorPickerSaturationBrightnessValue,LYRA_DEFAULT_colorPickerSwatch,LYRA_DEFAULT_colorPickerSwatches,LYRA_DEFAULT_colorPickerToggleFormat,LYRA_DEFAULT_colorPickerValueField,LYRA_DEFAULT_fieldRequired}from"../../../internal/default-strings.generated.js";const SMALL_STEP=1,LARGE_STEP_MULTIPLIER=10,FORMAT_CYCLE=["hex","rgb","hsl","hsv"],MAX_COLOR_PICKER_SWATCHES=1e4,EMPTY_COLOR_PICKER_SWATCHES=Object.freeze([]);function projectColorPickerSwatches(value){try{if(typeof value=="string")return Object.freeze(value.split(";").slice(0,MAX_COLOR_PICKER_SWATCHES).flatMap(entry=>{const color=entry.trim();return color?[Object.freeze({color})]:[]}));if(!Array.isArray(value))return EMPTY_COLOR_PICKER_SWATCHES;const length=getOwnDataDescriptor(value,"length");if(length===MISSING_OWN_DATA_DESCRIPTOR||length===UNSAFE_OWN_DATA_DESCRIPTOR||typeof length.value!="number"||!Number.isSafeInteger(length.value)||length.value<0)return EMPTY_COLOR_PICKER_SWATCHES;const swatches=[];for(let index=0;index<Math.min(length.value,MAX_COLOR_PICKER_SWATCHES);index+=1){const entry=getOwnDataDescriptor(value,String(index));if(entry===MISSING_OWN_DATA_DESCRIPTOR||entry===UNSAFE_OWN_DATA_DESCRIPTOR)continue;if(typeof entry.value=="string"){const color2=entry.value.trim();color2&&swatches.push(Object.freeze({color:color2}));continue}if(entry.value===null||typeof entry.value!="object"||Array.isArray(entry.value))continue;const color=getOwnDataDescriptor(entry.value,"color"),label=getOwnDataDescriptor(entry.value,"label");if(color===MISSING_OWN_DATA_DESCRIPTOR||color===UNSAFE_OWN_DATA_DESCRIPTOR||typeof color.value!="string"||color.value.trim()==="")continue;const labelValue=label===MISSING_OWN_DATA_DESCRIPTOR||label===UNSAFE_OWN_DATA_DESCRIPTOR?void 0:typeof label.value=="string"&&label.value.trim()?label.value:void 0;swatches.push(Object.freeze({color:color.value.trim(),...labelValue===void 0?{}:{label:labelValue}}))}return Object.freeze(swatches)}catch{return EMPTY_COLOR_PICKER_SWATCHES}}function eyeDropperConstructor(ownerWindow){return ownerWindow?.EyeDropper}function isNodeValue(value){if(value===null||typeof value!="object")return!1;const candidate=value;return typeof candidate.nodeType=="number"&&typeof candidate.getRootNode=="function"}function isElementValue(value){return!isNodeValue(value)||value.nodeType!==1?!1:typeof value.matches=="function"}class ColorPickerBase extends LyraElement{}class LyraColorPicker extends FormAssociated(ColorPickerBase){static{this.defaultStrings={...super.defaultStrings,colorPicker:LYRA_DEFAULT_colorPicker,colorPickerCurrentValue:LYRA_DEFAULT_colorPickerCurrentValue,colorPickerEyeDropper:LYRA_DEFAULT_colorPickerEyeDropper,colorPickerHue:LYRA_DEFAULT_colorPickerHue,colorPickerHueValue:LYRA_DEFAULT_colorPickerHueValue,colorPickerOpacity:LYRA_DEFAULT_colorPickerOpacity,colorPickerOpacityValue:LYRA_DEFAULT_colorPickerOpacityValue,colorPickerSaturationBrightness:LYRA_DEFAULT_colorPickerSaturationBrightness,colorPickerSaturationBrightnessValue:LYRA_DEFAULT_colorPickerSaturationBrightnessValue,colorPickerSwatch:LYRA_DEFAULT_colorPickerSwatch,colorPickerSwatches:LYRA_DEFAULT_colorPickerSwatches,colorPickerToggleFormat:LYRA_DEFAULT_colorPickerToggleFormat,colorPickerValueField:LYRA_DEFAULT_colorPickerValueField,fieldRequired:LYRA_DEFAULT_fieldRequired}}static get validators(){return[currentValidityValidator("required","disabled","value")]}static{this.styles=[LyraElement.styles,srOnly,sizes,styles]}get open(){return this._open}set open(next){const normalized=!!next&&!this.effectiveDisabled;if(normalized!==this._open){if(!this.hasRenderedOnce||!this.isConnected){this.applyOpenState(normalized);return}if(this.emit(normalized?"lr-show":"lr-hide",null,{cancelable:!0}).defaultPrevented){this.toggleAttribute("open",this._open);return}this.applyOpenState(normalized)}}applyOpenState(next){const old=this._open;this._open=next,this.requestUpdate("open",old)}get liveDisabled(){return this.effectiveDisabled||typeof this.matches=="function"&&this.matches(":disabled")}syncExternalDescription(){const target=this.isConnected?this.triggerEl():null;if(!target){this.releaseExternalDescription();return}this.externalDescriptionLease?this.externalDescriptionLease.update(target):this.externalDescriptionLease=acquireNativeControlDescription(this,target,()=>this.localDescriptionIds)}releaseExternalDescription(){this.externalDescriptionLease?.release(),this.externalDescriptionLease=void 0}constructor(){super(),this.label="",this.hint="",this.withLabel=!1,this.withHint=!1,this.errorText="",this.accessibleLabel="",this.size="m",this.format="hex",this.opacity=!1,this.uppercase=!1,this.swatches="",this.withoutFormatToggle=!1,this.noFormatToggle=!1,this.inline=!1,this.hoist=!1,this.placement="bottom-start",this._open=!1,this.hasLabel=!1,this.hasHint=!1,this.hasError=!1,this.hasEyeDropper=!1,this.color=hsva(0,0,0,1),this.valueNeedsParse=!1,this.localDescriptionIds="",this.hintId=nextId("color-picker-hint"),this.errorId=nextId("color-picker-error"),this.labelId=nextId("color-picker-label"),this.valueTextId=nextId("color-picker-value"),this.triggerId=nextId("color-picker-trigger"),this.panelId=nextId("color-picker-panel"),this.dragChanged=!1,this.keyboardChanged=!1,this.restoreFocusOnClose=!0,this.eyeDropperGeneration=0,this.suppressDisconnectedClose=!1,this.pendingPlacementEffects=0,this.interactionGeneration=0,this.hasRenderedOnce=!1,this.projectedSwatches=EMPTY_COLOR_PICKER_SWATCHES,this.onDocumentPointerDown=event=>{const target=event.composedPath()[0];if(!(isElementValue(target)&&composedContains(this,target))){if(this.overlayHandle?.isActive()){this.overlayHandle.dismissBackdrop();return}this.restoreFocusOnClose=!1,this.hide()}},this.onTriggerClick=()=>{this.effectiveDisabled||(this.open=!this.open)},this.onPointerMove=event=>{if(this.drag?.pointerId===event.pointerId){if(this.effectiveDisabled){this.cancelDrag();return}this.applyPointer(event)}},this.onPointerUp=event=>{if(this.drag?.pointerId!==event.pointerId)return;if(this.effectiveDisabled){this.cancelDrag();return}this.applyPointer(event);const changed=this.dragChanged;this.endDrag(),changed&&this.emitCommit()},this.onPointerCancel=event=>{this.drag?.pointerId===event.pointerId&&this.cancelDrag()},this.onGridKeyDown=event=>{if(this.effectiveDisabled)return;const step=SMALL_STEP*(event.shiftKey?LARGE_STEP_MULTIPLIER:1),inline=this.inlineStep(event);let next;inline!==null?next=hsva(this.color.h,this.color.s+inline,this.color.v,this.color.a):event.key==="ArrowUp"?next=hsva(this.color.h,this.color.s,this.color.v+step,this.color.a):event.key==="ArrowDown"?next=hsva(this.color.h,this.color.s,this.color.v-step,this.color.a):event.key==="Home"?next=hsva(this.color.h,0,this.color.v,this.color.a):event.key==="End"&&(next=hsva(this.color.h,100,this.color.v,this.color.a)),next&&(event.preventDefault(),this.applyKeyboardColor(next))},this.onHueKeyDown=event=>{if(this.effectiveDisabled)return;const step=SMALL_STEP*(event.shiftKey?LARGE_STEP_MULTIPLIER:1),inline=this.inlineStep(event);let hue;inline!==null?hue=this.color.h+inline:event.key==="ArrowUp"?hue=this.color.h+step:event.key==="ArrowDown"?hue=this.color.h-step:event.key==="Home"?hue=0:event.key==="End"&&(hue=360),hue!==void 0&&(event.preventDefault(),this.applyKeyboardColor(hsva(finiteRange(hue,0,0,360),this.color.s,this.color.v,this.color.a)))},this.onAlphaKeyDown=event=>{if(this.effectiveDisabled)return;const step=SMALL_STEP*(event.shiftKey?LARGE_STEP_MULTIPLIER:1)/100,inline=this.inlineStep(event);let alpha;inline!==null?alpha=this.color.a+inline/100:event.key==="ArrowUp"?alpha=this.color.a+step:event.key==="ArrowDown"?alpha=this.color.a-step:event.key==="Home"?alpha=0:event.key==="End"&&(alpha=1),alpha!==void 0&&(event.preventDefault(),this.applyKeyboardColor(hsva(this.color.h,this.color.s,this.color.v,alpha)))},this.onControlKeyUp=()=>{this.keyboardChanged&&(this.keyboardChanged=!1,this.emitCommit())},this.onFieldInput=event=>{if(event.stopPropagation(),this.liveDisabled){this.pendingInput=void 0,this.requestUpdate();return}this.pendingInput=event.target.value},this.onFieldChange=event=>{event.stopPropagation();const field=event.target;if(this.liveDisabled){this.pendingInput=void 0,this.requestUpdate();return}const parsed=parseColor(field.value);parsed&&this.commitColor(parsed),this.pendingInput=void 0,this.requestUpdate()},this.onFieldKeyDown=event=>{this.liveDisabled||event.key==="Enter"&&(event.preventDefault(),this.onFieldChange(event))},this.onFormatClick=()=>{if(this.liveDisabled)return;const index=FORMAT_CYCLE.indexOf(this.format);this.format=FORMAT_CYCLE[(index+1)%FORMAT_CYCLE.length]},this.onEyeDropperClick=()=>{const ownerWindow=this.ownerDocument.defaultView;if(!this.isConnected||!ownerWindow)return;const Constructor=eyeDropperConstructor(ownerWindow);if(!Constructor||this.effectiveDisabled)return;this.cancelEyeDropper();const generation=this.eyeDropperGeneration,controller=new ownerWindow.AbortController;this.eyeDropperAbort=controller,new Constructor().open({signal:controller.signal}).then(result=>{if(controller.signal.aborted||generation!==this.eyeDropperGeneration||!this.isConnected||this.ownerDocument.defaultView!==ownerWindow||this.effectiveDisabled)return;const parsed=parseColor(result?.sRGBHex??"");parsed&&this.commitColor(this.opacity?hsva(parsed.h,parsed.s,parsed.v,this.color.a):parsed)}).catch(()=>{}).finally(()=>{generation===this.eyeDropperGeneration&&(this.eyeDropperAbort=void 0)})},this.onControlFocus=event=>{event.stopPropagation();const previous=event.relatedTarget;isNodeValue(previous)&&this.renderRoot.contains(previous)||relayNativeEvent(this,event)},this.onControlBlur=event=>{event.stopPropagation();const next=event.relatedTarget;isNodeValue(next)&&this.renderRoot.contains(next)||(relayNativeEvent(this,event),this.requestUpdate())},this.controlFocusListener={capture:!0,handleEvent:event=>this.onControlFocus(event)},this.controlBlurListener={capture:!0,handleEvent:event=>this.onControlBlur(event)},this.onSlotChange=event=>{const slot=event.target,assigned=slot.assignedElements({flatten:!0}).length>0;slot.name==="label"&&(this.hasLabel=assigned),slot.name==="hint"&&(this.hasHint=assigned),slot.name==="error"&&(this.hasError=assigned)},this.addEventListener("focusout",()=>this.requestUpdate())}connectedCallback(){super.connectedCallback(),this.hasUpdated&&this.syncExternalDescription();const seedEnvironmentState=()=>{const hasSlot=name=>Array.from(this.children).some(el=>el.getAttribute("slot")===name);this.hasLabel=hasSlot("label"),this.hasHint=hasSlot("hint"),this.hasError=hasSlot("error"),this.hasEyeDropper=!!eyeDropperConstructor(this.ownerDocument.defaultView)};this.hasUpdated?seedEnvironmentState():this.seedFirstRenderState(seedEnvironmentState)}disconnectedCallback(){this.releaseExternalDescription(),this.suppressDisconnectedClose=this.open,this.open=!1,this.teardownOverlay(!1),this.cancelEyeDropper(),this.interactionGeneration+=1,this.keyboardChanged=!1,this.cancelDrag(),super.disconnectedCallback()}adoptedCallback(){super.adoptedCallback(),this.releaseExternalDescription(),this.isConnected&&this.hasUpdated&&this.syncExternalDescription(),this.cancelDrag(),this.cancelEyeDropper()}get value(){return super.value}set value(next){this.endDrag(),super.value=next??"",this.valueNeedsParse=!0}willUpdate(changed){super.willUpdate(changed);const formatChanged=changed.has("format")||changed.has("opacity")||changed.has("uppercase");if(formatChanged&&this.cancelDrag(),this.liveDisabled&&(this.open&&this.applyOpenState(!1),this.pendingInput=void 0,this.keyboardChanged=!1,this.cancelDrag()),!this.valueNeedsParse&&!formatChanged)return;const shouldReserialize=formatChanged;if(this.valueNeedsParse){this.valueNeedsParse=!1;const parsed=parseColor(super.value);if(parsed){this.color=parsed,this.writeSerializedValue();return}}shouldReserialize&&parseColor(super.value)!==null&&this.writeSerializedValue()}updated(changed){if(super.updated(changed),this.syncExternalDescription(),changed.has("open")){const suppressClose=!this.open&&this.suppressDisconnectedClose;this.suppressDisconnectedClose=!1;const announceOpen=this.open&&this.hasRenderedOnce&&this.isConnected;this.open&&!this.inline?(this.pendingPlacementEffects=announceOpen?3:2,this.activatePanel()):(this.pendingPlacementEffects=0,this.teardownOverlay(this.restoreFocusOnClose),this.pendingInput=void 0),this.hasRenderedOnce&&this.isConnected&&!suppressClose&&(this.open&&this.inline?this.emit("lr-after-show"):this.open||this.emit("lr-after-hide"))}else if(changed.has("inline"))if(this.inline){this.teardownOverlay(),this.panelEl()?.style.removeProperty("position");const announceOpen=(this.pendingPlacementEffects&1)!==0;this.pendingPlacementEffects=0,announceOpen&&this.emit("lr-after-show")}else this.open&&this.activatePanel();else this.open&&!this.inline&&(changed.has("placement")||changed.has("size")||changed.has("hoist"))&&this.positionPanel();this.hasRenderedOnce=!0}show(){this.open=!0}hide(){this.open=!1}getFormattedValue(format="hex"){return formatColor(this.color,format,this.uppercase)}getHexString(hue,saturation,brightness,alpha=100){const normalizedAlpha=finiteRange(alpha,100,0,100);return formatColor(hsva(hue,saturation,brightness,normalizedAlpha/100),normalizedAlpha<100?"hexa":"hex",this.uppercase)}click(){this.effectiveDisabled||(this.inline?this.renderRoot?.querySelector('[part~="input"]')?.click():this.triggerEl()?.click())}focus(options){this.effectiveDisabled||(this.inline?this.renderRoot?.querySelector('[part~="grid-handle"]')?.focus(options):this.triggerEl()?.focus(options))}blur(){const active=activeElementIn(this.shadowRoot);active&&typeof active.blur=="function"&&active.blur()}reportValidity(){const valid=super.reportValidity();return this.requestUpdate(),valid}setCustomValidity(message){super.setCustomValidity(message),this.requestUpdate()}resetValidity(){super.resetValidity(),this.requestUpdate()}activeFormat(){return withAlphaFormat(this.format,this.opacity)}writeSerializedValue(){const serialized=formatColor(this.color,this.activeFormat(),this.uppercase);return serialized===super.value?!1:(super.value=serialized,!0)}applyColor(next){next.h===this.color.h&&next.s===this.color.s&&next.v===this.color.v&&next.a===this.color.a||(this.color=next);const changed=this.writeSerializedValue();return changed&&(dispatchNativeInputEvent(this),this.emit("lr-input")),changed}emitCommit(){dispatchNativeEvent(this,"change"),this.emit("lr-change",{value:this.value})}commitColor(next){const changed=this.applyColor(next);return changed&&this.emitCommit(),changed}normalizedSwatches(){const source=this.swatches;return source!==this.swatchSource&&(this.swatchSource=source,this.projectedSwatches=projectColorPickerSwatches(source)),this.projectedSwatches}triggerEl(){return this.renderRoot?.querySelector('[part~="trigger"]')}panelEl(){return this.renderRoot?.querySelector('[part~="panel"]')}positionPanel(){this.cleanupPositioner?.(),this.cleanupPositioner=void 0;const anchor=this.triggerEl(),panel=this.panelEl();if(!anchor||!panel)return;const handle=place(anchor,panel,{placement:rtlAwarePlacement(this.placement,this),strategy:this.hoist?"fixed":"absolute"});this.cleanupPositioner=handle,handle.ready.then(positioned=>{if(this.cleanupPositioner!==handle||!this.open||this.inline||!this.isConnected)return;if(!positioned){this.pendingPlacementEffects=0,this.suppressDisconnectedClose=!0,this.applyOpenState(!1);return}const effects=this.pendingPlacementEffects;this.pendingPlacementEffects=0,effects&2&&this.overlayHandle?.focusInitial(),effects&1&&this.emit("lr-after-show")})}activatePanel(){!this.isConnected||this.inline||(this.pendingPlacementEffects|=2,this.positionPanel(),this.restoreFocusOnClose=!0,this.overlayHandle=activateNonmodalOverlay({host:this,panel:()=>this.panelEl(),onEscape:()=>this.hide(),onBackdrop:()=>{this.restoreFocusOnClose=!1,this.hide(),this.open&&(this.restoreFocusOnClose=!0)},restoreFocusTo:this.triggerEl()}),this.lightDismissDocument=this.ownerDocument,this.lightDismissDocument.addEventListener("pointerdown",this.onDocumentPointerDown,!0))}teardownOverlay(restoreFocus=!0){this.cleanupPositioner?.(),this.cleanupPositioner=void 0,this.overlayHandle?.deactivate({restoreFocus}),this.overlayHandle=void 0,this.lightDismissDocument?.removeEventListener("pointerdown",this.onDocumentPointerDown,!0),this.lightDismissDocument=void 0,this.restoreFocusOnClose=!0}beginDrag(event,track,box){const dragWindow=box.ownerDocument.defaultView;if(!this.isConnected||!dragWindow||this.effectiveDisabled||this.drag!==void 0||event.pointerType==="mouse"&&event.button!==0)return;const rect=box.getBoundingClientRect();this.drag={pointerId:event.pointerId,track,rect,rtl:isRtl(this),startColor:{...this.color},startValue:this.captureLiveValueCheckpoint()},this.dragChanged=!1;try{box.setPointerCapture(event.pointerId)}catch{}this.dragWindow=dragWindow,dragWindow.addEventListener("pointermove",this.onPointerMove),dragWindow.addEventListener("pointerup",this.onPointerUp),dragWindow.addEventListener("pointercancel",this.onPointerCancel),dragWindow.addEventListener("lostpointercapture",this.onPointerCancel),this.applyPointer(event)}applyPointer(event){const drag=this.drag;if(!drag)return;const{rect,rtl,track}=drag,rawX=rect.width===0?0:(event.clientX-rect.left)/rect.width,ratioX=finiteRange(rtl?1-rawX:rawX,0,0,1);let next;if(track==="grid"){const rawY=rect.height===0?0:(event.clientY-rect.top)/rect.height,ratioY=finiteRange(rawY,0,0,1);next=hsva(this.color.h,ratioX*100,(1-ratioY)*100,this.color.a)}else track==="hue"?next=hsva(ratioX*360,this.color.s,this.color.v,this.color.a):next=hsva(this.color.h,this.color.s,this.color.v,ratioX);this.dragChanged=this.applyColor(next)||this.dragChanged}cancelDrag(){const drag=this.drag;drag&&(this.endDrag(),this.color=drag.startColor,this.restoreLiveValueCheckpoint(drag.startValue),this.valueNeedsParse=!1)}endDrag(){this.drag=void 0,this.dragChanged=!1;const dragWindow=this.dragWindow;this.dragWindow=void 0,dragWindow?.removeEventListener("pointermove",this.onPointerMove),dragWindow?.removeEventListener("pointerup",this.onPointerUp),dragWindow?.removeEventListener("pointercancel",this.onPointerCancel),dragWindow?.removeEventListener("lostpointercapture",this.onPointerCancel)}inlineStep(event){const rtl=isRtl(this),forward=rtl?"ArrowLeft":"ArrowRight",backward=rtl?"ArrowRight":"ArrowLeft",step=SMALL_STEP*(event.shiftKey?LARGE_STEP_MULTIPLIER:1);return event.key===forward?step:event.key===backward?-step:null}applyKeyboardColor(next){const generation=this.interactionGeneration,changed=this.applyColor(next);generation===this.interactionGeneration&&(this.keyboardChanged=changed||this.keyboardChanged)}onSwatchClick(swatch){if(this.liveDisabled)return;const parsed=parseColor(swatch.color);parsed&&this.commitColor(this.opacity?parsed:hsva(parsed.h,parsed.s,parsed.v,1))}cancelEyeDropper(){this.eyeDropperGeneration+=1,this.eyeDropperAbort?.abort(),this.eyeDropperAbort=void 0}formatNumber(value){return getNumberFormat(this.effectiveLocale,{maximumFractionDigits:0}).format(value)}renderGrid(){const saturation=Math.round(this.color.s),brightness=Math.round(this.color.v);return html`<div
       part="grid"
       style=${styleMap({"--lr-color-picker-grid-hue":cssColor(hsva(this.color.h,100,100,1))})}
       @pointerdown=${event=>this.beginDrag(event,"grid",event.currentTarget)}
@@ -74,7 +74,7 @@ var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3
             @click=${()=>this.onSwatchClick(entry)}
           ></button>
         `})}
-    </div>`}renderPanel(name,labelledBy,describedBy,invalid){const entries=this.normalizedSwatches(),fieldValue=this.pendingInput||this.getFormattedValue(this.activeFormat());return html`<div
+    </div>`}renderPanel(name,labelledBy,describedBy,invalid){const entries=this.normalizedSwatches(),fieldValue=this.pendingInput??this.getFormattedValue(this.activeFormat());return html`<div
       id=${this.panelId}
       part="panel"
       role="dialog"
@@ -99,7 +99,7 @@ var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3
           spellcheck="false"
           autocapitalize="off"
           autocomplete="off"
-          .value=${fieldValue}
+          .value=${live(fieldValue)}
           aria-label=${this.localize("colorPickerValueField")}
           aria-required=${this.required?"true":"false"}
           aria-invalid=${invalid?"true":"false"}
@@ -131,7 +131,7 @@ var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3
               ><span part="eyedropper-button__caret eye-dropper-button__caret"></span></button>`:nothing}
       </div>
       ${entries.length>0?this.renderSwatches(entries):nothing}
-    </div>`}render(){const hasLabel=this.withLabel||this.hasLabel||!!this.label,hasHint=this.withHint||this.hasHint||!!this.hint,hasError=this.hasError||!!this.errorText,name=hostAriaLabel(this)??(hasLabel?"":this.localize("colorPicker")),labelledBy=!this.accessibleLabel&&hasLabel?this.labelId:"",userInvalid=this.internals.states.has("user-invalid"),invalid=hasError||userInvalid,describedBy=[hasError?this.errorId:"",hasHint?this.hintId:"",this.valueTextId].filter(Boolean).join(" ");return html`<div
+    </div>`}render(){const hasLabel=this.withLabel||this.hasLabel||!!this.label,hasHint=this.withHint||this.hasHint||!!this.hint,hasError=this.hasError||!!this.errorText,name=hostAriaLabel(this)??(hasLabel?"":this.localize("colorPicker")),labelledBy=!this.accessibleLabel&&hasLabel?this.labelId:"",userInvalid=this.internals.states.has("user-invalid"),invalid=hasError||userInvalid,describedBy=this.localDescriptionIds=[hasError?this.errorId:"",hasHint?this.hintId:"",this.valueTextId].filter(Boolean).join(" ");return html`<div
       part="form-control base color-picker"
       @focus=${this.controlFocusListener}
       @blur=${this.controlBlurListener}

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

@@ -59,6 +59,16 @@ export interface ComboboxFilterDetail{value:string;}export interface LyraCombobo
 * The editable combobox input exposes explicit stateful `aria-invalid`: visible error chrome wins
 * immediately, while intrinsic/custom invalidity is exposed only after interaction.
 *
+* Host `aria-describedby` targets supplement internal hint/error guidance on the semantic
+* control, including live target replacement and document adoption. Removing label, hint, or
+* error attributes safely omits their content while retaining native null property readback.
+* Mounted option `selected` writes immediately update the live value and submission silently;
+* reset defaults stay independent, and later default changes preserve a dirty selection.
+*
+* Composing keys stay with text editing. Inert source options and their inert ancestors are
+* unavailable through popup rows; named option adornment mutations refresh their presentation.
+* Single mode exposes one selected occurrence while retaining backing multiple-selection history.
+*
 * @customElement lr-combobox
 * @slot - `<lr-option>` elements.
 * @slot label - Custom label content.
@@ -94,9 +104,9 @@ export interface ComboboxFilterDetail{value:string;}export interface LyraCombobo
 * @event {CustomEvent<ComboboxFilterDetail>} lr-filter - The in-progress filter text changed
 * through user input. `detail.value` is the live filter string, which is not the same thing as the
 * host's `value` (the committed selection). User-input only: typing and the clear button announce
-* it, while the programmatic paths that blank the filter — picking a row, `form.reset()`,
-* dismissing the listbox, a `value` write, `setRangeText()` — are all silent, mirroring
-* `<lr-input>`'s `lr-input`.
+* it. Programmatic edits, including `setRangeText()`, are silent. `setRangeText()` preserves
+* the replaced filter text and synchronizes its query/options without changing selected value.
+* Picking a row, resetting the form, and dismissing the listbox also update the filter silently.
 * @event {FocusEvent} blur - Re-dispatched from the internal native input as a bubbling, composed,
 * non-cancelable event.
 * @event {FocusEvent} focus - Re-dispatched from the internal native input as a bubbling, composed,
@@ -276,7 +286,7 @@ private pendingSelectedRowValues?;private _rowsByValue;private internals;private
 customError:string|null;private _fieldsetDisabled;private listId;private inputId;private cleanup?;private listboxPositioned;private positioningGeneration;private positioningReady;private resolvePositioningReady?;private overlayHandle?;private restoreFocusOnClose;private restoringOverlayFocus;private pointerListenerDocument?;private pointerListener?;private _isFirstUpdate;private openVetoed;
 /** Set only by `hide()`. Cleanup is applied in `willUpdate()` after `lr-hide` accepts the close,
 * so a veto remains an atomic no-op for the query, active row, and async result set. */
-private closeCleanupPending;private transitionToken;private transitionWaiters;private _selected;private _valueDirty;private _multiple;private _disabled;private _required;private _defaultSelected;private _defaultCaptured;private _restoredStateActive;private _name;private validationTargetOverride?;
+private closeCleanupPending;private transitionToken;private transitionWaiters;private _selected;private singleSelectedOption?;private readonly sourceOptionsByRow;private _valueDirty;private _multiple;private _disabled;private _required;private _defaultSelected;private _defaultCaptured;private _restoredStateActive;private _name;private validationTargetOverride?;
 /**
 * Bounds the popup to roughly this many option rows, leaving the rest reachable by scrolling.
 *
@@ -310,7 +320,7 @@ private get liveDisabled();focus(options?:FocusOptions):void;blur():void;
 *  no native click activation behavior of its own, so a generic form-submit helper, test
 *  utility, or automation script calling `.click()` on `<lr-combobox>` directly (rather than on
 *  its shadow-internal parts) would otherwise silently do nothing. */
-click():void;select():void;setSelectionRange(start:number|null,end:number|null,direction?:LyraComboboxSelectionDirection):void;setRangeText(replacement:string):void;setRangeText(replacement:string,start:number,end:number,selectMode?:SelectionMode):void;connectedCallback():void;adoptedCallback():void;private syncSourceErrorAnnouncementSink;private releaseSourceErrorAnnouncementSink;protected willUpdate(changed:PropertyValues):void;
+click():void;select():void;setSelectionRange(start:number|null,end:number|null,direction?:LyraComboboxSelectionDirection):void;setRangeText(replacement:string):void;setRangeText(replacement:string,start:number,end:number,selectMode?:SelectionMode):void;private localDescriptionIds;private externalDescriptionLease?;private syncExternalDescription;private releaseExternalDescription;connectedCallback():void;adoptedCallback():void;private syncSourceErrorAnnouncementSink;private releaseSourceErrorAnnouncementSink;protected willUpdate(changed:PropertyValues):void;
 /** Submitted field name.
 * @default '' */
 get name():string;set name(next:string|null);
@@ -413,10 +423,11 @@ setCustomValidity(message:string):void;disconnectedCallback():void;private colle
 /**
 * Cloned adornment nodes, keyed by the option they came from. Cached because `effectiveRows` runs
 * on every render pass: handing Lit a fresh clone each time would rebuild the whole popup's
-* adornment DOM on every keystroke. Dropped wholesale in `collectOptions()`, which is the only
-* place the option set can change.
+* adornment DOM on every keystroke. Option notifications compare the authored markup snapshot
+* before invalidating it; changes to a label or secondary text leave unchanged clones intact.
+* Recollecting the option set drops the snapshots so detached edits are picked up as well.
 */
-private adornmentClones;
+private adornmentClones;private adornmentMarkup;
 /**
 * `<lr-option>` documents `start`/`end` (plus the Shoelace `prefix`/`suffix` aliases) adornment
 * slots, but the popup is built from row DATA rather than from the option elements, so slotted