@aceshooting/lyra-ui 16.0.0 → 18.0.0

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

@@ -67,9 +67,9 @@ import{type TemplateResult,type PropertyValues}from'lit';import{LyraElement}from
 * @cssstate invalid - Matches while it does not — from the very first render, before the user has
 * touched anything.
 * @cssstate user-valid - `valid`, but only after the user has interacted: a toggle the host
-* allowed, a blur, or a `reportValidity()` call (which is what a submit attempt runs). A toggle
-* refused through `lr-checkbox-toggle-request` is deliberately not one of them -- nothing changed,
-* so nothing is revealed until the user interacts again.
+* allowed, a blur, `reportValidity()`, or a submission attempt. Not after a silent
+* `checkValidity()` alone. A toggle refused through `lr-checkbox-toggle-request` is deliberately
+* not one of them -- nothing changed, so nothing is revealed until the user interacts again.
 * @cssstate user-invalid - `invalid` after that same interaction. Style validation errors with this
 * rather than `invalid`: a pristine required checkbox is genuinely invalid, but colouring it red
 * before the user has done anything is hostile.
@@ -146,8 +146,10 @@ errorText:string;private hasLabelSlot;private hasHintSlot;private hasHelpTextSlo
 /** Whether the user has acted on this control yet, which is what gates the `user-valid`/
 *  `user-invalid` custom states. Deliberately separate from `touched` (which drives the visible
 *  `data-invalid`/`aria-invalid` pair and is set on blur alone): a toggle is an interaction the
-*  instant it happens, and `reportValidity()` — what a submit attempt runs — counts as one too,
-*  exactly as it does for native `:user-invalid`. Not `@state`: nothing in `render()` reads it. */
+*  instant it happens, and so is interactive validation — `reportValidity()` and a submission
+*  attempt alike, via `installInteractionOnInvalid()` — exactly as it does for native
+*  `:user-invalid`. A silent `checkValidity()` alone never counts. Not `@state`: nothing in
+*  `render()` reads it. */
 private hasInteracted;private internals;private validityController;
 /** Consumer-supplied validation message reflected through `custom-error`. */
 customError:string|null;private labelObserver?;private hasSyncedDescribedByElements;private _defaultChecked;private _checkedDirty;private settingDefaultChecked;private reflectingDefaultChecked;private _fieldsetDisabled;private _groupDisabled;private _name;private _checked;private _indeterminate;private _disabled;private _required;private _value;private toggleGuard;
@@ -174,7 +176,7 @@ get name():string;set name(next:string|null);get required():boolean;set required
 */
 private hasLightDomChildWithSlot;private refreshNamedSlotState;disconnectedCallback():void;protected willUpdate(changed:PropertyValues):void;protected updated(changed:PropertyValues):void;
 /** Shared with every other form control: disabled (own, fieldset, or group) bars validation. */
