@aceshooting/lyra-ui 9.1.1 → 11.0.0

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{nextId,srOnly}from"../../../internal/a11y.js";import{place}from"../../../internal/positioner.js";import{isRtl,rtlAwarePlacement}from"../../../internal/rtl.js";import{activateOverlay,composedContains}from"../../../internal/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.forcedOpenChange||!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.forcedOpenChange=!1,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)!==void 0};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){if(this.open){this.forcedOpenChange=!0;try{this.open=!1}finally{this.forcedOpenChange=!1}}this.keyboardChanged=!1,this.cancelDrag()}if(!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.suppressDisconnectedClose&&!this.open;this.suppressDisconnectedClose=!1,this.open&&!this.inline?this.activatePanel():(this.teardownOverlay(this.restoreFocusOnClose),this.pendingInput=""),this.hasRenderedOnce&&this.isConnected&&!suppressClose&&this.emit(this.open?"lr-after-show":"lr-after-hide")}else changed.has("inline")?this.inline?(this.teardownOverlay(),this.panelEl()?.style.removeProperty("position")):this.open&&this.activatePanel():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 entry&&typeof entry.color=="string"&&entry.color.trim()&&result.push({color:entry.color.trim(),label:entry.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();!anchor||!panel||(this.cleanupPositioner=place(anchor,panel,{placement:rtlAwarePlacement(this.placement,this),strategy:this.hoist?"fixed":"absolute"}))}activatePanel(){!this.isConnected||this.inline||(this.positionPanel(),this.restoreFocusOnClose=!0,this.overlayHandle=activateOverlay({host:this,panel:()=>this.panelEl(),onEscape:()=>this.hide(),onBackdrop:()=>{this.restoreFocusOnClose=!1,this.hide(),this.open&&(this.restoreFocusOnClose=!0)},restoreFocusTo:this.triggerEl(),modal:!1,trapFocus:!1}),this.overlayHandle.focusInitial(),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{LyraElement}from"../../../internal/lyra-element.js";import{FormAssociated}from"../../../internal/form-associated.js";import{hostAriaLabel,nextId,srOnly}from"../../../internal/a11y.js";import{place}from"../../../internal/positioner.js";import{isRtl,rtlAwarePlacement}from"../../../internal/rtl.js";import{activateOverlay,composedContains}from"../../../internal/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.forcedOpenChange||!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.forcedOpenChange=!1,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)!==void 0};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){if(this.open){this.forcedOpenChange=!0;try{this.open=!1}finally{this.forcedOpenChange=!1}}this.keyboardChanged=!1,this.cancelDrag()}if(!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.suppressDisconnectedClose&&!this.open;this.suppressDisconnectedClose=!1,this.open&&!this.inline?this.activatePanel():(this.teardownOverlay(this.restoreFocusOnClose),this.pendingInput=""),this.hasRenderedOnce&&this.isConnected&&!suppressClose&&this.emit(this.open?"lr-after-show":"lr-after-hide")}else changed.has("inline")?this.inline?(this.teardownOverlay(),this.panelEl()?.style.removeProperty("position")):this.open&&this.activatePanel():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 entry&&typeof entry.color=="string"&&entry.color.trim()&&result.push({color:entry.color.trim(),label:entry.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();!anchor||!panel||(this.cleanupPositioner=place(anchor,panel,{placement:rtlAwarePlacement(this.placement,this),strategy:this.hoist?"fixed":"absolute"}))}activatePanel(){!this.isConnected||this.inline||(this.positionPanel(),this.restoreFocusOnClose=!0,this.overlayHandle=activateOverlay({host:this,panel:()=>this.panelEl(),onEscape:()=>this.hide(),onBackdrop:()=>{this.restoreFocusOnClose=!1,this.hide(),this.open&&(this.restoreFocusOnClose=!0)},restoreFocusTo:this.triggerEl(),modal:!1,trapFocus:!1}),this.overlayHandle.focusInitial(),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
       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)}
@@ -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=this.accessibleLabel||(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=[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/color-picker/color-picker.styles.js

@@ -1,13 +1,6 @@
 import{css}from"lit";import{formControlRequiredMarker}from"../../../internal/form-control.styles.js";const styles=css`
   :host {
     display: inline-block;
-    /* The trigger swatch is square and sits in toolbar rows beside real form controls, so its edge
-       IS the shared form-control height: it reads the ONE ladder (internal/sizes.styles.ts) rather
-       than a private copy of the same six values. That ladder matches both spellings of every tier
-       in one selector list, so size="small" and size="s" resolve identically here with no
-       per-component alias rules. The fallback arm names the default tier's own value, so the swatch
-       still paints at its documented size if this rule is ever applied without the shared ladder
-       sheet alongside it. */
     --_lr-color-picker-swatch-size: var(
       --lr-form-control-height,
       var(--lr-size-2-5rem)
@@ -37,15 +30,9 @@ import{css}from"lit";import{formControlRequiredMarker}from"../../../internal/for
     );
     --_lr-color-picker-checker-color: var(--lr-color-border);
     --_lr-color-picker-checker-size: var(--lr-size-0-5rem);
-    /* The sRGB hue wheel's own stops. These are the algorithm's data, not a design decision, so
-       they stay literal -- but they are exposed as one overridable list because a consumer
-       theming a wide-gamut or perceptually-uniform ramp needs to replace exactly this. Both text
-       directions read the same list; only the gradient's direction differs. */
     --_lr-color-picker-hue-stops: hsl(0 100% 50%), hsl(60 100% 50%),
       hsl(120 100% 50%), hsl(180 100% 50%), hsl(240 100% 50%), hsl(300 100% 50%),
       hsl(360 100% 50%);
-    /* Private first-render fallbacks. The live public values are written inline on the relevant
-       color-bearing elements; an authored public value at that same element remains authoritative. */
     --_lr-color-picker-swatch-color: transparent;
     --_lr-color-picker-grid-hue: transparent;
     --_lr-color-picker-opacity-gradient: none;
@@ -60,17 +47,11 @@ import{css}from"lit";import{formControlRequiredMarker}from"../../../internal/for
     color: var(--lr-color-text);
     font-size: var(--lr-font-size-md-sm);
   }
-  /* [part]:empty never matches -- the part always contains a literal <slot> child element
-     regardless of assigned content -- so real emptiness is tracked in JS (hasLabel/hasHint/
-     hasError) and reflected via the hidden attribute instead. Without this, the required marker below (which attaches to this box) would render a stray glyph with nothing before it
-     whenever label is unset. */
   [part~="label"][hidden] {
     display: none;
   }
   ${formControlRequiredMarker}
 
-  /* The alpha checkerboard every translucent surface sits on. A conic-gradient tile beats four
-     stacked linear gradients and needs no extra element. */
   [part~='preview'],
   [part~='swatch'] {
     background-color: var(--lr-color-surface);
@@ -95,22 +76,6 @@ import{css}from"lit";import{formControlRequiredMarker}from"../../../internal/for
       var(--lr-color-picker-checker-size, var(--_lr-color-picker-checker-size));
   }
 
-  /* These pixels communicate the selected color itself. Letting forced-colors replace them with
-     a system color makes every hue, alpha value, and palette entry indistinguishable.
-
-     The opt-out is declared on the color-bearing ELEMENTS, not on the pseudo-elements that happen
-     to paint them. The hue and opacity ramps used to be opted out only through their ::before, and
-     since forced-color-adjust is an INHERITED property that left the slider element itself
-     answering "auto" — so a consumer (or an a11y audit) reading the element's computed value was
-     told the ramp is system-controlled, which is the opposite of the truth, and any colour the
-     element itself paints (its own background, the checkerboard behind the alpha ramp) was still
-     rewritten out from under the ramp drawn on top of it. Declaring it on the element covers the
-     pseudo-element by inheritance, so one rule states one fact.
-
-     Still deliberately limited to the surfaces that ARE the data: the panel, text field, action
-     buttons, focus outlines, and disabled chrome keep the UA default. The trigger element stays off
-     the list for exactly that reason — the button's border, focus ring and disabled treatment are
-     chrome; only the two pseudo-elements painting the swatch inside it are the value. */
   [part~="grid"],
   [part~="preview"],
   [part~="swatch"],
@@ -236,8 +201,6 @@ import{css}from"lit";import{formControlRequiredMarker}from"../../../internal/for
       var(--lr-color-brand)
     );
   }
-  /* Pressed deepens the same edge rather than tinting the box: its pseudo-element paints the
-     selected colour, so mixing the fill would misreport the value the swatch exists to show. */
   [part~="trigger"]:where(:active),
   [part~="trigger"]:where(:active)::before {
     border-color: color-mix(
@@ -252,16 +215,8 @@ import{css}from"lit";import{formControlRequiredMarker}from"../../../internal/for
   }
 
   [part~="panel"] {
-    /* Absolutely positioned from the start (not only once JS positions it on open) so the closed
-       panel never occupies a box in the host's normal flow. The hoist option makes place() switch this to
-       fixed at runtime. Physical top/left, not the logical inset properties: place() overwrites
-       these via style.left/style.top, and under RTL inset-inline-start resolves to the physical
-       right, leaving both right:0 and left:Npx active -- the over-constrained resolution would
-       discard the JS value and pin the panel to the viewport edge. */
     position: absolute;
     top: 0;
-    /* policy-allow(physical-css): must stay the same physical property positioner.ts's place()
-       overwrites via style.left; see the comment above. */
     left: 0;
     z-index: var(--lr-overlay-stack-index, var(--lr-layer-popover));
     display: flex;
@@ -274,7 +229,6 @@ import{css}from"lit";import{formControlRequiredMarker}from"../../../internal/for
       var(--_lr-color-picker-radius)
     );
     background: var(--lr-color-surface);
-    /* Anchored overlay: a positioner-placed picker panel floating over page content. */
     box-shadow: var(--lr-shadow-m);
     max-inline-size: var(--lr-positioner-available-inline-size, none);
   }
@@ -320,9 +274,6 @@ import{css}from"lit";import{formControlRequiredMarker}from"../../../internal/for
       --lr-color-picker-grid-hue,
       var(--_lr-color-picker-grid-hue)
     );
-    /* The saturation/value square is defined as a white-to-transparent tint across the inline axis
-       over a transparent-to-shade wash down the block axis. Both endpoints are the achromatic
-       extremes the model itself requires, written in hsl() so no raw hex literal is involved. */
     background-image: linear-gradient(to bottom, transparent, hsl(0 0% 0%)),
       linear-gradient(to right, hsl(0 0% 100%), transparent);
   }
@@ -342,8 +293,6 @@ import{css}from"lit";import{formControlRequiredMarker}from"../../../internal/for
     );
     border: var(--lr-border-width-medium) solid var(--lr-color-surface);
     border-radius: 50%;
-    /* Resting chrome, not an overlay: a knob riding directly on the grid it edits, inside a panel
-       that is itself the anchored overlay -- it has to stay a step below its own container. */
     box-shadow: var(--lr-shadow-s);
     transform: translate(-50%, -50%);
     cursor: grab;
@@ -352,10 +301,6 @@ import{css}from"lit";import{formControlRequiredMarker}from"../../../internal/for
     transform: translate(50%, -50%);
   }
 
-  /* The slider element is the pointer target and is floored at 24px (WCAG 2.5.8) even though the
-     visible ramp is the thinner --lr-color-picker-slider-block-size bar drawn by ::before inside
-     it. Growing the visible bar instead would make a colour picker look like a pair of progress
-     bars; shrinking the target to the bar would leave a 12px-tall touch target. */
   [part~="slider"] {
     position: relative;
     block-size: var(--lr-size-1-5rem);
@@ -450,7 +395,6 @@ import{css}from"lit";import{formControlRequiredMarker}from"../../../internal/for
     );
     border: var(--lr-border-width-medium) solid var(--lr-color-surface);
     border-radius: 50%;
-    /* Resting chrome, same tier as the grid handle above: a knob on a track, not a floating panel. */
     box-shadow: var(--lr-shadow-s);
     background-color: var(
       --lr-color-picker-swatch-color,
@@ -469,9 +413,6 @@ import{css}from"lit";import{formControlRequiredMarker}from"../../../internal/for
       var(--lr-color-brand)
     );
   }
-  /* A knob's pressed state is the grab itself: the ring deepens and the cursor closes, which is
-     the whole feedback a drag has before the value starts moving. The handle's own fill is the
-     live colour, so it stays untouched here for the same reason as the trigger above. */
   [part~="grid-handle"]:where(:active),
   [part~="slider-handle"]:where(:active) {
     border-color: color-mix(
@@ -515,9 +456,6 @@ import{css}from"lit";import{formControlRequiredMarker}from"../../../internal/for
     font-family: var(--lr-font-mono);
     font-size: var(--lr-font-size-sm);
   }
-  /* no-pressed-state: pressing a text field places a caret, it does not activate a target -- there
-     is no "did my click register?" gap to fill, and the engaged state it leads to is already drawn
-     by the :focus-visible rule below. Native text inputs have no pressed treatment either. */
   [part~="input"]:where(:hover) {
     border-color: var(
       --lr-color-picker-hover-border-color,
@@ -555,9 +493,6 @@ import{css}from"lit";import{formControlRequiredMarker}from"../../../internal/for
       var(--lr-color-brand)
     );
   }
-  /* These two carry their own surface fill (unlike the swatches), so the pressed state is the
-     shared background mix: the button visibly sinks toward the text colour, on top of the deeper
-     edge, and lands in the same direction whether the theme is light or dark. */
   [part~="format-button"]:where(:active),
   [part~="eyedropper-button"]:where(:active) {
     border-color: color-mix(
@@ -607,7 +542,6 @@ import{css}from"lit";import{formControlRequiredMarker}from"../../../internal/for
       var(--lr-color-brand)
     );
   }
-  /* Edge only, again: ::after paints the palette entry's own colour over this box. */
   [part~="swatch"]:where(:active) {
     border-color: color-mix(
       in oklab,
@@ -619,9 +553,6 @@ import{css}from"lit";import{formControlRequiredMarker}from"../../../internal/for
     outline: var(--lr-focus-ring-width) solid var(--lr-focus-ring-color);
     outline-offset: var(--lr-focus-ring-offset);
   }
-  /* The selected palette entry is marked by a ring AND a check mark, so the selection never rides
-     on colour alone. Encoded in the part name (not an attribute selector after ::part(), which
-     never matches) so consumers can restyle the selected state too. */
   [part~="swatch-selected"] {
     border-color: var(--lr-color-picker-selected-border, var(--lr-color-brand));
     border-width: var(--lr-border-width-medium);

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

@@ -35,6 +35,11 @@ export interface ComboboxSourceRow {
     readonly sub?: string;
     /** Optional decorative leading visual. Its rendered subtree is inert and aria-hidden. */
     readonly icon?: unknown;
+    /** Leading adornment, mirroring `<lr-option>`'s `start`/`prefix` slots. Inert and aria-hidden,
+     *  like `icon`, so it never joins the option's accessible name. */
+    readonly start?: unknown;
+    /** Trailing adornment, mirroring `<lr-option>`'s `end`/`suffix` slots. */
+    readonly end?: unknown;
     /** Optional trailing metadata badge. */
     readonly badge?: string | number;
     /** Spoken option label when the visible row needs additional context. */
@@ -171,6 +176,10 @@ export interface LyraComboboxEventMap {
  *   `lr-select` and `lr-emoji-picker` so one rule can style every grouped list.
  * @csspart option - An option row.
  * @csspart option-dot - An option row's leading status dot (when `dot-color` is set).
+ * @csspart option-start - An option row's leading adornment, cloned from the source
+ *   `<lr-option>`'s `start`/`prefix` slot (or an async row's `start`). Inert and aria-hidden.
+ * @csspart option-end - An option row's trailing adornment, cloned from the source
+ *   `<lr-option>`'s `end`/`suffix` slot (or an async row's `end`). Inert and aria-hidden.
  * @csspart option-icon - An async option row's optional decorative leading visual. Its rendered
  *   subtree remains visible but is inert and hidden from assistive technology.
  * @csspart option-label - An option row's label/sub wrapper.
@@ -433,6 +442,23 @@ export declare class LyraCombobox extends LyraElement<LyraComboboxEventMap> {
     private _restoredStateActive;
     private _name;
     private validationTargetOverride?;
+    /**
+     * Bounds the popup to roughly this many option rows, leaving the rest reachable by scrolling.
+     *
+     * This is the third and last of three similarly-named caps, which is exactly the confusion this
+     * property exists to end -- each does something different:
+     * - `visibleOptions` (this one) caps how many suggestion rows are **visible** at once. Purely
+     *   presentational: every row is still rendered and still reachable by scrolling.
+     * - `maxOptionsVisible` caps how many **selected tags** are shown in multi-select before the
+     *   "+N" summary. Nothing to do with the suggestion list.
+     * - `maxRender` caps how many suggestion rows are **rendered into the DOM at all**, as a
+     *   performance ceiling; rows past it do not exist and are summarized by `option-overflow`.
+     *
+     * Unset imposes no bound of its own, leaving the listbox's existing max-height behavior exactly
+     * as it was. Zero, negative, and non-finite values normalize to unset rather than collapsing the
+     * popup.
+     */
+    visibleOptions?: number;
     private _maxOptionsVisible;
     private _maxRender;
     private _sourceDelay;
@@ -498,13 +524,20 @@ export declare class LyraCombobox extends LyraElement<LyraComboboxEventMap> {
     get value(): string | string[];
     set value(next: string | string[]);
     private setValue;
-    /** Maximum number of selected-value tags shown before the rest collapse behind a "+N" tag
+    /** Maximum number of selected-value **tags** shown before the rest collapse behind a "+N" tag
      *  (multi-select only). Sanitized to a finite, non-negative integer.
+     *
+     *  Not to be confused with the two caps on the suggestion list: `visibleOptions` bounds how many
+     *  suggestion rows are visible at once, and `maxRender` bounds how many are rendered at all.
+     *  This one only ever concerns the tags for values already chosen.
      * @default 3 */
     get maxOptionsVisible(): number;
     set maxOptionsVisible(next: number);
-    /** Maximum number of rows rendered before the rest collapse behind the overflow indicator
-     *  (the current selection is always kept visible regardless). Sanitized to a finite,
+    /** Maximum number of suggestion rows **rendered into the DOM at all** before the rest collapse
+     *  behind the overflow indicator (the current selection is always kept visible regardless). This
+     *  is a performance ceiling, not a visible-height affordance: rows past it do not exist and
+     *  cannot be scrolled to. Use `visibleOptions` to bound the popup's height while keeping every
+     *  row reachable, and `maxOptionsVisible` for the selected-tag cap. Sanitized to a finite,
      *  non-negative integer capped at 1,000.
      *
      *  Rows render in full rather than as a recycled scroll window, because the filter input's
@@ -587,6 +620,24 @@ export declare class LyraCombobox extends LyraElement<LyraComboboxEventMap> {
     private reflectSelected;
     private labelFor;
     /** The current row set in a source-agnostic shape, before capping. */
+    /**
+     * 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.
+     */
+    private adornmentClones;
+    /**
+     * `<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
+     * nodes have nowhere to land. Clone them into the row instead.
+     *
+     * `cloneNode(true)`, never `createElementNS`: the latter yields an inert, never-upgrading custom
+     * element (AGENTS.md), which would silently break the `<lr-flag>`/avatar case this exists for.
+     * Cloning also leaves the author's own subtree exactly where they put it -- moving the live node
+     * would empty their markup as a side effect of opening a dropdown.
+     */
+    private adornmentsFor;
     private get effectiveRows();
     /** Synthetic action shown only when the current nonempty query has no exact label/value match. */
     private get createRow();
@@ -620,6 +671,23 @@ export declare class LyraCombobox extends LyraElement<LyraComboboxEventMap> {
     private bindDocumentPointer;
     private unbindDocumentPointer;
     private reconnectOpenPopup;
+    /**
+     * Applies `visibleOptions` as an inline `max-block-size` on the listbox.
+     *
+     * Measured rather than computed from a token, because a row's height varies with `sub` lines,
+     * adornments, and group labels -- an estimate would cut a row in half. Measuring where row N
+     * *starts* also naturally accounts for the listbox's own padding.
+     *
+     * The inline value keeps the positioner clamp inside its own `min()` rather than overriding the
+     * stylesheet's: an inline declaration beats the shadow stylesheet outright, so writing a bare
+     * pixel length here would let a capped listbox overflow the space the positioner actually has.
+     * The property is removed entirely when the cap is unset, normalizes away, or is not exceeded, so
+     * the stylesheet's own expression is what applies and behavior is unchanged.
+     *
+     * Deliberately NOT a custom property: `check-style-policy` forbids component runtime code writing
+     * a documented `@cssprop`, and rightly so -- a documented hook is consumer-owned.
+     */
+    private syncVisibleOptionsCap;
     protected updated(changed: PropertyValues): void;
     private settleTransition;
     private waitForTransition;