-private get barredFromValidation();private updateValidity;private reflectInvalid;private syncFormState;formResetCallback():void;formStateRestoreCallback(state:string|File|FormData|null,reason:'autocomplete'|'restore'):void;private restoreCheckedFromDefault;formDisabledCallback(disabled:boolean):void;checkValidity():boolean;reportValidity():boolean;
+private get barredFromValidation();private updateValidity;private reflectInvalid;private syncFormState;formResetCallback():void;formStateRestoreCallback(state:string|File|FormData|null,reason:'autocomplete'|'restore'):void;private restoreCheckedFromDefault;formDisabledCallback(disabled:boolean):void;private markInteracted;checkValidity():boolean;reportValidity():boolean;
 /**
 * Sets or clears a consumer-supplied validation error — the standard channel for a server-side
 * rejection ("those terms have been superseded") that no client-side constraint can express. A

package/dist/components/forms/checkbox/checkbox.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,svg,nothing}from"lit";import{property,state}from"lit/decorators.js";import{LyraElement}from"../../../internal/lyra-element.js";import{installFormControlLabelSupport}from"../../../internal/form-control-labels.js";installFormControlLabelSupport();import{AnchoredValidityController,VALIDITY_ANCHOR}from"../../../internal/anchored-validity.js";import{setCustomState,syncValidityStates}from"../../../internal/custom-states.js";import{syncAriaDescribedByElements}from"../../../internal/aria-controls.js";import{sizes}from"../../../internal/sizes.styles.js";import{styles}from"./checkbox.styles.js";import{dispatchNativeEvent,relayNativeEvent}from"../../../internal/native-event-relay.js";import{installInvalidEventAlias}from"../../../internal/invalid-event-alias.js";import{requestThenCommit}from"../../../internal/request-commit.js";import{markVetoGuardWrite,VetoWriteGuard}from"../../../internal/veto-write-guard.js";import{omittedEmptyStringConverter}from"../../../internal/converters.js";import{hasRealContent}from"../../../internal/a11y.js";import{isActionableElement}from"../../../internal/focus-navigation.js";import{attachInternalsSafely,getFormOwner,installCustomErrorProperty,isBarredFromValidation,setFormOwner}from"../../../internal/form-associated.js";import{currentValidityValidator}from"../form-validator.js";import{LYRA_DEFAULT_checkboxRequired,LYRA_DEFAULT_fieldRequired}from"../../../internal/default-strings.generated.js";const GLYPH_VIEW_BOX="0 0 24 24",GLYPH_STROKE_WIDTH="1.75";function checkmarkGlyph(){return svg`
+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,svg,nothing}from"lit";import{property,state}from"lit/decorators.js";import{LyraElement}from"../../../internal/lyra-element.js";import{installFormControlLabelSupport}from"../../../internal/form-control-labels.js";installFormControlLabelSupport();import{AnchoredValidityController,VALIDITY_ANCHOR}from"../../../internal/anchored-validity.js";import{setCustomState,syncValidityStates}from"../../../internal/custom-states.js";import{syncAriaDescribedByElements}from"../../../internal/aria-controls.js";import{sizes}from"../../../internal/sizes.styles.js";import{styles}from"./checkbox.styles.js";import{dispatchNativeEvent,relayNativeEvent}from"../../../internal/native-event-relay.js";import{installInteractionOnInvalid,installInvalidEventAlias,withStaticValidityCheck}from"../../../internal/invalid-event-alias.js";import{requestThenCommit}from"../../../internal/request-commit.js";import{markVetoGuardWrite,VetoWriteGuard}from"../../../internal/veto-write-guard.js";import{omittedEmptyStringConverter}from"../../../internal/converters.js";import{hasRealContent}from"../../../internal/a11y.js";import{isActionableElement}from"../../../internal/focus-navigation.js";import{attachInternalsSafely,getFormOwner,installCustomErrorProperty,isBarredFromValidation,setFormOwner}from"../../../internal/form-associated.js";import{currentValidityValidator}from"../form-validator.js";import{LYRA_DEFAULT_checkboxRequired,LYRA_DEFAULT_fieldRequired}from"../../../internal/default-strings.generated.js";const GLYPH_VIEW_BOX="0 0 24 24",GLYPH_STROKE_WIDTH="1.75";function checkmarkGlyph(){return svg`
     <svg
       part="checkmark checked-icon"
       width="1em"
@@ -26,7 +26,7 @@ var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3
       aria-hidden="true"
       focusable="false"
     ><line x1="5" y1="12" x2="19" y2="12"></line></svg>
-  `}class LyraCheckbox extends LyraElement{static{this.defaultStrings={...super.defaultStrings,checkboxRequired:LYRA_DEFAULT_checkboxRequired,fieldRequired:LYRA_DEFAULT_fieldRequired}}static get validators(){return[currentValidityValidator("required","disabled","checked")]}static{this.styles=[LyraElement.styles,sizes,styles]}static{this.formAssociated=!0}static{this.properties={customError:{attribute:"custom-error",reflect:!0,noAccessor:!0},checked:{attribute:!1,noAccessor:!0},defaultChecked:{attribute:"checked",type:Boolean,reflect:!0,useDefault:!0,noAccessor:!0},indeterminate:{type:Boolean,reflect:!0,noAccessor:!0},disabled:{type:Boolean,reflect:!0,noAccessor:!0},name:{reflect:!0,noAccessor:!0,converter:omittedEmptyStringConverter},required:{type:Boolean,reflect:!0,noAccessor:!0},size:{reflect:!0},value:{reflect:!0,noAccessor:!0}}}get effectiveDisabled(){return this.disabled||this._fieldsetDisabled||this._groupDisabled}get checked(){return this._checked}set checked(next){const old=this._checked;this.settingDefaultChecked||(this._checkedDirty=!0),this._checked=!!next,markVetoGuardWrite(this.toggleGuard),this.syncFormState(),this.notifyOwningGroup(),this.requestUpdate("checked",old)}get defaultChecked(){return this._defaultChecked}set defaultChecked(next){if(this.reflectingDefaultChecked)return;const old=this._defaultChecked;this._defaultChecked=!!next,this.reflectingDefaultChecked=!0;try{this.toggleAttribute("checked",this._defaultChecked)}finally{this.reflectingDefaultChecked=!1}this._checkedDirty||this.restoreCheckedFromDefault(),this.requestUpdate("defaultChecked",old)}get indeterminate(){return this._indeterminate}set indeterminate(next){const old=this._indeterminate;this._indeterminate=!!next,this.syncFormState(),this.notifyOwningGroup(),this.requestUpdate("indeterminate",old)}notifyOwningGroup(){this.closest?.("lr-checkbox-group")?.notifyCheckboxStateChange?.(this)}get disabled(){return this._disabled}set disabled(next){const old=this._disabled;this._disabled=!!next,this.toggleAttribute("disabled",this._disabled),this.updateValidity(),this.requestUpdate("disabled",old)}get name(){return this._name}set name(next){const old=this._name;this._name=next??"",this._name?this.setAttribute("name",this._name):this.removeAttribute("name"),this.requestUpdate("name",old)}get required(){return this._required}set required(next){const old=this._required;this._required=!!next,this.toggleAttribute("required",this._required),this.updateValidity(),this.requestUpdate("required",old)}get value(){return this._value}set value(next){const old=this._value;this._value=next??"on",next==null?this.hasAttribute("value")&&this.removeAttribute("value"):this.getAttribute("value")!==this._value&&this.setAttribute("value",this._value),this.syncFormState(),this.notifyOwningGroup(),this.requestUpdate("value",old,{reflect:!1})}constructor(){super(),this.size="m",this.hint="",this.helpText="",this.errorText="",this.hasLabelSlot=!1,this.hasHintSlot=!1,this.hasHelpTextSlot=!1,this.hasErrorSlot=!1,this.touched=!1,this.hasInteracted=!1,this.hasSyncedDescribedByElements=!1,this._defaultChecked=!1,this._checkedDirty=!1,this.settingDefaultChecked=!1,this.reflectingDefaultChecked=!1,this._fieldsetDisabled=!1,this._groupDisabled=!1,this._name="",this._checked=!1,this._indeterminate=!1,this._disabled=!1,this._required=!1,this._value="on",this.toggleGuard=new VetoWriteGuard,this.onClick=event=>{const owner=this[VALIDITY_ANCHOR]();for(const target of event.composedPath()){if(target===event.currentTarget)break;if(target&&typeof target=="object"&&target.nodeType===1&&target!==owner&&isActionableElement(target))return}this.toggle()},this.onKeyDown=e=>{this.effectiveDisabled||e.repeat||(e.key===" "||e.key==="Spacebar")&&(e.preventDefault(),this.toggle())},this.onSlotChange=event=>this.handleLabelSlotChange(event),this.onHintSlotChange=()=>{this.hasHintSlot=this.hasLightDomChildWithSlot("hint")},this.onHelpTextSlotChange=()=>{this.hasHelpTextSlot=this.hasLightDomChildWithSlot("help-text")},this.onErrorSlotChange=()=>{this.hasErrorSlot=this.hasLightDomChildWithSlot("error")},this.onLabelSlotChange=event=>this.handleLabelSlotChange(event),this.onBlur=event=>{!this.effectiveDisabled&&!this.matches(":disabled")&&(this.touched=!0,this.hasInteracted=!0,this.reflectInvalid()),relayNativeEvent(this,event)},this.onFocus=event=>{relayNativeEvent(this,event)},installInvalidEventAlias(this,init=>this.emit("lr-invalid",null,init)),this.internals=attachInternalsSafely(this),this.validityController=new AnchoredValidityController(this,this.internals,()=>this[VALIDITY_ANCHOR]()),installCustomErrorProperty(this,()=>this.validityController.customValidityMessage),this.syncFormState()}get form(){return getFormOwner(this.internals)}set form(owner){setFormOwner(this,owner)}getForm(){return getFormOwner(this.internals)}get labels(){return this.internals.labels}get validity(){return this.internals.validity}get validationMessage(){return this.internals.validationMessage}get willValidate(){return this.internals.willValidate}[VALIDITY_ANCHOR](){return this.renderRoot?.querySelector(".checkbox-owner")??null}connectedCallback(){super.connectedCallback(),this.updateValidity();const MutationObserverCtor=this.ownerDocument.defaultView?.MutationObserver;this.labelObserver=MutationObserverCtor?new MutationObserverCtor(()=>{this.bindLabelObserverTargets(),this.recomputeHasLabelSlot()}):void 0,this.addEventListener("slotchange",this.onLabelSlotChange),this.bindLabelObserverTargets(),this.hasUpdated?(this.recomputeHasLabelSlot(),this.refreshNamedSlotState()):this.seedFirstRenderState(()=>{this.recomputeHasLabelSlot(),this.refreshNamedSlotState()})}hasLightDomChildWithSlot(name){const children=this.children;return children?Array.from(children).some(element=>element.getAttribute("slot")===name):!1}refreshNamedSlotState(){this.hasHintSlot=this.hasLightDomChildWithSlot("hint"),this.hasHelpTextSlot=this.hasLightDomChildWithSlot("help-text"),this.hasErrorSlot=this.hasLightDomChildWithSlot("error")}disconnectedCallback(){this.removeEventListener("slotchange",this.onLabelSlotChange),this.labelObserver?.disconnect(),this.labelObserver=void 0,super.disconnectedCallback()}willUpdate(changed){super.willUpdate(changed)}updated(changed){super.updated(changed);const describedBy=this.getAttribute("aria-describedby"),hint=this.renderRoot.querySelector("#checkbox-hint"),error=this.renderRoot.querySelector("#checkbox-error");if(!describedBy&&!this.hasSyncedDescribedByElements&&(!hint||hint.hidden)&&(!error||error.hidden))return;const control=this.renderRoot.querySelector('[part~="base"]')??void 0;if(this.hasSyncedDescribedByElements=syncAriaDescribedByElements(this,control,describedBy),control&&"ariaDescribedByElements"in control){const reflected=control,current=reflected.ariaDescribedByElements??[],internal=[error,hint].filter(element=>!!(element&&!element.hidden));reflected.ariaDescribedByElements=[...current.filter(element=>element!==hint&&element!==error),...internal]}}get barredFromValidation(){return isBarredFromValidation(this,this.internals)}updateValidity(){this.barredFromValidation?this.validityController.setValidity({}):this.required&&!this.checked?this.validityController.setValidity({valueMissing:!0},this.localize("checkboxRequired")):this.validityController.setValidity({}),this.reflectInvalid()}reflectInvalid(){const barred=this.barredFromValidation;this.toggleAttribute("data-invalid",!barred&&this.touched&&!this.internals.validity.valid),syncValidityStates(this.internals,{required:this.required,hasInteracted:this.hasInteracted,barred}),setCustomState(this.internals,"checked",this.checked),setCustomState(this.internals,"indeterminate",this.indeterminate),setCustomState(this.internals,"disabled",this.effectiveDisabled)}syncFormState(){const state2=`${this.checked?"checked":"unchecked"}${this.indeterminate?"/indeterminate":""}`;this.internals.setFormValue(this.checked?this.value:null,state2),this.updateValidity()}formResetCallback(){this.restoreCheckedFromDefault(),this.touched=!1,this.hasInteracted=!1,this.reflectInvalid()}formStateRestoreCallback(state2,reason){const oldChecked=this._checked,oldIndeterminate=this._indeterminate;this._checked=state2==="checked"||state2==="checked/indeterminate",this._checkedDirty=!0,this._indeterminate=state2==="checked/indeterminate"||state2==="unchecked/indeterminate",this.syncFormState(),this.requestUpdate("checked",oldChecked),this.requestUpdate("indeterminate",oldIndeterminate)}resetFromGroup(){this.restoreCheckedFromDefault()}restoreCheckedFromDefault(){this.settingDefaultChecked=!0;try{this.checked=this._defaultChecked}finally{this.settingDefaultChecked=!1}this._checkedDirty=!1}formDisabledCallback(disabled){this._fieldsetDisabled=disabled,this.updateValidity(),this.requestUpdate()}setGroupDisabled(value){this._groupDisabled!==value&&(this._groupDisabled=value,this.updateValidity(),this.requestUpdate())}checkValidity(){return this.updateValidity(),this.internals.checkValidity()}reportValidity(){return this.updateValidity(),this.hasInteracted=!0,this.reflectInvalid(),this.internals.reportValidity()}setCustomValidity(message){this.validityController.setCustomValidity(message??""),this.reflectInvalid(),this.requestUpdate()}resetValidity(){this.setCustomValidity("")}click(){this.effectiveDisabled||this[VALIDITY_ANCHOR]()?.click()}focus(options){this.effectiveDisabled||this[VALIDITY_ANCHOR]()?.focus(options)}blur(){this[VALIDITY_ANCHOR]()?.blur()}toggle(){if(this.effectiveDisabled)return;const proposed=!this.checked;requestThenCommit({requestDetail:{checked:proposed},emitRequest:(detail,init)=>this.emit("lr-checkbox-toggle-request",detail,init),guard:this.toggleGuard,commit:()=>{this.hasInteracted=!0,this.checked=proposed,this.indeterminate=!1,dispatchNativeEvent(this,"input"),this.emit("lr-input",{checked:this.checked}),dispatchNativeEvent(this,"change"),this.emit("lr-change",{checked:this.checked})}})}isDefaultLabelNode(node){if(node.nodeType!==1)return!0;const slotName=node.getAttribute("slot");return slotName===null||slotName===""}labelForwardingSlots(){return Array.from(this.querySelectorAll("slot")).filter(slot=>{let top=slot;for(;top.parentNode&&top.parentNode!==this;)top=top.parentNode;return top.parentNode===this&&this.isDefaultLabelNode(top)})}observeLabelNode(node){if(this.labelObserver){if(node.nodeType===3){this.labelObserver.observe(node,{characterData:!0});return}node.nodeType===1&&this.labelObserver.observe(node,{attributes:!0,attributeFilter:["aria-hidden","aria-label","class","hidden","inert","slot","style"],childList:!0,characterData:!0,subtree:!0})}}bindLabelObserverTargets(){if(this.labelObserver){this.labelObserver.disconnect(),this.observeLabelNode(this);for(const slot of this.labelForwardingSlots())if(slot.assignedNodes().length!==0)for(const assigned of slot.assignedNodes({flatten:!0}))this.observeLabelNode(assigned)}}handleLabelSlotChange(event){const target=event.target;target?.nodeType!==1||target.localName!=="slot"||target.getRootNode()!==this.renderRoot&&!this.labelForwardingSlots().includes(target)||(this.bindLabelObserverTargets(),this.recomputeHasLabelSlot())}recomputeHasLabelSlot(){const renderRoot=this.renderRoot,childNodes=this.childNodes;if(!renderRoot||!childNodes)return;const slot=renderRoot.querySelector("slot:not([name])"),nodes=slot?slot.assignedNodes({flatten:!0}):Array.from(childNodes).filter(node=>this.isDefaultLabelNode(node)).flatMap(node=>{if(node.nodeType!==1||node.localName!=="slot")return[node];const forwardingSlot=node;return forwardingSlot.assignedNodes().length>0?forwardingSlot.assignedNodes({flatten:!0}):Array.from(forwardingSlot.childNodes)});this.hasLabelSlot=hasRealContent(nodes)}render(){const mixed=this.indeterminate,hasHint=this.hasHintSlot||this.hasHelpTextSlot||!!(this.hint||this.helpText),hasError=this.hasErrorSlot||(this.errorText??"").length>0,controlParts=["box","control",this.checked?"checked control--checked":"",mixed?"indeterminate control--indeterminate":""].filter(Boolean).join(" "),describedBy=[this.getAttribute("aria-describedby")??"",hasError?"checkbox-error":"",hasHint?"checkbox-hint":""].filter(Boolean).join(" "),invalid=hasError||this.touched&&!this.internals.validity.valid;return html`
+  `}class LyraCheckbox extends LyraElement{static{this.defaultStrings={...super.defaultStrings,checkboxRequired:LYRA_DEFAULT_checkboxRequired,fieldRequired:LYRA_DEFAULT_fieldRequired}}static get validators(){return[currentValidityValidator("required","disabled","checked")]}static{this.styles=[LyraElement.styles,sizes,styles]}static{this.formAssociated=!0}static{this.properties={customError:{attribute:"custom-error",reflect:!0,noAccessor:!0},checked:{attribute:!1,noAccessor:!0},defaultChecked:{attribute:"checked",type:Boolean,reflect:!0,useDefault:!0,noAccessor:!0},indeterminate:{type:Boolean,reflect:!0,noAccessor:!0},disabled:{type:Boolean,reflect:!0,noAccessor:!0},name:{reflect:!0,noAccessor:!0,converter:omittedEmptyStringConverter},required:{type:Boolean,reflect:!0,noAccessor:!0},size:{reflect:!0},value:{reflect:!0,noAccessor:!0}}}get effectiveDisabled(){return this.disabled||this._fieldsetDisabled||this._groupDisabled}get checked(){return this._checked}set checked(next){const old=this._checked;this.settingDefaultChecked||(this._checkedDirty=!0),this._checked=!!next,markVetoGuardWrite(this.toggleGuard),this.syncFormState(),this.notifyOwningGroup(),this.requestUpdate("checked",old)}get defaultChecked(){return this._defaultChecked}set defaultChecked(next){if(this.reflectingDefaultChecked)return;const old=this._defaultChecked;this._defaultChecked=!!next,this.reflectingDefaultChecked=!0;try{this.toggleAttribute("checked",this._defaultChecked)}finally{this.reflectingDefaultChecked=!1}this._checkedDirty||this.restoreCheckedFromDefault(),this.requestUpdate("defaultChecked",old)}get indeterminate(){return this._indeterminate}set indeterminate(next){const old=this._indeterminate;this._indeterminate=!!next,this.syncFormState(),this.notifyOwningGroup(),this.requestUpdate("indeterminate",old)}notifyOwningGroup(){this.closest?.("lr-checkbox-group")?.notifyCheckboxStateChange?.(this)}get disabled(){return this._disabled}set disabled(next){const old=this._disabled;this._disabled=!!next,this.toggleAttribute("disabled",this._disabled),this.updateValidity(),this.requestUpdate("disabled",old)}get name(){return this._name}set name(next){const old=this._name;this._name=next??"",this._name?this.setAttribute("name",this._name):this.removeAttribute("name"),this.requestUpdate("name",old)}get required(){return this._required}set required(next){const old=this._required;this._required=!!next,this.toggleAttribute("required",this._required),this.updateValidity(),this.requestUpdate("required",old)}get value(){return this._value}set value(next){const old=this._value;this._value=next??"on",next==null?this.hasAttribute("value")&&this.removeAttribute("value"):this.getAttribute("value")!==this._value&&this.setAttribute("value",this._value),this.syncFormState(),this.notifyOwningGroup(),this.requestUpdate("value",old,{reflect:!1})}constructor(){super(),this.size="m",this.hint="",this.helpText="",this.errorText="",this.hasLabelSlot=!1,this.hasHintSlot=!1,this.hasHelpTextSlot=!1,this.hasErrorSlot=!1,this.touched=!1,this.hasInteracted=!1,this.hasSyncedDescribedByElements=!1,this._defaultChecked=!1,this._checkedDirty=!1,this.settingDefaultChecked=!1,this.reflectingDefaultChecked=!1,this._fieldsetDisabled=!1,this._groupDisabled=!1,this._name="",this._checked=!1,this._indeterminate=!1,this._disabled=!1,this._required=!1,this._value="on",this.toggleGuard=new VetoWriteGuard,this.markInteracted=()=>{this.hasInteracted||(this.hasInteracted=!0,this.reflectInvalid())},this.onClick=event=>{const owner=this[VALIDITY_ANCHOR]();for(const target of event.composedPath()){if(target===event.currentTarget)break;if(target&&typeof target=="object"&&target.nodeType===1&&target!==owner&&isActionableElement(target))return}this.toggle()},this.onKeyDown=e=>{this.effectiveDisabled||e.repeat||(e.key===" "||e.key==="Spacebar")&&(e.preventDefault(),this.toggle())},this.onSlotChange=event=>this.handleLabelSlotChange(event),this.onHintSlotChange=()=>{this.hasHintSlot=this.hasLightDomChildWithSlot("hint")},this.onHelpTextSlotChange=()=>{this.hasHelpTextSlot=this.hasLightDomChildWithSlot("help-text")},this.onErrorSlotChange=()=>{this.hasErrorSlot=this.hasLightDomChildWithSlot("error")},this.onLabelSlotChange=event=>this.handleLabelSlotChange(event),this.onBlur=event=>{!this.effectiveDisabled&&!this.matches(":disabled")&&(this.touched=!0,this.hasInteracted=!0,this.reflectInvalid()),relayNativeEvent(this,event)},this.onFocus=event=>{relayNativeEvent(this,event)},installInvalidEventAlias(this,init=>this.emit("lr-invalid",null,init)),installInteractionOnInvalid(this,this.markInteracted),this.internals=attachInternalsSafely(this),this.validityController=new AnchoredValidityController(this,this.internals,()=>this[VALIDITY_ANCHOR]()),installCustomErrorProperty(this,()=>this.validityController.customValidityMessage),this.syncFormState()}get form(){return getFormOwner(this.internals)}set form(owner){setFormOwner(this,owner)}getForm(){return getFormOwner(this.internals)}get labels(){return this.internals.labels}get validity(){return this.internals.validity}get validationMessage(){return this.internals.validationMessage}get willValidate(){return this.internals.willValidate}[VALIDITY_ANCHOR](){return this.renderRoot?.querySelector(".checkbox-owner")??null}connectedCallback(){super.connectedCallback(),this.updateValidity();const MutationObserverCtor=this.ownerDocument.defaultView?.MutationObserver;this.labelObserver=MutationObserverCtor?new MutationObserverCtor(()=>{this.bindLabelObserverTargets(),this.recomputeHasLabelSlot()}):void 0,this.addEventListener("slotchange",this.onLabelSlotChange),this.bindLabelObserverTargets(),this.hasUpdated?(this.recomputeHasLabelSlot(),this.refreshNamedSlotState()):this.seedFirstRenderState(()=>{this.recomputeHasLabelSlot(),this.refreshNamedSlotState()})}hasLightDomChildWithSlot(name){const children=this.children;return children?Array.from(children).some(element=>element.getAttribute("slot")===name):!1}refreshNamedSlotState(){this.hasHintSlot=this.hasLightDomChildWithSlot("hint"),this.hasHelpTextSlot=this.hasLightDomChildWithSlot("help-text"),this.hasErrorSlot=this.hasLightDomChildWithSlot("error")}disconnectedCallback(){this.removeEventListener("slotchange",this.onLabelSlotChange),this.labelObserver?.disconnect(),this.labelObserver=void 0,super.disconnectedCallback()}willUpdate(changed){super.willUpdate(changed)}updated(changed){super.updated(changed);const describedBy=this.getAttribute("aria-describedby"),hint=this.renderRoot.querySelector("#checkbox-hint"),error=this.renderRoot.querySelector("#checkbox-error");if(!describedBy&&!this.hasSyncedDescribedByElements&&(!hint||hint.hidden)&&(!error||error.hidden))return;const control=this.renderRoot.querySelector('[part~="base"]')??void 0;if(this.hasSyncedDescribedByElements=syncAriaDescribedByElements(this,control,describedBy),control&&"ariaDescribedByElements"in control){const reflected=control,current=reflected.ariaDescribedByElements??[],internal=[error,hint].filter(element=>!!(element&&!element.hidden));reflected.ariaDescribedByElements=[...current.filter(element=>element!==hint&&element!==error),...internal]}}get barredFromValidation(){return isBarredFromValidation(this,this.internals)}updateValidity(){this.barredFromValidation?this.validityController.setValidity({}):this.required&&!this.checked?this.validityController.setValidity({valueMissing:!0},this.localize("checkboxRequired")):this.validityController.setValidity({}),this.reflectInvalid()}reflectInvalid(){const barred=this.barredFromValidation;this.toggleAttribute("data-invalid",!barred&&this.touched&&!this.internals.validity.valid),syncValidityStates(this.internals,{required:this.required,hasInteracted:this.hasInteracted,barred}),setCustomState(this.internals,"checked",this.checked),setCustomState(this.internals,"indeterminate",this.indeterminate),setCustomState(this.internals,"disabled",this.effectiveDisabled)}syncFormState(){const state2=`${this.checked?"checked":"unchecked"}${this.indeterminate?"/indeterminate":""}`;this.internals.setFormValue(this.checked?this.value:null,state2),this.updateValidity()}formResetCallback(){this.restoreCheckedFromDefault(),this.touched=!1,this.hasInteracted=!1,this.reflectInvalid()}formStateRestoreCallback(state2,reason){const oldChecked=this._checked,oldIndeterminate=this._indeterminate;this._checked=state2==="checked"||state2==="checked/indeterminate",this._checkedDirty=!0,this._indeterminate=state2==="checked/indeterminate"||state2==="unchecked/indeterminate",this.syncFormState(),this.requestUpdate("checked",oldChecked),this.requestUpdate("indeterminate",oldIndeterminate)}resetFromGroup(){this.restoreCheckedFromDefault()}restoreCheckedFromDefault(){this.settingDefaultChecked=!0;try{this.checked=this._defaultChecked}finally{this.settingDefaultChecked=!1}this._checkedDirty=!1}formDisabledCallback(disabled){this._fieldsetDisabled=disabled,this.updateValidity(),this.requestUpdate()}setGroupDisabled(value){this._groupDisabled!==value&&(this._groupDisabled=value,this.updateValidity(),this.requestUpdate())}checkValidity(){return this.updateValidity(),withStaticValidityCheck(this,()=>this.internals.checkValidity())}reportValidity(){return this.updateValidity(),this.hasInteracted=!0,this.reflectInvalid(),this.internals.reportValidity()}setCustomValidity(message){this.validityController.setCustomValidity(message??""),this.reflectInvalid(),this.requestUpdate()}resetValidity(){this.setCustomValidity("")}click(){this.effectiveDisabled||this[VALIDITY_ANCHOR]()?.click()}focus(options){this.effectiveDisabled||this[VALIDITY_ANCHOR]()?.focus(options)}blur(){this[VALIDITY_ANCHOR]()?.blur()}toggle(){if(this.effectiveDisabled)return;const proposed=!this.checked;requestThenCommit({requestDetail:{checked:proposed},emitRequest:(detail,init)=>this.emit("lr-checkbox-toggle-request",detail,init),guard:this.toggleGuard,commit:()=>{this.hasInteracted=!0,this.checked=proposed,this.indeterminate=!1,dispatchNativeEvent(this,"input"),this.emit("lr-input",{checked:this.checked}),dispatchNativeEvent(this,"change"),this.emit("lr-change",{checked:this.checked})}})}isDefaultLabelNode(node){if(node.nodeType!==1)return!0;const slotName=node.getAttribute("slot");return slotName===null||slotName===""}labelForwardingSlots(){return Array.from(this.querySelectorAll("slot")).filter(slot=>{let top=slot;for(;top.parentNode&&top.parentNode!==this;)top=top.parentNode;return top.parentNode===this&&this.isDefaultLabelNode(top)})}observeLabelNode(node){if(this.labelObserver){if(node.nodeType===3){this.labelObserver.observe(node,{characterData:!0});return}node.nodeType===1&&this.labelObserver.observe(node,{attributes:!0,attributeFilter:["aria-hidden","aria-label","class","hidden","inert","slot","style"],childList:!0,characterData:!0,subtree:!0})}}bindLabelObserverTargets(){if(this.labelObserver){this.labelObserver.disconnect(),this.observeLabelNode(this);for(const slot of this.labelForwardingSlots())if(slot.assignedNodes().length!==0)for(const assigned of slot.assignedNodes({flatten:!0}))this.observeLabelNode(assigned)}}handleLabelSlotChange(event){const target=event.target;target?.nodeType!==1||target.localName!=="slot"||target.getRootNode()!==this.renderRoot&&!this.labelForwardingSlots().includes(target)||(this.bindLabelObserverTargets(),this.recomputeHasLabelSlot())}recomputeHasLabelSlot(){const renderRoot=this.renderRoot,childNodes=this.childNodes;if(!renderRoot||!childNodes)return;const slot=renderRoot.querySelector("slot:not([name])"),nodes=slot?slot.assignedNodes({flatten:!0}):Array.from(childNodes).filter(node=>this.isDefaultLabelNode(node)).flatMap(node=>{if(node.nodeType!==1||node.localName!=="slot")return[node];const forwardingSlot=node;return forwardingSlot.assignedNodes().length>0?forwardingSlot.assignedNodes({flatten:!0}):Array.from(forwardingSlot.childNodes)});this.hasLabelSlot=hasRealContent(nodes)}render(){const mixed=this.indeterminate,hasHint=this.hasHintSlot||this.hasHelpTextSlot||!!(this.hint||this.helpText),hasError=this.hasErrorSlot||(this.errorText??"").length>0,controlParts=["box","control",this.checked?"checked control--checked":"",mixed?"indeterminate control--indeterminate":""].filter(Boolean).join(" "),describedBy=[this.getAttribute("aria-describedby")??"",hasError?"checkbox-error":"",hasHint?"checkbox-hint":""].filter(Boolean).join(" "),invalid=hasError||this.touched&&!this.internals.validity.valid;return html`
       <div part="form-control">
         <span class="checkbox-layout" part="row" @click=${this.onClick}>
           <span

package/dist/components/forms/checkbox-group/checkbox-group.class.d.ts

@@ -48,7 +48,8 @@ readonly option:LyraCheckbox;}export interface LyraCheckboxGroupEventMap{'lr-inv
 * @cssstate invalid - Matches while it does not — from the very first render, before the user has
 * touched anything.
 * @cssstate user-valid - `valid`, but only after the user has interacted: toggling one of the
-* group's checkboxes, a blur, or a `reportValidity()` call (which is what a submit attempt runs).
+* group's checkboxes, a blur, `reportValidity()`, or a submission attempt. Not after a silent
+* `checkValidity()` alone.
 * @cssstate user-invalid - `invalid` after that same interaction. Style validation errors with this
 * rather than `invalid`: a pristine required group is genuinely invalid, but colouring it red
 * before the user has done anything is hostile.
@@ -97,9 +98,10 @@ withHint:boolean;errorText:string;accessibleLabel:string;private touched;
 /** Whether the user has acted on this group yet, which is what gates the `user-valid`/
 *  `user-invalid` custom states. Deliberately separate from `touched` (which drives the visible
 *  `data-invalid`/`aria-invalid` pair and is set on blur alone): toggling a child checkbox is an
-*  interaction the instant it happens, and `reportValidity()` — what a submit attempt runs —
-*  counts as one too, exactly as it does for native `:user-invalid`. Not `@state`: nothing in
-*  `render()` reads it. */
+*  interaction the instant it happens, and so is interactive validation — `reportValidity()` and
+*  a submission attempt alike, via `installInteractionOnInvalid()` — exactly as it does for
+*  native `:user-invalid`. A silent `checkValidity()` alone never counts. Not `@state`: nothing
+*  in `render()` reads it. */
 private hasInteracted;private hasLabelSlot;private hasHintSlot;private hasErrorSlot;private internals;private validityController;
 /** Consumer-supplied validation message reflected through `custom-error`. */
 customError:string|null;private labelId;private hintId;private errorId;private requiredDescriptionId;private externalDescriptionLease?;private requiredDescriptionLease?;private requiredDescriptionTarget?;private _fieldsetDisabled;private _name;private _required;private _disabled;private _value;private pendingRestoreValues?;
@@ -122,7 +124,7 @@ get name():string;set name(next:string);
 *  assignment that `readonly` cannot catch at the binding site, so it threw
 *  "Cannot set property value ... which has only a getter" from inside lit-html during a *later*
 *  render, pointing at framework internals rather than the offending line. */
-get value():readonly string[];set value(next:readonly string[]|null|undefined);get required():boolean;set required(next:boolean);get disabled():boolean;set disabled(next:boolean);constructor();private checkboxGroupOwner;private ownsCheckbox;private get boxes();
+get value():readonly string[];set value(next:readonly string[]|null|undefined);get required():boolean;set required(next:boolean);get disabled():boolean;set disabled(next:boolean);constructor();private markInteracted;private checkboxGroupOwner;private ownsCheckbox;private get boxes();
 /** Whether the group is disabled explicitly or by an ancestor fieldset. */
 get effectiveDisabled():boolean;private propagateDisabled;private propagateSize;private readValue;private warnOnDuplicateValues;private sync;
 /** Shared with every other form control: disabled (own or fieldset-cascaded) bars validation. */

package/dist/components/forms/checkbox-group/checkbox-group.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{LyraElement}from"../../../internal/lyra-element.js";import{installFormControlLabelSupport}from"../../../internal/form-control-labels.js";installFormControlLabelSupport();import{AnchoredValidityController,resolveValidityAnchor,VALIDITY_ANCHOR}from"../../../internal/anchored-validity.js";import{syncValidityStates}from"../../../internal/custom-states.js";import{hostAriaLabel,nextId,srOnly}from"../../../internal/a11y.js";import{acquireAriaDescription,acquireResolvedAriaRelationship}from"../../../internal/aria-controls.js";import{devWarnOnce}from"../../../internal/dev-mode-attribute-warning.js";import{sizes}from"../../../internal/sizes.styles.js";import{styles}from"./checkbox-group.styles.js";import{attachInternalsSafely,createStringArrayFormDataState,getFormOwner,installCustomErrorProperty,isBarredFromValidation,readStringArrayFormDataState,setFormOwner}from"../../../internal/form-associated.js";import{installInvalidEventAlias}from"../../../internal/invalid-event-alias.js";import{requestThenCommit}from"../../../internal/request-commit.js";import{markVetoGuardWrite,VetoWriteGuard}from"../../../internal/veto-write-guard.js";import{LYRA_DEFAULT_checkboxGroupRequired,LYRA_DEFAULT_fieldRequired}from"../../../internal/default-strings.generated.js";const DUPLICATE_VALUE_WARNING_KEY="lyra-checkbox-group-duplicate-child-values",DUPLICATE_VALUE_WARNING="<lr-checkbox-group>: duplicate child values make submitted FormData ambiguous; give each child a distinct value.";class LyraCheckboxGroup extends LyraElement{static{this.defaultStrings={...super.defaultStrings,checkboxGroupRequired:LYRA_DEFAULT_checkboxGroupRequired,fieldRequired:LYRA_DEFAULT_fieldRequired}}static{this.immutableEventDetails=Object.freeze(["lr-checkbox-group-toggle-request"])}static{this.identityEventDetailProperties=Object.freeze({"lr-checkbox-group-toggle-request":Object.freeze(["option"])})}static{this.formAssociated=!0}static{this.styles=[LyraElement.styles,sizes,srOnly,styles]}static{this.properties={customError:{attribute:"custom-error",reflect:!0,noAccessor:!0},name:{reflect:!0,noAccessor:!0},required:{type:Boolean,reflect:!0,noAccessor:!0},disabled:{type:Boolean,reflect:!0,noAccessor:!0},size:{reflect:!0},orientation:{reflect:!0},value:{attribute:!1,noAccessor:!0}}}get name(){return this._name}set name(next){const old=this._name;this._name=next??"",this._name?this.setAttribute("name",this._name):this.removeAttribute("name"),this.sync(),this.requestUpdate("name",old)}get value(){return Object.freeze([...this._value])}set value(next){markVetoGuardWrite(this.toggleGuard);const requested=Array.isArray(next)?next.filter(entry=>typeof entry=="string"):[];if(this.boxes.length===0){this.pendingValues=requested;return}this.pendingValues=void 0,this.applyValues(requested)}get required(){return this._required}set required(next){const old=this._required;this._required=!!next,this.toggleAttribute("required",this._required),this.sync(),this.requestUpdate("required",old)}get disabled(){return this._disabled}set disabled(next){const old=this._disabled;this._disabled=!!next,this.toggleAttribute("disabled",this._disabled),this.propagateDisabled(),this.sync(),this.requestUpdate("disabled",old)}constructor(){super(),this.orientation="vertical",this.label="",this.hint="",this.withLabel=!1,this.withHint=!1,this.errorText="",this.accessibleLabel="",this.touched=!1,this.hasInteracted=!1,this.hasLabelSlot=!1,this.hasHintSlot=!1,this.hasErrorSlot=!1,this.labelId=nextId("checkbox-group-label"),this.hintId=nextId("checkbox-group-hint"),this.errorId=nextId("checkbox-group-error"),this.requiredDescriptionId=nextId("checkbox-group-required"),this._fieldsetDisabled=!1,this._name="",this._required=!1,this._disabled=!1,this._value=[],this.childObserverGeneration=0,this.childControllers=new Map,this.toggleGuard=new VetoWriteGuard,this.authoredChildSizes=new Map,this.onChildEvent=event=>{if(!this.isOwnedCheckbox(event.target)||(event.stopImmediatePropagation(),event.type!=="change"||this.effectiveDisabled))return;this.hasInteracted=!0,this.sync();const detail=()=>Object.freeze({value:this.value});this.emit("input",detail()),this.emit("change",detail()),this.emit("lr-change",detail())},this.onChildToggleRequest=event=>{if(!this.isOwnedCheckbox(event.target)||(event.stopImmediatePropagation(),this.effectiveDisabled))return;const option=event.target,proposed=event.detail.checked;let allowed=!1;requestThenCommit({requestDetail:{value:this.projectedValue(option,proposed),previousValue:this.value,option},emitRequest:(detail,init)=>this.emit("lr-checkbox-group-toggle-request",detail,init),guard:this.toggleGuard,commit:()=>{allowed=!0}}),allowed||event.preventDefault()},this.onChildMutations=records=>{if(records.some(record=>record.type==="childList"||record.attributeName==="slot")){this.onSlotChange();return}for(const record of records){if(record.attributeName!=="size"||!this.isOwnedCheckbox(record.target))continue;const box=record.target;this.size!==void 0&&box.size!==this.size&&this.authoredChildSizes.set(box,box.size)}records.some(record=>record.attributeName==="size"&&this.isOwnedCheckbox(record.target))&&this.propagateSize(),records.some(record=>this.isOwnedCheckbox(record.target))&&this.sync()},this.onSlotChange=()=>{this.hasLabelSlot=this.hasDirectSupportSlot("label"),this.hasHintSlot=this.hasDirectSupportSlot("hint"),this.hasErrorSlot=this.hasDirectSupportSlot("error"),this.reconcileChildControllers(),!this.applyPendingRestore()&&!this.applyPendingValues()&&this.sync(),this.propagateDisabled(),this.propagateSize()},this.internals=attachInternalsSafely(this),this.validityController=new AnchoredValidityController(this,this.internals,()=>this[VALIDITY_ANCHOR]()),installCustomErrorProperty(this,()=>this.validityController.customValidityMessage),installInvalidEventAlias(this,init=>this.emit("lr-invalid",null,init))}checkboxGroupOwner(element){const group=element.closest("lr-checkbox-group");if(!group)return null;let topLevelChild=element;for(;topLevelChild.parentElement&&topLevelChild.parentElement!==group;)topLevelChild=topLevelChild.parentElement;if(topLevelChild.parentElement!==group)return null;const slot=topLevelChild.getAttribute("slot");return slot==="label"||slot==="hint"||slot==="error"?null:group}ownsCheckbox(element){return element.localName==="lr-checkbox"&&this.checkboxGroupOwner(element)===this}get boxes(){const querySelectorAll=this.querySelectorAll;return typeof querySelectorAll!="function"?[]:Array.from(querySelectorAll.call(this,"lr-checkbox")).filter(box=>this.ownsCheckbox(box))}get effectiveDisabled(){return this.disabled||this._fieldsetDisabled}propagateDisabled(){const effective=this.effectiveDisabled;this.boxes.forEach(box=>box.setGroupDisabled?.(effective))}propagateSize(){for(const box of this.boxes)if(this.authoredChildSizes.has(box)||this.authoredChildSizes.set(box,box.size),this.size===void 0||this.size===null){const authored=this.authoredChildSizes.get(box);authored!==void 0&&box.size!==authored&&(box.size=authored),this.authoredChildSizes.delete(box)}else box.size!==this.size&&(box.size=this.size)}readValue(){return this.boxes.filter(box=>box.checked).map(box=>box.value??"on")}warnOnDuplicateValues(){const seen=new Set;for(const box of this.boxes){const value=box.value??box.getAttribute("value")??"on";if(!seen.has(value)){seen.add(value);continue}devWarnOnce(DUPLICATE_VALUE_WARNING_KEY,DUPLICATE_VALUE_WARNING);return}}sync(){const next=this.readValue();this.warnOnDuplicateValues();const old=this._value;this._value=next,this.requestUpdate("value",old);const data=new FormData;this.name&&next.forEach(value=>data.append(this.name,value)),this.internals.setFormValue(this.name?data:null,createStringArrayFormDataState(this.name,next)),!this.barredFromValidation&&this.required&&next.length===0?this.validityController.setValidity({valueMissing:!0},this.localize("checkboxGroupRequired")):this.validityController.setValidity({}),this.reflectValidityStates()}notifyCheckboxStateChange(checkbox){this.isConnected&&this.ownsCheckbox(checkbox)&&this.sync()}get barredFromValidation(){return isBarredFromValidation(this,this.internals)}reflectValidityStates(){const barred=this.barredFromValidation;this.toggleAttribute("data-invalid",!barred&&this.touched&&!this.internals.validity.valid),syncValidityStates(this.internals,{required:this.required,hasInteracted:this.hasInteracted,barred})}isOwnedCheckbox(target){return target?.nodeType===1&&this.ownsCheckbox(target)}projectedValue(option,proposed){return Object.freeze(this.boxes.filter(box=>box===option?proposed:box.checked).map(box=>box.value??"on"))}reconcileChildControllers(){const current=new Set(this.boxes);for(const[box,controller]of this.childControllers){if(current.has(box))continue;box.removeController(controller),this.childControllers.delete(box);const authoredSize=this.authoredChildSizes.get(box);authoredSize!==void 0&&box.size!==authoredSize&&(box.size=authoredSize),this.authoredChildSizes.delete(box);const nextOwner=this.checkboxGroupOwner(box);(!nextOwner||nextOwner===this)&&box.setGroupDisabled?.(!1)}for(const box of current){if(this.childControllers.has(box)||typeof box.addController!="function")continue;const controller={hostUpdated:()=>{this.isConnected&&this.ownsCheckbox(box)&&this.sync()}};box.addController(controller),this.childControllers.set(box,controller)}}hasDirectSupportSlot(name){return Array.from(this.children??[]).some(child=>child.getAttribute("slot")===name)}applyValues(values){const remaining=[...values];for(const box of this.boxes){const value=box.value??"on",index=remaining.indexOf(value);box.checked=index>=0,index>=0&&remaining.splice(index,1)}this.sync()}applyPendingRestore(){if(this.pendingRestoreValues===void 0||this.boxes.length===0)return!1;const values=this.pendingRestoreValues;return this.pendingRestoreValues=void 0,this.touched=!1,this.hasInteracted=!1,this.applyValues(values),!0}applyPendingValues(){if(this.pendingValues===void 0||this.boxes.length===0)return!1;const values=this.pendingValues;return this.pendingValues=void 0,this.applyValues(values),!0}connectedCallback(){super.connectedCallback(),this.addEventListener("input",this.onChildEvent,{capture:!0}),this.addEventListener("change",this.onChildEvent,{capture:!0}),this.addEventListener("lr-change",this.onChildEvent,{capture:!0}),this.addEventListener("lr-checkbox-toggle-request",this.onChildToggleRequest,{capture:!0}),this.onSlotChange(),this.armChildObserver(),this.hasUpdated&&(this.syncRequiredDescription(),this.syncExternalDescription())}armChildObserver(){const ownerDocument=this.ownerDocument;if(!this.isConnected||this.childObserver&&this.childObserverDocument===ownerDocument)return;this.resetChildObserver();const MutationObserverCtor=ownerDocument.defaultView?.MutationObserver;if(!MutationObserverCtor)return;const generation=this.childObserverGeneration,observer=new MutationObserverCtor(records=>{this.childObserver!==observer||this.childObserverDocument!==ownerDocument||this.childObserverGeneration!==generation||!this.isConnected||this.ownerDocument!==ownerDocument||this.onChildMutations(records)});this.childObserver=observer,this.childObserverDocument=ownerDocument,observer.observe(this,{attributes:!0,childList:!0,subtree:!0,attributeFilter:["checked","value","disabled","size","slot"]})}disconnectedCallback(){this.releaseExternalDescription(),this.releaseRequiredDescription(),this.removeEventListener("input",this.onChildEvent,{capture:!0}),this.removeEventListener("change",this.onChildEvent,{capture:!0}),this.removeEventListener("lr-change",this.onChildEvent,{capture:!0}),this.removeEventListener("lr-checkbox-toggle-request",this.onChildToggleRequest,{capture:!0}),this.resetChildObserver();for(const[box,controller]of this.childControllers){box.removeController(controller),box.setGroupDisabled?.(!1);const authoredSize=this.authoredChildSizes.get(box);authoredSize!==void 0&&box.size!==authoredSize&&(box.size=authoredSize)}this.childControllers.clear(),this.authoredChildSizes.clear(),super.disconnectedCallback()}adoptedCallback(){super.adoptedCallback(),this.releaseExternalDescription(),this.releaseRequiredDescription(),this.resetChildObserver(),this.isConnected&&this.hasUpdated&&(this.syncRequiredDescription(),this.syncExternalDescription())}resetChildObserver(){this.childObserverGeneration+=1,this.childObserver?.disconnect(),this.childObserver=void 0,this.childObserverDocument=void 0}firstUpdated(changed){super.firstUpdated(changed),this.addEventListener("blur",event=>{const blurredControl=event.target;(typeof blurredControl?.matches=="function"?blurredControl.matches(":disabled"):this.effectiveDisabled)||(this.touched=!0,this.hasInteracted=!0),this.sync()},!0)}updated(changed){super.updated(changed),changed.has("size")&&this.propagateSize(),this.syncRequiredDescription(),this.syncExternalDescription()}syncExternalDescription(){const target=this.renderRoot.querySelector("fieldset");if(!target){this.releaseExternalDescription();return}if(!this.externalDescriptionLease){this.externalDescriptionLease=acquireResolvedAriaRelationship(this,target,"aria-describedby");return}this.externalDescriptionLease.update(target)}releaseExternalDescription(){this.externalDescriptionLease?.release(),this.externalDescriptionLease=void 0}syncRequiredDescription(){const target=this.renderRoot.querySelector("fieldset"),description=this.renderRoot.querySelector(`#${this.requiredDescriptionId}`);if(!this.required||!target||!description){this.releaseRequiredDescription();return}if(this.requiredDescriptionTarget!==target){this.releaseRequiredDescription(),this.requiredDescriptionTarget=target,this.requiredDescriptionLease=acquireAriaDescription(target,[description]);return}this.requiredDescriptionLease?.update([description])}releaseRequiredDescription(){this.requiredDescriptionLease?.release(),this.requiredDescriptionLease=void 0,this.requiredDescriptionTarget=void 0}[VALIDITY_ANCHOR](){const first=this.firstEnabledBox();return resolveValidityAnchor(first)??first??null}get form(){return getFormOwner(this.internals)}set form(owner){setFormOwner(this,owner)}getForm(){return getFormOwner(this.internals)}get labels(){return this.internals.labels}get validity(){return this.internals.validity}get validationMessage(){return this.internals.validationMessage}get willValidate(){return this.internals.willValidate}checkValidity(){return this.internals.checkValidity()}reportValidity(){return this.hasInteracted=!0,this.reflectValidityStates(),this.internals.reportValidity()}setCustomValidity(message){this.validityController.setCustomValidity(message??""),this.reflectValidityStates(),this.requestUpdate()}get liveDisabled(){return this.effectiveDisabled||this.matches(":disabled")}firstEnabledBox(){return this.boxes.find(box=>!box.effectiveDisabled&&!box.matches(":disabled"))}focus(options){this.liveDisabled||this.firstEnabledBox()?.focus(options)}blur(){this.boxes.find(box=>box.matches(":focus-within"))?.blur()}click(){this.liveDisabled||this.firstEnabledBox()?.click()}formResetCallback(){this.boxes.forEach(box=>box.resetFromGroup()),this.touched=!1,this.hasInteracted=!1,this.sync()}formStateRestoreCallback(state2,_mode){this.pendingRestoreValues=readStringArrayFormDataState(state2),this.applyPendingRestore()}formDisabledCallback(disabled){this._fieldsetDisabled=disabled,this.propagateDisabled(),this.sync(),this.requestUpdate()}render(){const hasLabel=this.hasLabelSlot||!!this.label||this.withLabel,hasHint=this.hasHintSlot||!!this.hint||this.withHint,hasError=this.hasErrorSlot||!!this.errorText,described=[hasHint?this.hintId:"",hasError?this.errorId:""].filter(Boolean).join(" ")||nothing,invalid=hasError||this.touched&&!this.internals.validity.valid;return html`<fieldset
+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{LyraElement}from"../../../internal/lyra-element.js";import{installFormControlLabelSupport}from"../../../internal/form-control-labels.js";installFormControlLabelSupport();import{AnchoredValidityController,resolveValidityAnchor,VALIDITY_ANCHOR}from"../../../internal/anchored-validity.js";import{syncValidityStates}from"../../../internal/custom-states.js";import{hostAriaLabel,nextId,srOnly}from"../../../internal/a11y.js";import{acquireAriaDescription,acquireResolvedAriaRelationship}from"../../../internal/aria-controls.js";import{devWarnOnce}from"../../../internal/dev-mode-attribute-warning.js";import{sizes}from"../../../internal/sizes.styles.js";import{styles}from"./checkbox-group.styles.js";import{attachInternalsSafely,createStringArrayFormDataState,getFormOwner,installCustomErrorProperty,isBarredFromValidation,readStringArrayFormDataState,setFormOwner}from"../../../internal/form-associated.js";import{installInteractionOnInvalid,installInvalidEventAlias,withStaticValidityCheck}from"../../../internal/invalid-event-alias.js";import{requestThenCommit}from"../../../internal/request-commit.js";import{markVetoGuardWrite,VetoWriteGuard}from"../../../internal/veto-write-guard.js";import{LYRA_DEFAULT_checkboxGroupRequired,LYRA_DEFAULT_fieldRequired}from"../../../internal/default-strings.generated.js";const DUPLICATE_VALUE_WARNING_KEY="lyra-checkbox-group-duplicate-child-values",DUPLICATE_VALUE_WARNING="<lr-checkbox-group>: duplicate child values make submitted FormData ambiguous; give each child a distinct value.";class LyraCheckboxGroup extends LyraElement{static{this.defaultStrings={...super.defaultStrings,checkboxGroupRequired:LYRA_DEFAULT_checkboxGroupRequired,fieldRequired:LYRA_DEFAULT_fieldRequired}}static{this.immutableEventDetails=Object.freeze(["lr-checkbox-group-toggle-request"])}static{this.identityEventDetailProperties=Object.freeze({"lr-checkbox-group-toggle-request":Object.freeze(["option"])})}static{this.formAssociated=!0}static{this.styles=[LyraElement.styles,sizes,srOnly,styles]}static{this.properties={customError:{attribute:"custom-error",reflect:!0,noAccessor:!0},name:{reflect:!0,noAccessor:!0},required:{type:Boolean,reflect:!0,noAccessor:!0},disabled:{type:Boolean,reflect:!0,noAccessor:!0},size:{reflect:!0},orientation:{reflect:!0},value:{attribute:!1,noAccessor:!0}}}get name(){return this._name}set name(next){const old=this._name;this._name=next??"",this._name?this.setAttribute("name",this._name):this.removeAttribute("name"),this.sync(),this.requestUpdate("name",old)}get value(){return Object.freeze([...this._value])}set value(next){markVetoGuardWrite(this.toggleGuard);const requested=Array.isArray(next)?next.filter(entry=>typeof entry=="string"):[];if(this.boxes.length===0){this.pendingValues=requested;return}this.pendingValues=void 0,this.applyValues(requested)}get required(){return this._required}set required(next){const old=this._required;this._required=!!next,this.toggleAttribute("required",this._required),this.sync(),this.requestUpdate("required",old)}get disabled(){return this._disabled}set disabled(next){const old=this._disabled;this._disabled=!!next,this.toggleAttribute("disabled",this._disabled),this.propagateDisabled(),this.sync(),this.requestUpdate("disabled",old)}constructor(){super(),this.orientation="vertical",this.label="",this.hint="",this.withLabel=!1,this.withHint=!1,this.errorText="",this.accessibleLabel="",this.touched=!1,this.hasInteracted=!1,this.hasLabelSlot=!1,this.hasHintSlot=!1,this.hasErrorSlot=!1,this.labelId=nextId("checkbox-group-label"),this.hintId=nextId("checkbox-group-hint"),this.errorId=nextId("checkbox-group-error"),this.requiredDescriptionId=nextId("checkbox-group-required"),this._fieldsetDisabled=!1,this._name="",this._required=!1,this._disabled=!1,this._value=[],this.childObserverGeneration=0,this.childControllers=new Map,this.toggleGuard=new VetoWriteGuard,this.authoredChildSizes=new Map,this.markInteracted=()=>{this.hasInteracted||(this.hasInteracted=!0,this.reflectValidityStates())},this.onChildEvent=event=>{if(!this.isOwnedCheckbox(event.target)||(event.stopImmediatePropagation(),event.type!=="change"||this.effectiveDisabled))return;this.hasInteracted=!0,this.sync();const detail=()=>Object.freeze({value:this.value});this.emit("input",detail()),this.emit("change",detail()),this.emit("lr-change",detail())},this.onChildToggleRequest=event=>{if(!this.isOwnedCheckbox(event.target)||(event.stopImmediatePropagation(),this.effectiveDisabled))return;const option=event.target,proposed=event.detail.checked;let allowed=!1;requestThenCommit({requestDetail:{value:this.projectedValue(option,proposed),previousValue:this.value,option},emitRequest:(detail,init)=>this.emit("lr-checkbox-group-toggle-request",detail,init),guard:this.toggleGuard,commit:()=>{allowed=!0}}),allowed||event.preventDefault()},this.onChildMutations=records=>{if(records.some(record=>record.type==="childList"||record.attributeName==="slot")){this.onSlotChange();return}for(const record of records){if(record.attributeName!=="size"||!this.isOwnedCheckbox(record.target))continue;const box=record.target;this.size!==void 0&&box.size!==this.size&&this.authoredChildSizes.set(box,box.size)}records.some(record=>record.attributeName==="size"&&this.isOwnedCheckbox(record.target))&&this.propagateSize(),records.some(record=>this.isOwnedCheckbox(record.target))&&this.sync()},this.onSlotChange=()=>{this.hasLabelSlot=this.hasDirectSupportSlot("label"),this.hasHintSlot=this.hasDirectSupportSlot("hint"),this.hasErrorSlot=this.hasDirectSupportSlot("error"),this.reconcileChildControllers(),!this.applyPendingRestore()&&!this.applyPendingValues()&&this.sync(),this.propagateDisabled(),this.propagateSize()},this.internals=attachInternalsSafely(this),this.validityController=new AnchoredValidityController(this,this.internals,()=>this[VALIDITY_ANCHOR]()),installCustomErrorProperty(this,()=>this.validityController.customValidityMessage),installInvalidEventAlias(this,init=>this.emit("lr-invalid",null,init)),installInteractionOnInvalid(this,this.markInteracted)}checkboxGroupOwner(element){const group=element.closest("lr-checkbox-group");if(!group)return null;let topLevelChild=element;for(;topLevelChild.parentElement&&topLevelChild.parentElement!==group;)topLevelChild=topLevelChild.parentElement;if(topLevelChild.parentElement!==group)return null;const slot=topLevelChild.getAttribute("slot");return slot==="label"||slot==="hint"||slot==="error"?null:group}ownsCheckbox(element){return element.localName==="lr-checkbox"&&this.checkboxGroupOwner(element)===this}get boxes(){const querySelectorAll=this.querySelectorAll;return typeof querySelectorAll!="function"?[]:Array.from(querySelectorAll.call(this,"lr-checkbox")).filter(box=>this.ownsCheckbox(box))}get effectiveDisabled(){return this.disabled||this._fieldsetDisabled}propagateDisabled(){const effective=this.effectiveDisabled;this.boxes.forEach(box=>box.setGroupDisabled?.(effective))}propagateSize(){for(const box of this.boxes)if(this.authoredChildSizes.has(box)||this.authoredChildSizes.set(box,box.size),this.size===void 0||this.size===null){const authored=this.authoredChildSizes.get(box);authored!==void 0&&box.size!==authored&&(box.size=authored),this.authoredChildSizes.delete(box)}else box.size!==this.size&&(box.size=this.size)}readValue(){return this.boxes.filter(box=>box.checked).map(box=>box.value??"on")}warnOnDuplicateValues(){const seen=new Set;for(const box of this.boxes){const value=box.value??box.getAttribute("value")??"on";if(!seen.has(value)){seen.add(value);continue}devWarnOnce(DUPLICATE_VALUE_WARNING_KEY,DUPLICATE_VALUE_WARNING);return}}sync(){const next=this.readValue();this.warnOnDuplicateValues();const old=this._value;this._value=next,this.requestUpdate("value",old);const data=new FormData;this.name&&next.forEach(value=>data.append(this.name,value)),this.internals.setFormValue(this.name?data:null,createStringArrayFormDataState(this.name,next)),!this.barredFromValidation&&this.required&&next.length===0?this.validityController.setValidity({valueMissing:!0},this.localize("checkboxGroupRequired")):this.validityController.setValidity({}),this.reflectValidityStates()}notifyCheckboxStateChange(checkbox){this.isConnected&&this.ownsCheckbox(checkbox)&&this.sync()}get barredFromValidation(){return isBarredFromValidation(this,this.internals)}reflectValidityStates(){const barred=this.barredFromValidation;this.toggleAttribute("data-invalid",!barred&&this.touched&&!this.internals.validity.valid),syncValidityStates(this.internals,{required:this.required,hasInteracted:this.hasInteracted,barred})}isOwnedCheckbox(target){return target?.nodeType===1&&this.ownsCheckbox(target)}projectedValue(option,proposed){return Object.freeze(this.boxes.filter(box=>box===option?proposed:box.checked).map(box=>box.value??"on"))}reconcileChildControllers(){const current=new Set(this.boxes);for(const[box,controller]of this.childControllers){if(current.has(box))continue;box.removeController(controller),this.childControllers.delete(box);const authoredSize=this.authoredChildSizes.get(box);authoredSize!==void 0&&box.size!==authoredSize&&(box.size=authoredSize),this.authoredChildSizes.delete(box);const nextOwner=this.checkboxGroupOwner(box);(!nextOwner||nextOwner===this)&&box.setGroupDisabled?.(!1)}for(const box of current){if(this.childControllers.has(box)||typeof box.addController!="function")continue;const controller={hostUpdated:()=>{this.isConnected&&this.ownsCheckbox(box)&&this.sync()}};box.addController(controller),this.childControllers.set(box,controller)}}hasDirectSupportSlot(name){return Array.from(this.children??[]).some(child=>child.getAttribute("slot")===name)}applyValues(values){const remaining=[...values];for(const box of this.boxes){const value=box.value??"on",index=remaining.indexOf(value);box.checked=index>=0,index>=0&&remaining.splice(index,1)}this.sync()}applyPendingRestore(){if(this.pendingRestoreValues===void 0||this.boxes.length===0)return!1;const values=this.pendingRestoreValues;return this.pendingRestoreValues=void 0,this.touched=!1,this.hasInteracted=!1,this.applyValues(values),!0}applyPendingValues(){if(this.pendingValues===void 0||this.boxes.length===0)return!1;const values=this.pendingValues;return this.pendingValues=void 0,this.applyValues(values),!0}connectedCallback(){super.connectedCallback(),this.addEventListener("input",this.onChildEvent,{capture:!0}),this.addEventListener("change",this.onChildEvent,{capture:!0}),this.addEventListener("lr-change",this.onChildEvent,{capture:!0}),this.addEventListener("lr-checkbox-toggle-request",this.onChildToggleRequest,{capture:!0}),this.onSlotChange(),this.armChildObserver(),this.hasUpdated&&(this.syncRequiredDescription(),this.syncExternalDescription())}armChildObserver(){const ownerDocument=this.ownerDocument;if(!this.isConnected||this.childObserver&&this.childObserverDocument===ownerDocument)return;this.resetChildObserver();const MutationObserverCtor=ownerDocument.defaultView?.MutationObserver;if(!MutationObserverCtor)return;const generation=this.childObserverGeneration,observer=new MutationObserverCtor(records=>{this.childObserver!==observer||this.childObserverDocument!==ownerDocument||this.childObserverGeneration!==generation||!this.isConnected||this.ownerDocument!==ownerDocument||this.onChildMutations(records)});this.childObserver=observer,this.childObserverDocument=ownerDocument,observer.observe(this,{attributes:!0,childList:!0,subtree:!0,attributeFilter:["checked","value","disabled","size","slot"]})}disconnectedCallback(){this.releaseExternalDescription(),this.releaseRequiredDescription(),this.removeEventListener("input",this.onChildEvent,{capture:!0}),this.removeEventListener("change",this.onChildEvent,{capture:!0}),this.removeEventListener("lr-change",this.onChildEvent,{capture:!0}),this.removeEventListener("lr-checkbox-toggle-request",this.onChildToggleRequest,{capture:!0}),this.resetChildObserver();for(const[box,controller]of this.childControllers){box.removeController(controller),box.setGroupDisabled?.(!1);const authoredSize=this.authoredChildSizes.get(box);authoredSize!==void 0&&box.size!==authoredSize&&(box.size=authoredSize)}this.childControllers.clear(),this.authoredChildSizes.clear(),super.disconnectedCallback()}adoptedCallback(){super.adoptedCallback(),this.releaseExternalDescription(),this.releaseRequiredDescription(),this.resetChildObserver(),this.isConnected&&this.hasUpdated&&(this.syncRequiredDescription(),this.syncExternalDescription())}resetChildObserver(){this.childObserverGeneration+=1,this.childObserver?.disconnect(),this.childObserver=void 0,this.childObserverDocument=void 0}firstUpdated(changed){super.firstUpdated(changed),this.addEventListener("blur",event=>{const blurredControl=event.target;(typeof blurredControl?.matches=="function"?blurredControl.matches(":disabled"):this.effectiveDisabled)||(this.touched=!0,this.hasInteracted=!0),this.sync()},!0)}updated(changed){super.updated(changed),changed.has("size")&&this.propagateSize(),this.syncRequiredDescription(),this.syncExternalDescription()}syncExternalDescription(){const target=this.renderRoot.querySelector("fieldset");if(!target){this.releaseExternalDescription();return}if(!this.externalDescriptionLease){this.externalDescriptionLease=acquireResolvedAriaRelationship(this,target,"aria-describedby");return}this.externalDescriptionLease.update(target)}releaseExternalDescription(){this.externalDescriptionLease?.release(),this.externalDescriptionLease=void 0}syncRequiredDescription(){const target=this.renderRoot.querySelector("fieldset"),description=this.renderRoot.querySelector(`#${this.requiredDescriptionId}`);if(!this.required||!target||!description){this.releaseRequiredDescription();return}if(this.requiredDescriptionTarget!==target){this.releaseRequiredDescription(),this.requiredDescriptionTarget=target,this.requiredDescriptionLease=acquireAriaDescription(target,[description]);return}this.requiredDescriptionLease?.update([description])}releaseRequiredDescription(){this.requiredDescriptionLease?.release(),this.requiredDescriptionLease=void 0,this.requiredDescriptionTarget=void 0}[VALIDITY_ANCHOR](){const first=this.firstEnabledBox();return resolveValidityAnchor(first)??first??null}get form(){return getFormOwner(this.internals)}set form(owner){setFormOwner(this,owner)}getForm(){return getFormOwner(this.internals)}get labels(){return this.internals.labels}get validity(){return this.internals.validity}get validationMessage(){return this.internals.validationMessage}get willValidate(){return this.internals.willValidate}checkValidity(){return withStaticValidityCheck(this,()=>this.internals.checkValidity())}reportValidity(){return this.hasInteracted=!0,this.reflectValidityStates(),this.internals.reportValidity()}setCustomValidity(message){this.validityController.setCustomValidity(message??""),this.reflectValidityStates(),this.requestUpdate()}get liveDisabled(){return this.effectiveDisabled||this.matches(":disabled")}firstEnabledBox(){return this.boxes.find(box=>!box.effectiveDisabled&&!box.matches(":disabled"))}focus(options){this.liveDisabled||this.firstEnabledBox()?.focus(options)}blur(){this.boxes.find(box=>box.matches(":focus-within"))?.blur()}click(){this.liveDisabled||this.firstEnabledBox()?.click()}formResetCallback(){this.boxes.forEach(box=>box.resetFromGroup()),this.touched=!1,this.hasInteracted=!1,this.sync()}formStateRestoreCallback(state2,_mode){this.pendingRestoreValues=readStringArrayFormDataState(state2),this.applyPendingRestore()}formDisabledCallback(disabled){this._fieldsetDisabled=disabled,this.propagateDisabled(),this.sync(),this.requestUpdate()}render(){const hasLabel=this.hasLabelSlot||!!this.label||this.withLabel,hasHint=this.hasHintSlot||!!this.hint||this.withHint,hasError=this.hasErrorSlot||!!this.errorText,described=[hasHint?this.hintId:"",hasError?this.errorId:""].filter(Boolean).join(" ")||nothing,invalid=hasError||this.touched&&!this.internals.validity.valid;return html`<fieldset
       part="form-control"
       ?disabled=${this.effectiveDisabled}
       aria-label=${hostAriaLabel(this)??nothing}

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

@@ -1,7 +1,14 @@
 import{type PropertyValues,type TemplateResult}from'lit';import type{Placement}from'@floating-ui/dom';import{LyraElement}from'../../../internal/lyra-element.js';import type{PlaceStrategy}from'../../../internal/positioner.js';import{type LyraColorPickerFormat}from'./color-core.js';import type{LyraSize}from'../../../internal/variants.js';import{type LyraFormValidator}from'../form-validator.js';export type{LyraColorHsva,LyraColorPickerFormat,LyraColorPickerOutputFormat,}from'./color-core.js';export type{PlaceStrategy};
 /** A predefined palette entry. `label` becomes the swatch's accessible name; without one the
 *  raw colour string is announced instead. */
-export interface LyraColorPickerSwatch{color:string;label?:string;}export interface LyraColorPickerEventMap{'lr-invalid':CustomEvent<null>;'lr-input':CustomEvent<null>;input:InputEvent;change:Event;blur:FocusEvent;focus:FocusEvent;'lr-change':CustomEvent<{value:string;}>;'lr-show':CustomEvent<null>;'lr-after-show':CustomEvent<null>;'lr-hide':CustomEvent<null>;'lr-after-hide':CustomEvent<null>;}declare class ColorPickerBase extends LyraElement<LyraColorPickerEventMap>{}declare const LyraColorPicker_base:typeof ColorPickerBase&(new(...args:any[])=>import("../../../lyra.js").FormAssociatedInterface<string> &import("../../../internal/form-associated.js").FormAssociatedSubclassInterface<string>);
+export interface LyraColorPickerSwatch{color:string;label?:string;
+/**
+* Marks this swatch non-actionable: it renders a genuinely disabled `<button>` (no tab stop, no
+* hover/press affordance) and clicking it commits nothing. Independent of the whole control's own
+* `disabled`/`effectiveDisabled` -- this swatch alone stays inert even while every other swatch
+* remains pickable. Omitted or `false` renders the swatch exactly as before this field existed.
+*/
+disabled?:boolean;}export interface LyraColorPickerEventMap{'lr-invalid':CustomEvent<null>;'lr-input':CustomEvent<null>;input:InputEvent;change:Event;blur:FocusEvent;focus:FocusEvent;'lr-change':CustomEvent<{value:string;}>;'lr-show':CustomEvent<null>;'lr-after-show':CustomEvent<null>;'lr-hide':CustomEvent<null>;'lr-after-hide':CustomEvent<null>;}declare class ColorPickerBase extends LyraElement<LyraColorPickerEventMap>{}declare const LyraColorPicker_base:typeof ColorPickerBase&(new(...args:any[])=>import("../../../lyra.js").FormAssociatedInterface<string> &import("../../../internal/form-associated.js").FormAssociatedSubclassInterface<string>);
 /**
 * `<lr-color-picker>` — a form-associated colour picker: a compact swatch trigger that opens a
 * popover with a saturation/brightness grid, a hue slider, an optional alpha slider, a text field
@@ -30,6 +37,11 @@ export interface LyraColorPickerSwatch{color:string;label?:string;}export interf
 * 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.
 *
+* A `swatches` entry may also set `disabled`, marking that one palette swatch non-actionable
+* independent of the whole control's own `disabled`: it renders a genuinely disabled `<button>`
+* (no tab stop, no hover/press affordance) and clicking it commits nothing. Omitted or `false`
+* renders the swatch exactly as before this field existed.
+*
 * @customElement lr-color-picker
 * @slot label - Custom label content.
 * @slot hint - Supporting text.
@@ -105,7 +117,8 @@ export interface LyraColorPickerSwatch{color:string;label?:string;}export interf
 * @csspart eyedropper-button__caret - Reserved caret container.
 * @csspart eye-dropper-button__caret - Shoelace alias for `eyedropper-button__caret`.
 * @csspart swatches - The predefined-palette container, rendered only when `swatches` is non-empty.
-* @csspart swatch - A single palette swatch. The active one is `[part~='swatch-selected']`.
+* @csspart swatch - A single palette swatch. The active one is `[part~='swatch-selected']`. Renders
+*   a genuine `disabled` `<button>` while that swatch's own entry sets `disabled`.
 * @csspart swatch-selected - Token added to the swatch matching the current value.
 * @csspart hint - Supporting text.
 * @csspart error - The validation message.
@@ -128,6 +141,7 @@ export interface LyraColorPickerSwatch{color:string;label?:string;}export interf
 *   hue/opacity ramp. The slider's own pointer target stays floored at 24px regardless.
 * @cssprop [--lr-color-picker-slider-handle-size=var(--lr-size-1-25rem)] - Diameter of a slider handle.
 * @cssprop [--lr-color-picker-palette-swatch-size=var(--lr-size-1-5rem)] - Size of a palette swatch.
+* @cssprop [--lr-color-picker-swatch-disabled-opacity=0.5] - Opacity of a palette swatch whose own entry sets `disabled`.
 * @cssprop --grid-width - Upstream alias for `--lr-color-picker-grid-inline-size`.
 * @cssprop --grid-height - Upstream alias for `--lr-color-picker-grid-block-size`.
 * @cssprop --grid-handle-size - Upstream alias for `--lr-color-picker-grid-handle-size`.

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{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{optionalLiteralSetConverter}from"../../../internal/converters.js";import{resolveEffectivePositioningStrategy}from"../../../internal/positioning-strategy.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 POSITIONING_STRATEGY=optionalLiteralSetConverter(["absolute","fixed"]),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 positioningStrategy(){return this._positioningStrategy??"absolute"}set positioningStrategy(next){const normalized=POSITIONING_STRATEGY.normalize(next)??"absolute",old=this.positioningStrategy;this._positioningStrategy=normalized,normalized!==old&&(this.requestUpdate("positioningStrategy",old),old==="fixed"!=(normalized==="fixed")&&this.requestUpdate("hoist",old==="fixed"))}get hoist(){return this.positioningStrategy==="fixed"}set hoist(next){this.positioningStrategy=next?"fixed":"absolute"}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.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=Array.from(this.children).some(el=>el.getAttribute("slot")===slot.name);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("positioningStrategy"))&&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:resolveEffectivePositioningStrategy(this,this._positioningStrategy,"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
+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{optionalLiteralSetConverter}from"../../../internal/converters.js";import{resolveEffectivePositioningStrategy}from"../../../internal/positioning-strategy.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 POSITIONING_STRATEGY=optionalLiteralSetConverter(["absolute","fixed"]),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"),disabled=getOwnDataDescriptor(entry.value,"disabled");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,disabledValue=disabled===MISSING_OWN_DATA_DESCRIPTOR||disabled===UNSAFE_OWN_DATA_DESCRIPTOR||typeof disabled.value!="boolean"?void 0:disabled.value;swatches.push(Object.freeze({color:color.value.trim(),...labelValue===void 0?{}:{label:labelValue},...disabledValue===void 0?{}:{disabled:disabledValue}}))}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 positioningStrategy(){return this._positioningStrategy??"absolute"}set positioningStrategy(next){const normalized=POSITIONING_STRATEGY.normalize(next)??"absolute",old=this.positioningStrategy;this._positioningStrategy=normalized,normalized!==old&&(this.requestUpdate("positioningStrategy",old),old==="fixed"!=(normalized==="fixed")&&this.requestUpdate("hoist",old==="fixed"))}get hoist(){return this.positioningStrategy==="fixed"}set hoist(next){this.positioningStrategy=next?"fixed":"absolute"}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.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=Array.from(this.children).some(el=>el.getAttribute("slot")===slot.name);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("positioningStrategy"))&&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:resolveEffectivePositioningStrategy(this,this._positioningStrategy,"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||swatch.disabled)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)}
@@ -69,7 +69,7 @@ var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3
             part=${part}
             aria-pressed=${selected?"true":"false"}
             aria-label=${name}
-            ?disabled=${this.effectiveDisabled}
+            ?disabled=${this.effectiveDisabled||entry.disabled===!0}
             style=${styleMap(parsed?{"--lr-color-picker-swatch-color":cssColor(parsed)}:{})}
             @click=${()=>this.onSwatchClick(entry)}
           ></button>

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

@@ -1 +1 @@
-import{css}from"lit";import{formControlRequiredMarker}from"../../../internal/form-control.styles.js";import{overlaySurfaceFill}from"../../../internal/overlay-surface.styles.js";const styles=css` :host { display: inline-block; --_lr-color-picker-swatch-size: var( --lr-form-control-height, var(--lr-size-2-5rem) ); --_lr-color-picker-gap: var(--lr-space-xs); --_lr-color-picker-radius: var(--lr-radius); --_lr-color-picker-grid-inline-size: var( --grid-width, var(--lr-size-15rem) ); --_lr-color-picker-grid-block-size: var(--grid-height, var(--lr-size-8rem)); --_lr-color-picker-grid-handle-size: var( --grid-handle-size, var(--lr-size-1rem) ); --_lr-color-picker-slider-block-size: var( --slider-height, var(--lr-size-0-75rem) ); --_lr-color-picker-slider-handle-size: var( --slider-handle-size, var(--lr-size-1-25rem) ); --_lr-color-picker-palette-swatch-size: var( --swatch-size, var(--lr-size-1-5rem) ); --_lr-color-picker-checker-color: var(--lr-color-border); --_lr-color-picker-checker-size: var(--lr-size-0-5rem); --_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%); --_lr-color-picker-swatch-color: transparent; --_lr-color-picker-grid-hue: transparent; --_lr-color-picker-opacity-gradient: none; } [part~="form-control"] { display: inline-flex; position: relative; flex-direction: column; gap: var(--lr-color-picker-gap, var(--_lr-color-picker-gap)); } [part~="label"] { color: var(--lr-color-text); font-size: var(--lr-font-size-md-sm); } [part~="label"][hidden] { display: none; } ${formControlRequiredMarker} [part~='preview'], [part~='swatch'] { background-color: var(--lr-color-surface); background-image: conic-gradient( var( --lr-color-picker-checker-color, var(--_lr-color-picker-checker-color) ) 0deg 90deg, transparent 90deg 180deg, var( --lr-color-picker-checker-color, var(--_lr-color-picker-checker-color) ) 180deg 270deg, transparent 270deg 360deg ); background-size: var( --lr-color-picker-checker-size, var(--_lr-color-picker-checker-size) ) var(--lr-color-picker-checker-size, var(--_lr-color-picker-checker-size)); } [part~="grid"], [part~="preview"], [part~="swatch"], [part~="hue-slider"], [part~="opacity-slider"], [part~="slider-handle"], [part~="trigger"]::before, [part~="trigger"]::after { forced-color-adjust: none; } [part="trigger-container"] { display: flex; align-items: center; } [part~="trigger"] { position: relative; min-inline-size: var(--lr-icon-button-size); min-block-size: var(--lr-icon-button-size); inline-size: max( var(--lr-color-picker-swatch-size, var(--_lr-color-picker-swatch-size)), var(--lr-icon-button-size) ); block-size: max( var(--lr-color-picker-swatch-size, var(--_lr-color-picker-swatch-size)), var(--lr-icon-button-size) ); padding: 0; border: var(--lr-border-width-thin) solid transparent; border-radius: var( --lr-color-picker-radius, var(--_lr-color-picker-radius) ); background: transparent; cursor: pointer; transition: border-color var(--lr-transition-fast); } [part~="trigger"]::before { content: ""; position: absolute; inset-inline-start: 50%; inset-block-start: 50%; box-sizing: border-box; inline-size: var( --lr-color-picker-swatch-size, var(--_lr-color-picker-swatch-size) ); block-size: var( --lr-color-picker-swatch-size, var(--_lr-color-picker-swatch-size) ); border: var(--lr-border-width-thin) solid var(--lr-color-picker-border-color, var(--lr-color-border)); border-radius: var( --lr-color-picker-radius, var(--_lr-color-picker-radius) ); background-color: var(--lr-color-surface); background-image: conic-gradient( var( --lr-color-picker-checker-color, var(--_lr-color-picker-checker-color) ) 0deg 90deg, transparent 90deg 180deg, var( --lr-color-picker-checker-color, var(--_lr-color-picker-checker-color) ) 180deg 270deg, transparent 270deg 360deg ); background-size: var( --lr-color-picker-checker-size, var(--_lr-color-picker-checker-size) ) var(--lr-color-picker-checker-size, var(--_lr-color-picker-checker-size)); transform: translate(-50%, -50%); pointer-events: none; transition: border-color var(--lr-transition-fast); } [part~="trigger"]::after { content: ""; position: absolute; inset-inline-start: 50%; inset-block-start: 50%; inline-size: calc( var(--lr-color-picker-swatch-size, var(--_lr-color-picker-swatch-size)) - var(--lr-border-width-thin) - var(--lr-border-width-thin) ); block-size: calc( var(--lr-color-picker-swatch-size, var(--_lr-color-picker-swatch-size)) - var(--lr-border-width-thin) - var(--lr-border-width-thin) ); border-radius: var( --lr-color-picker-radius, var(--_lr-color-picker-radius) ); background-color: var( --lr-color-picker-swatch-color, var(--_lr-color-picker-swatch-color) ); transform: translate(-50%, -50%); pointer-events: none; } :host(:dir(rtl)) [part~="trigger"]::before, :host(:dir(rtl)) [part~="trigger"]::after { transform: translate(50%, -50%); } [part~="preview"]::after, [part~="swatch"]::after { content: ""; display: block; block-size: 100%; inline-size: 100%; border-radius: inherit; background-color: var( --lr-color-picker-swatch-color, var(--_lr-color-picker-swatch-color) ); } [part~="trigger"]:where(:hover), [part~="trigger"]:where(:hover)::before { border-color: var( --lr-color-picker-hover-border-color, var(--lr-color-brand) ); } [part~="trigger"]:where(:active), [part~="trigger"]:where(:active)::before { border-color: color-mix( in oklab, var(--lr-color-picker-hover-border-color, var(--lr-color-brand)), var(--lr-color-mix-partner) var(--lr-color-mix-active) ); } [part~="trigger"]:where(:focus-visible) { outline: var(--lr-focus-ring-width) solid var(--lr-focus-ring-color); outline-offset: var(--lr-focus-ring-offset); } [part~="panel"] { position: absolute; top: 0; left: 0; z-index: var(--lr-overlay-stack-index, var(--lr-layer-popover)); display: flex; flex-direction: column; gap: var(--lr-color-picker-gap, var(--_lr-color-picker-gap)); padding: var(--lr-space-s); ${overlaySurfaceFill} border-radius: var( --lr-color-picker-radius, var(--lr-overlay-radius, var(--_lr-color-picker-radius)) ); box-shadow: var(--lr-overlay-shadow-anchored, var(--lr-shadow-m)); max-inline-size: var(--lr-positioner-available-inline-size, none); } [part~="panel"][hidden] { display: none; } :host([inline]) [part~="panel"] { position: static; inset: auto; box-shadow: none; } .row { display: flex; align-items: center; gap: var(--lr-color-picker-gap, var(--_lr-color-picker-gap)); } .sliders { display: flex; flex: 1 1 auto; flex-direction: column; gap: var(--lr-color-picker-gap, var(--_lr-color-picker-gap)); min-inline-size: 0; } [part~="grid"] { position: relative; inline-size: var( --lr-color-picker-grid-inline-size, var(--_lr-color-picker-grid-inline-size) ); max-inline-size: 100%; block-size: var( --lr-color-picker-grid-block-size, var(--_lr-color-picker-grid-block-size) ); border-radius: var( --lr-color-picker-radius, var(--_lr-color-picker-radius) ); cursor: crosshair; touch-action: none; background-color: var( --lr-color-picker-grid-hue, var(--_lr-color-picker-grid-hue) ); background-image: linear-gradient(to bottom, transparent, hsl(0 0% 0%)), linear-gradient(to right, hsl(0 0% 100%), transparent); } :host(:dir(rtl)) [part~="grid"] { background-image: linear-gradient(to bottom, transparent, hsl(0 0% 0%)), linear-gradient(to left, hsl(0 0% 100%), transparent); } [part~="grid-handle"] { position: absolute; inline-size: var( --lr-color-picker-grid-handle-size, var(--_lr-color-picker-grid-handle-size) ); block-size: var( --lr-color-picker-grid-handle-size, var(--_lr-color-picker-grid-handle-size) ); border: var(--lr-border-width-medium) solid var(--lr-color-surface); border-radius: 50%; box-shadow: var(--lr-shadow-s); transform: translate(-50%, -50%); cursor: grab; transition: border-color var(--lr-transition-fast); } :host(:dir(rtl)) [part~="grid-handle"] { transform: translate(50%, -50%); } [part~="slider"] { position: relative; block-size: var(--lr-size-1-5rem); cursor: pointer; touch-action: pan-y; } [part~="slider"]::before { content: ""; position: absolute; inset-inline: 0; inset-block-start: 50%; block-size: var( --lr-color-picker-slider-block-size, var(--_lr-color-picker-slider-block-size) ); border-radius: var(--lr-radius-pill); transform: translateY(-50%); } [part~="slider"]:where(:hover)::before { box-shadow: 0 0 0 var(--lr-border-width-thin) var(--lr-color-picker-hover-border-color, var(--lr-color-brand)); } [part~="slider"]:where(:hover) { outline: var(--lr-border-width-thin) solid var(--lr-color-picker-hover-border-color, var(--lr-color-brand)); } [part~="slider"]:where(:active)::before { box-shadow: 0 0 0 var(--lr-border-width-medium) color-mix( in oklab, var(--lr-color-picker-hover-border-color, var(--lr-color-brand)), var(--lr-color-mix-partner) var(--lr-color-mix-active) ); } [part~="slider"]:where(:active) { outline: var(--lr-border-width-medium) solid color-mix( in oklab, var(--lr-color-picker-hover-border-color, var(--lr-color-brand)), var(--lr-color-mix-partner) var(--lr-color-mix-active) ); } [part~="hue-slider"]::before { background-image: linear-gradient( to right, var(--lr-color-picker-hue-stops, var(--_lr-color-picker-hue-stops)) ); } :host(:dir(rtl)) [part~="hue-slider"]::before { background-image: linear-gradient( to left, var(--lr-color-picker-hue-stops, var(--_lr-color-picker-hue-stops)) ); } [part~="opacity-slider"]::before { background-image: var( --lr-color-picker-opacity-gradient, var(--_lr-color-picker-opacity-gradient) ), conic-gradient( var( --lr-color-picker-checker-color, var(--_lr-color-picker-checker-color) ) 0deg 90deg, transparent 90deg 180deg, var( --lr-color-picker-checker-color, var(--_lr-color-picker-checker-color) ) 180deg 270deg, transparent 270deg 360deg ); background-size: auto, var(--lr-color-picker-checker-size, var(--_lr-color-picker-checker-size)) var( --lr-color-picker-checker-size, var(--_lr-color-picker-checker-size) ); background-color: var(--lr-color-surface); } [part~="slider-handle"] { position: absolute; inset-block-start: 50%; inline-size: var( --lr-color-picker-slider-handle-size, var(--_lr-color-picker-slider-handle-size) ); block-size: var( --lr-color-picker-slider-handle-size, var(--_lr-color-picker-slider-handle-size) ); border: var(--lr-border-width-medium) solid var(--lr-color-surface); border-radius: 50%; box-shadow: var(--lr-shadow-s); background-color: var( --lr-color-picker-swatch-color, var(--_lr-color-picker-swatch-color) ); transform: translate(-50%, -50%); cursor: grab; transition: border-color var(--lr-transition-fast); } :host(:dir(rtl)) [part~="slider-handle"] { transform: translate(50%, -50%); } [part~="grid-handle"]:where(:hover), [part~="slider-handle"]:where(:hover) { border-color: var( --lr-color-picker-hover-border-color, var(--lr-color-brand) ); } [part~="grid-handle"]:where(:active), [part~="slider-handle"]:where(:active) { border-color: color-mix( in oklab, var(--lr-color-picker-hover-border-color, var(--lr-color-brand)), var(--lr-color-mix-partner) var(--lr-color-mix-active) ); cursor: grabbing; } [part~="grid-handle"]:where(:focus-visible), [part~="slider-handle"]:where(:focus-visible) { outline: var(--lr-focus-ring-width) solid var(--lr-focus-ring-color); outline-offset: var(--lr-focus-ring-offset); } [part~="preview"] { flex: 0 0 auto; inline-size: var( --lr-color-picker-palette-swatch-size, var(--_lr-color-picker-palette-swatch-size) ); block-size: var( --lr-color-picker-palette-swatch-size, var(--_lr-color-picker-palette-swatch-size) ); border: var(--lr-border-width-thin) solid var(--lr-color-border); border-radius: 50%; } [part~="input"] { flex: 1 1 auto; min-inline-size: 0; padding: var(--lr-space-2xs) var(--lr-space-xs); border: var(--lr-border-width-thin) solid var(--lr-color-border); border-radius: var( --lr-color-picker-radius, var(--_lr-color-picker-radius) ); background: var(--lr-color-surface); color: var(--lr-color-text); font-family: var(--lr-font-mono); font-size: var(--lr-font-size-sm); transition: border-color var(--lr-transition-fast); } [part~="input"]:where(:hover) { border-color: var( --lr-color-picker-hover-border-color, var(--lr-color-brand) ); } [part~="input"]:where(:focus-visible) { outline: var(--lr-focus-ring-width) solid var(--lr-focus-ring-color); outline-offset: var(--lr-focus-ring-offset); } [part~="format-button"], [part~="eyedropper-button"] { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; min-inline-size: var(--lr-icon-button-size); min-block-size: var(--lr-icon-button-size); padding: var(--lr-space-2xs); border: var(--lr-border-width-thin) solid var(--lr-color-border); border-radius: var( --lr-color-picker-radius, var(--_lr-color-picker-radius) ); background: var(--lr-color-surface); color: var(--lr-color-text); font-size: var(--lr-font-size-xs); cursor: pointer; transition: background-color var(--lr-transition-fast), border-color var(--lr-transition-fast); } [part~="format-button"]:where(:hover), [part~="eyedropper-button"]:where(:hover) { border-color: var( --lr-color-picker-hover-border-color, var(--lr-color-brand) ); } [part~="format-button"]:where(:active), [part~="eyedropper-button"]:where(:active) { border-color: color-mix( in oklab, var(--lr-color-picker-hover-border-color, var(--lr-color-brand)), var(--lr-color-mix-partner) var(--lr-color-mix-active) ); background: color-mix( in oklab, var(--lr-color-surface), var(--lr-color-mix-partner) var(--lr-color-mix-active) ); } [part~="format-button"]:where(:focus-visible), [part~="eyedropper-button"]:where(:focus-visible) { outline: var(--lr-focus-ring-width) solid var(--lr-focus-ring-color); outline-offset: var(--lr-focus-ring-offset); } [part~="swatches"] { display: flex; flex-wrap: wrap; gap: var(--lr-color-picker-gap, var(--_lr-color-picker-gap)); max-inline-size: var( --lr-color-picker-grid-inline-size, var(--_lr-color-picker-grid-inline-size) ); } [part~="swatch"] { position: relative; inline-size: var( --lr-color-picker-palette-swatch-size, var(--_lr-color-picker-palette-swatch-size) ); block-size: var( --lr-color-picker-palette-swatch-size, var(--_lr-color-picker-palette-swatch-size) ); padding: 0; border: var(--lr-border-width-thin) solid var(--lr-color-border); border-radius: 50%; cursor: pointer; transition: border-color var(--lr-transition-fast); } [part~="swatch"]:where(:hover) { border-color: var( --lr-color-picker-hover-border-color, var(--lr-color-brand) ); } [part~="swatch"]:where(:active) { border-color: color-mix( in oklab, var(--lr-color-picker-hover-border-color, var(--lr-color-brand)), var(--lr-color-mix-partner) var(--lr-color-mix-active) ); } [part~="swatch"]:where(:focus-visible) { outline: var(--lr-focus-ring-width) solid var(--lr-focus-ring-color); outline-offset: var(--lr-focus-ring-offset); } [part~="swatch-selected"] { border-color: var(--lr-color-picker-selected-border, var(--lr-color-brand)); border-width: var(--lr-border-width-medium); } [part~="swatch-selected"]::before { content: "✓"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--lr-color-picker-selected-check-color, var(--lr-color-surface)); font-size: var(--lr-font-size-xs); text-shadow: 0 0 var(--lr-size-2px) var(--lr-color-shadow); z-index: var(--lr-layer-content); } :host(:disabled) { opacity: var(--lr-opacity-disabled); cursor: not-allowed; } :host(:disabled) [part~="trigger"], :host(:disabled) [part~="grid"], :host(:disabled) [part~="grid-handle"], :host(:disabled) [part~="slider"], :host(:disabled) [part~="slider-handle"], :host(:disabled) [part~="input"], :host(:disabled) [part~="swatch"], :host(:disabled) [part~="format-button"], :host(:disabled) [part~="eyedropper-button"] { cursor: not-allowed; } [part="hint"] { color: var(--lr-color-text-quiet); font-size: var(--lr-font-size-sm); } [part="hint"][hidden] { display: none; } [part="error"] { color: var(--lr-color-danger); font-size: var(--lr-font-size-sm); } [part="error"][hidden] { display: none; } [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";import{overlaySurfaceFill}from"../../../internal/overlay-surface.styles.js";const styles=css` :host { display: inline-block; --_lr-color-picker-swatch-size: var( --lr-form-control-height, var(--lr-size-2-5rem) ); --_lr-color-picker-gap: var(--lr-space-xs); --_lr-color-picker-radius: var(--lr-radius); --_lr-color-picker-grid-inline-size: var( --grid-width, var(--lr-size-15rem) ); --_lr-color-picker-grid-block-size: var(--grid-height, var(--lr-size-8rem)); --_lr-color-picker-grid-handle-size: var( --grid-handle-size, var(--lr-size-1rem) ); --_lr-color-picker-slider-block-size: var( --slider-height, var(--lr-size-0-75rem) ); --_lr-color-picker-slider-handle-size: var( --slider-handle-size, var(--lr-size-1-25rem) ); --_lr-color-picker-palette-swatch-size: var( --swatch-size, var(--lr-size-1-5rem) ); --_lr-color-picker-checker-color: var(--lr-color-border); --_lr-color-picker-checker-size: var(--lr-size-0-5rem); --_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%); --_lr-color-picker-swatch-color: transparent; --_lr-color-picker-grid-hue: transparent; --_lr-color-picker-opacity-gradient: none; } [part~="form-control"] { display: inline-flex; position: relative; flex-direction: column; gap: var(--lr-color-picker-gap, var(--_lr-color-picker-gap)); } [part~="label"] { color: var(--lr-color-text); font-size: var(--lr-font-size-md-sm); } [part~="label"][hidden] { display: none; } ${formControlRequiredMarker} [part~='preview'], [part~='swatch'] { background-color: var(--lr-color-surface); background-image: conic-gradient( var( --lr-color-picker-checker-color, var(--_lr-color-picker-checker-color) ) 0deg 90deg, transparent 90deg 180deg, var( --lr-color-picker-checker-color, var(--_lr-color-picker-checker-color) ) 180deg 270deg, transparent 270deg 360deg ); background-size: var( --lr-color-picker-checker-size, var(--_lr-color-picker-checker-size) ) var(--lr-color-picker-checker-size, var(--_lr-color-picker-checker-size)); } [part~="grid"], [part~="preview"], [part~="swatch"], [part~="hue-slider"], [part~="opacity-slider"], [part~="slider-handle"], [part~="trigger"]::before, [part~="trigger"]::after { forced-color-adjust: none; } [part="trigger-container"] { display: flex; align-items: center; } [part~="trigger"] { position: relative; min-inline-size: var(--lr-icon-button-size); min-block-size: var(--lr-icon-button-size); inline-size: max( var(--lr-color-picker-swatch-size, var(--_lr-color-picker-swatch-size)), var(--lr-icon-button-size) ); block-size: max( var(--lr-color-picker-swatch-size, var(--_lr-color-picker-swatch-size)), var(--lr-icon-button-size) ); padding: 0; border: var(--lr-border-width-thin) solid transparent; border-radius: var( --lr-color-picker-radius, var(--_lr-color-picker-radius) ); background: transparent; cursor: pointer; transition: border-color var(--lr-transition-fast); } [part~="trigger"]::before { content: ""; position: absolute; inset-inline-start: 50%; inset-block-start: 50%; box-sizing: border-box; inline-size: var( --lr-color-picker-swatch-size, var(--_lr-color-picker-swatch-size) ); block-size: var( --lr-color-picker-swatch-size, var(--_lr-color-picker-swatch-size) ); border: var(--lr-border-width-thin) solid var(--lr-color-picker-border-color, var(--lr-color-border)); border-radius: var( --lr-color-picker-radius, var(--_lr-color-picker-radius) ); background-color: var(--lr-color-surface); background-image: conic-gradient( var( --lr-color-picker-checker-color, var(--_lr-color-picker-checker-color) ) 0deg 90deg, transparent 90deg 180deg, var( --lr-color-picker-checker-color, var(--_lr-color-picker-checker-color) ) 180deg 270deg, transparent 270deg 360deg ); background-size: var( --lr-color-picker-checker-size, var(--_lr-color-picker-checker-size) ) var(--lr-color-picker-checker-size, var(--_lr-color-picker-checker-size)); transform: translate(-50%, -50%); pointer-events: none; transition: border-color var(--lr-transition-fast); } [part~="trigger"]::after { content: ""; position: absolute; inset-inline-start: 50%; inset-block-start: 50%; inline-size: calc( var(--lr-color-picker-swatch-size, var(--_lr-color-picker-swatch-size)) - var(--lr-border-width-thin) - var(--lr-border-width-thin) ); block-size: calc( var(--lr-color-picker-swatch-size, var(--_lr-color-picker-swatch-size)) - var(--lr-border-width-thin) - var(--lr-border-width-thin) ); border-radius: var( --lr-color-picker-radius, var(--_lr-color-picker-radius) ); background-color: var( --lr-color-picker-swatch-color, var(--_lr-color-picker-swatch-color) ); transform: translate(-50%, -50%); pointer-events: none; } :host(:dir(rtl)) [part~="trigger"]::before, :host(:dir(rtl)) [part~="trigger"]::after { transform: translate(50%, -50%); } [part~="preview"]::after, [part~="swatch"]::after { content: ""; display: block; block-size: 100%; inline-size: 100%; border-radius: inherit; background-color: var( --lr-color-picker-swatch-color, var(--_lr-color-picker-swatch-color) ); } [part~="trigger"]:where(:hover), [part~="trigger"]:where(:hover)::before { border-color: var( --lr-color-picker-hover-border-color, var(--lr-color-brand) ); } [part~="trigger"]:where(:active), [part~="trigger"]:where(:active)::before { border-color: color-mix( in oklab, var(--lr-color-picker-hover-border-color, var(--lr-color-brand)), var(--lr-color-mix-partner) var(--lr-color-mix-active) ); } [part~="trigger"]:where(:focus-visible) { outline: var(--lr-focus-ring-width) solid var(--lr-focus-ring-color); outline-offset: var(--lr-focus-ring-offset); } [part~="panel"] { position: absolute; top: 0; left: 0; z-index: var(--lr-overlay-stack-index, var(--lr-layer-popover)); display: flex; flex-direction: column; gap: var(--lr-color-picker-gap, var(--_lr-color-picker-gap)); padding: var(--lr-space-s); ${overlaySurfaceFill} border-radius: var( --lr-color-picker-radius, var(--lr-overlay-radius, var(--_lr-color-picker-radius)) ); box-shadow: var(--lr-overlay-shadow-anchored, var(--lr-shadow-m)); max-inline-size: var(--lr-positioner-available-inline-size, none); } [part~="panel"][hidden] { display: none; } :host([inline]) [part~="panel"] { position: static; inset: auto; box-shadow: none; } .row { display: flex; align-items: center; gap: var(--lr-color-picker-gap, var(--_lr-color-picker-gap)); } .sliders { display: flex; flex: 1 1 auto; flex-direction: column; gap: var(--lr-color-picker-gap, var(--_lr-color-picker-gap)); min-inline-size: 0; } [part~="grid"] { position: relative; inline-size: var( --lr-color-picker-grid-inline-size, var(--_lr-color-picker-grid-inline-size) ); max-inline-size: 100%; block-size: var( --lr-color-picker-grid-block-size, var(--_lr-color-picker-grid-block-size) ); border-radius: var( --lr-color-picker-radius, var(--_lr-color-picker-radius) ); cursor: crosshair; touch-action: none; background-color: var( --lr-color-picker-grid-hue, var(--_lr-color-picker-grid-hue) ); background-image: linear-gradient(to bottom, transparent, hsl(0 0% 0%)), linear-gradient(to right, hsl(0 0% 100%), transparent); } :host(:dir(rtl)) [part~="grid"] { background-image: linear-gradient(to bottom, transparent, hsl(0 0% 0%)), linear-gradient(to left, hsl(0 0% 100%), transparent); } [part~="grid-handle"] { position: absolute; inline-size: var( --lr-color-picker-grid-handle-size, var(--_lr-color-picker-grid-handle-size) ); block-size: var( --lr-color-picker-grid-handle-size, var(--_lr-color-picker-grid-handle-size) ); border: var(--lr-border-width-medium) solid var(--lr-color-surface); border-radius: 50%; box-shadow: var(--lr-shadow-s); transform: translate(-50%, -50%); cursor: grab; transition: border-color var(--lr-transition-fast); } :host(:dir(rtl)) [part~="grid-handle"] { transform: translate(50%, -50%); } [part~="slider"] { position: relative; block-size: var(--lr-size-1-5rem); cursor: pointer; touch-action: pan-y; } [part~="slider"]::before { content: ""; position: absolute; inset-inline: 0; inset-block-start: 50%; block-size: var( --lr-color-picker-slider-block-size, var(--_lr-color-picker-slider-block-size) ); border-radius: var(--lr-radius-pill); transform: translateY(-50%); } [part~="slider"]:where(:hover)::before { box-shadow: 0 0 0 var(--lr-border-width-thin) var(--lr-color-picker-hover-border-color, var(--lr-color-brand)); } [part~="slider"]:where(:hover) { outline: var(--lr-border-width-thin) solid var(--lr-color-picker-hover-border-color, var(--lr-color-brand)); } [part~="slider"]:where(:active)::before { box-shadow: 0 0 0 var(--lr-border-width-medium) color-mix( in oklab, var(--lr-color-picker-hover-border-color, var(--lr-color-brand)), var(--lr-color-mix-partner) var(--lr-color-mix-active) ); } [part~="slider"]:where(:active) { outline: var(--lr-border-width-medium) solid color-mix( in oklab, var(--lr-color-picker-hover-border-color, var(--lr-color-brand)), var(--lr-color-mix-partner) var(--lr-color-mix-active) ); } [part~="hue-slider"]::before { background-image: linear-gradient( to right, var(--lr-color-picker-hue-stops, var(--_lr-color-picker-hue-stops)) ); } :host(:dir(rtl)) [part~="hue-slider"]::before { background-image: linear-gradient( to left, var(--lr-color-picker-hue-stops, var(--_lr-color-picker-hue-stops)) ); } [part~="opacity-slider"]::before { background-image: var( --lr-color-picker-opacity-gradient, var(--_lr-color-picker-opacity-gradient) ), conic-gradient( var( --lr-color-picker-checker-color, var(--_lr-color-picker-checker-color) ) 0deg 90deg, transparent 90deg 180deg, var( --lr-color-picker-checker-color, var(--_lr-color-picker-checker-color) ) 180deg 270deg, transparent 270deg 360deg ); background-size: auto, var(--lr-color-picker-checker-size, var(--_lr-color-picker-checker-size)) var( --lr-color-picker-checker-size, var(--_lr-color-picker-checker-size) ); background-color: var(--lr-color-surface); } [part~="slider-handle"] { position: absolute; inset-block-start: 50%; inline-size: var( --lr-color-picker-slider-handle-size, var(--_lr-color-picker-slider-handle-size) ); block-size: var( --lr-color-picker-slider-handle-size, var(--_lr-color-picker-slider-handle-size) ); border: var(--lr-border-width-medium) solid var(--lr-color-surface); border-radius: 50%; box-shadow: var(--lr-shadow-s); background-color: var( --lr-color-picker-swatch-color, var(--_lr-color-picker-swatch-color) ); transform: translate(-50%, -50%); cursor: grab; transition: border-color var(--lr-transition-fast); } :host(:dir(rtl)) [part~="slider-handle"] { transform: translate(50%, -50%); } [part~="grid-handle"]:where(:hover), [part~="slider-handle"]:where(:hover) { border-color: var( --lr-color-picker-hover-border-color, var(--lr-color-brand) ); } [part~="grid-handle"]:where(:active), [part~="slider-handle"]:where(:active) { border-color: color-mix( in oklab, var(--lr-color-picker-hover-border-color, var(--lr-color-brand)), var(--lr-color-mix-partner) var(--lr-color-mix-active) ); cursor: grabbing; } [part~="grid-handle"]:where(:focus-visible), [part~="slider-handle"]:where(:focus-visible) { outline: var(--lr-focus-ring-width) solid var(--lr-focus-ring-color); outline-offset: var(--lr-focus-ring-offset); } [part~="preview"] { flex: 0 0 auto; inline-size: var( --lr-color-picker-palette-swatch-size, var(--_lr-color-picker-palette-swatch-size) ); block-size: var( --lr-color-picker-palette-swatch-size, var(--_lr-color-picker-palette-swatch-size) ); border: var(--lr-border-width-thin) solid var(--lr-color-border); border-radius: 50%; } [part~="input"] { flex: 1 1 auto; min-inline-size: 0; padding: var(--lr-space-2xs) var(--lr-space-xs); border: var(--lr-border-width-thin) solid var(--lr-color-border); border-radius: var( --lr-color-picker-radius, var(--_lr-color-picker-radius) ); background: var(--lr-color-surface); color: var(--lr-color-text); font-family: var(--lr-font-mono); font-size: var(--lr-font-size-sm); transition: border-color var(--lr-transition-fast); } [part~="input"]:where(:hover) { border-color: var( --lr-color-picker-hover-border-color, var(--lr-color-brand) ); } [part~="input"]:where(:focus-visible) { outline: var(--lr-focus-ring-width) solid var(--lr-focus-ring-color); outline-offset: var(--lr-focus-ring-offset); } [part~="format-button"], [part~="eyedropper-button"] { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; min-inline-size: var(--lr-icon-button-size); min-block-size: var(--lr-icon-button-size); padding: var(--lr-space-2xs); border: var(--lr-border-width-thin) solid var(--lr-color-border); border-radius: var( --lr-color-picker-radius, var(--_lr-color-picker-radius) ); background: var(--lr-color-surface); color: var(--lr-color-text); font-size: var(--lr-font-size-xs); cursor: pointer; transition: background-color var(--lr-transition-fast), border-color var(--lr-transition-fast); } [part~="format-button"]:where(:hover), [part~="eyedropper-button"]:where(:hover) { border-color: var( --lr-color-picker-hover-border-color, var(--lr-color-brand) ); } [part~="format-button"]:where(:active), [part~="eyedropper-button"]:where(:active) { border-color: color-mix( in oklab, var(--lr-color-picker-hover-border-color, var(--lr-color-brand)), var(--lr-color-mix-partner) var(--lr-color-mix-active) ); background: color-mix( in oklab, var(--lr-color-surface), var(--lr-color-mix-partner) var(--lr-color-mix-active) ); } [part~="format-button"]:where(:focus-visible), [part~="eyedropper-button"]:where(:focus-visible) { outline: var(--lr-focus-ring-width) solid var(--lr-focus-ring-color); outline-offset: var(--lr-focus-ring-offset); } [part~="swatches"] { display: flex; flex-wrap: wrap; gap: var(--lr-color-picker-gap, var(--_lr-color-picker-gap)); max-inline-size: var( --lr-color-picker-grid-inline-size, var(--_lr-color-picker-grid-inline-size) ); } [part~="swatch"] { position: relative; inline-size: var( --lr-color-picker-palette-swatch-size, var(--_lr-color-picker-palette-swatch-size) ); block-size: var( --lr-color-picker-palette-swatch-size, var(--_lr-color-picker-palette-swatch-size) ); padding: 0; border: var(--lr-border-width-thin) solid var(--lr-color-border); border-radius: 50%; cursor: pointer; transition: border-color var(--lr-transition-fast); } [part~="swatch"]:where(:not(:disabled)):where(:hover) { border-color: var( --lr-color-picker-hover-border-color, var(--lr-color-brand) ); } [part~="swatch"]:where(:not(:disabled)):where(:active) { border-color: color-mix( in oklab, var(--lr-color-picker-hover-border-color, var(--lr-color-brand)), var(--lr-color-mix-partner) var(--lr-color-mix-active) ); } [part~="swatch"]:where(:focus-visible) { outline: var(--lr-focus-ring-width) solid var(--lr-focus-ring-color); outline-offset: var(--lr-focus-ring-offset); } [part~="swatch"]:disabled { cursor: not-allowed; opacity: var(--lr-color-picker-swatch-disabled-opacity, 0.5); } [part~="swatch-selected"] { border-color: var(--lr-color-picker-selected-border, var(--lr-color-brand)); border-width: var(--lr-border-width-medium); } [part~="swatch-selected"]::before { content: "✓"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--lr-color-picker-selected-check-color, var(--lr-color-surface)); font-size: var(--lr-font-size-xs); text-shadow: 0 0 var(--lr-size-2px) var(--lr-color-shadow); z-index: var(--lr-layer-content); } :host(:disabled) { opacity: var(--lr-opacity-disabled); cursor: not-allowed; } :host(:disabled) [part~="trigger"], :host(:disabled) [part~="grid"], :host(:disabled) [part~="grid-handle"], :host(:disabled) [part~="slider"], :host(:disabled) [part~="slider-handle"], :host(:disabled) [part~="input"], :host(:disabled) [part~="swatch"], :host(:disabled) [part~="format-button"], :host(:disabled) [part~="eyedropper-button"] { cursor: not-allowed; } [part="hint"] { color: var(--lr-color-text-quiet); font-size: var(--lr-font-size-sm); } [part="hint"][hidden] { display: none; } [part="error"] { color: var(--lr-color-danger); font-size: var(--lr-font-size-sm); } [part="error"][hidden] { display: none; } [part~="form-control"], [part~="form-control-label"], [part="hint"], [part="error"] { min-inline-size: 0; max-inline-size: 100%; overflow-wrap: anywhere; } `;export{styles};