@aceshooting/lyra-ui 26.0.0 → 28.0.0

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

@@ -1,4 +1,4 @@
-import{type TemplateResult,type PropertyValues}from'lit';import{LyraElement}from'../../../internal/lyra-element.js';import type{LyraSize}from'../../../internal/variants.js';import{type FormOwnerValue}from'../../../internal/form-associated.js';import{type LyraFormValidator}from'../form-validator.js';export interface LyraSwitchEventMap{input:Event;change:Event;'lr-input':CustomEvent<{checked:boolean;value:string;}>;'lr-change':CustomEvent<{checked:boolean;value:string;}>;focus:FocusEvent;blur:FocusEvent;'lr-invalid':CustomEvent<null>;'lr-switch-toggle-request':CustomEvent<{checked:boolean;value:string;}>;}
+import{type TemplateResult,type PropertyValues}from'lit';import{LyraElement}from'../../../internal/lyra-element.js';import type{LyraSize}from'../../../internal/variants.js';import{type LyraFormValidator}from'../form-validator.js';export interface LyraSwitchEventMap{input:Event;change:Event;'lr-input':CustomEvent<{checked:boolean;value:string;}>;'lr-change':CustomEvent<{checked:boolean;value:string;}>;focus:FocusEvent;blur:FocusEvent;'lr-invalid':CustomEvent<null>;'lr-switch-toggle-request':CustomEvent<{checked:boolean;value:string;}>;}declare class LyraSwitchBase extends LyraElement<LyraSwitchEventMap>{}declare const LyraSwitch_base:typeof LyraSwitchBase&(new(...args:any[])=>import("../../../lyra.js").FormAssociatedInterface<string> &import("../../../internal/form-associated.js").FormAssociatedSubclassInterface<string> &import("../../../lyra.js").CheckedFormAssociatedInterface&import("../../../internal/form-associated.js").CheckedFormAssociatedSubclassInterface);
 /**
 * `<lr-switch>` — a boolean toggle-switch form control. Structurally the
 * same idea as a checkbox (form-associated via `ElementInternals`, click and
@@ -6,11 +6,9 @@ import{type TemplateResult,type PropertyValues}from'lit';import{LyraElement}from
 * `aria-checked` read to assistive tech as an on/off state rather than a
 * checked/unchecked one, and there is no indeterminate state.
 *
-* `checked` is not a plain string, so this attaches `ElementInternals`
-* directly and implements its own `updateValidity()` rather than using the
-* `FormAssociated` mixin (that mixin's `value` accessor assumes a string —
-* see `<lr-combobox>` for the same direct-`ElementInternals` shape with a
-* non-string value).
+* Form association, dirty/default `checked` tracking, reset, state restore and the validity
+* states come from the shared `CheckedFormAssociated` mixin, the same one `<lr-checkbox>` and
+* `<lr-radio>` use; this class adds only the switch's own toggle veto and rendering.
 *
 * Ships an opt-in `hint`/`errorText` form-control chrome (props + matching named slots +
 * `hint`/`error` CSS parts), mirroring `<lr-select>`'s pattern for those two pieces -- left
@@ -134,9 +132,9 @@ import{type TemplateResult,type PropertyValues}from'lit';import{LyraElement}from
 * @status stable
 * @since 4.0.0
 */
-export declare class LyraSwitch extends LyraElement<LyraSwitchEventMap>{
+export declare class LyraSwitch extends LyraSwitch_base{
 /** Public WA-compatible intrinsic validator catalog. */
-static get validators():LyraFormValidator<LyraSwitch>[];static styles:import("lit").CSSResultGroup[];static formAssociated:boolean;static properties:{customError:{attribute:string;reflect:boolean;noAccessor:boolean;};checked:{attribute:boolean;noAccessor:boolean;};defaultChecked:{attribute:string;type:BooleanConstructor;reflect:boolean;useDefault:boolean;noAccessor:boolean;};disabled:{type:BooleanConstructor;reflect:boolean;noAccessor:boolean;};name:{reflect:boolean;noAccessor:boolean;converter:import("lit").ComplexAttributeConverter<string,unknown>;};required:{type:BooleanConstructor;reflect:boolean;noAccessor:boolean;};size:{reflect:boolean;};value:{reflect:boolean;noAccessor:boolean;};};
+static get validators():LyraFormValidator<LyraSwitch>[];static styles:import("lit").CSSResultGroup[];static properties:{size:{reflect:boolean;};};
 /**
 * Control size, on the library's shared ladder. Accepts both spellings of every tier —
 * `2xs`/`xs`/`s`/`m`/`l`/`xl` and Web Awesome's `small`/`medium`/`large` — so migrating either way
@@ -154,15 +152,10 @@ helpText:string;
 withHint:boolean;
 /** Error text below the switch (overridden by slotted `error` content). Unset: no error chrome
 *  renders. */
-errorText:string;private hasLabelSlot;private readonly slotPresence;private get hasHintSlot();private get hasHelpTextSlot();private get hasErrorSlot();private readonly labelTextObserver;private hasInteracted;private internals;private validityController;
-/** Consumer-supplied validation message reflected through `custom-error`. */
-customError:string|null;private _defaultChecked;private _checkedDirty;private settingDefaultChecked;private reflectingDefaultChecked;private _fieldsetDisabled;private _name;private _checked;private _disabled;private _required;private _value;private toggleGuard;
-/** Whether the control is disabled explicitly or by an ancestor fieldset. */
-get effectiveDisabled():boolean;get checked():boolean;set checked(next:boolean);
-/** Reflected current reset default; changing it never overwrites dirty live `checked` state. */
-get defaultChecked():boolean;set defaultChecked(next:boolean);get disabled():boolean;set disabled(next:boolean);
-/** The form submission key, reflected synchronously for native form APIs. */
-get name():string;set name(next:string|null);get required():boolean;set required(next:boolean);get value():string;set value(next:string|null);constructor();get form():HTMLFormElement|null;set form(owner:FormOwnerValue);getForm():HTMLFormElement|null;get labels():NodeList;get validity():ValidityState;get validationMessage():string;get willValidate():boolean;private get liveDisabled();
+errorText:string;private hasLabelSlot;private readonly slotPresence;private get hasHintSlot();private get hasHelpTextSlot();private get hasErrorSlot();private readonly labelTextObserver;private toggleGuard;
+/** Unconditional, including a write of the value already held: the guard tracks that a write
+*  happened, not that a value differs. See {@link toggleGuard}. */
+protected checkedWritten(previous:boolean):void;protected requiredMessage():string;private get liveDisabled();
 /** Activates the internal switch control, toggling it the same as a real click -- mirrors
 *  `<lr-checkbox>`'s identical `override click()`. Without this, `HTMLElement.prototype.click()`
 *  on the host is a no-op: the real click handler is bound only to the internal
@@ -171,22 +164,4 @@ click():void;
 /** Moves focus to the internal switch control. */
 focus(options?:FocusOptions):void;
 /** Removes focus from the internal switch control. */
-blur():void;private externalDescriptionLease?;private syncExternalDescription;protected updated(changed:PropertyValues):void;private releaseExternalDescription;connectedCallback():void;adoptedCallback():void;disconnectedCallback():void;protected willUpdate(changed:PropertyValues):void;private get barredFromValidation();private updateValidity;private reflectValidityStates;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 ("notifications are disabled for your plan") that no client-side constraint can
-* express. A non-empty `message` raises `customError` and becomes `validationMessage`, so the
-* control fails `checkValidity()`, blocks form submission, and matches `:state(invalid)`; `''`
-* clears it.
-*
-* Clearing restores the control's own computed validity rather than forcing it valid: a
-* required-and-unchecked switch whose custom error is cleared stays `valueMissing`. The custom
-* error also survives every intrinsic recomputation in between (each toggle re-runs
-* `updateValidity()`) and a form reset, exactly like a native control — only another
-* `setCustomValidity('')` clears it.
-*
-* The message is caller-supplied content, so it is used verbatim and never localized here.
-*/
-setCustomValidity(message:string):void;
-/** Clears consumer-supplied validity and restores the current required/checked constraint. */
-resetValidity():void;private setFromUser;private onClick;private onBlur;private onFocus;private onKeyDown;private isDefaultLabelNode;private labelForwardingSlots;private recomputeHasLabelSlot;private handleLabelSlotChange;private onLabelSlotChange;private onSlotChange;render():TemplateResult;}declare global{interface HTMLElementTagNameMap{'lr-switch':LyraSwitch;}}
+blur():void;private externalDescriptionLease?;private syncExternalDescription;protected updated(changed:PropertyValues):void;private releaseExternalDescription;connectedCallback():void;adoptedCallback():void;disconnectedCallback():void;protected willUpdate(changed:PropertyValues):void;private setFromUser;private onClick;private onBlur;private onFocus;private onKeyDown;private isDefaultLabelNode;private labelForwardingSlots;private recomputeHasLabelSlot;private handleLabelSlotChange;private onLabelSlotChange;private onSlotChange;render():TemplateResult;}declare global{interface HTMLElementTagNameMap{'lr-switch':LyraSwitch;}}export{};

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

@@ -1,4 +1,4 @@
-import{__decorate}from"tslib";import{SlotPresenceController}from"../../../internal/slot-presence-controller.js";import{installFormControlLabelSupport}from"../../../internal/form-control-labels.js";import{FormControlController,reflectFormName}from"../../../internal/form-control-controller.js";import{acquireResolvedAriaRelationship}from"../../../internal/aria-controls.js";import{html,nothing}from"lit";import{property,state}from"lit/decorators.js";import{LyraElement}from"../../../internal/lyra-element.js";import{AccessibleTextController}from"../../../internal/accessible-text-controller.js";import{VALIDITY_ANCHOR}from"../../../internal/anchored-validity.js";import{setCustomState,syncValidityStates}from"../../../internal/custom-states.js";import{sizes}from"../../../internal/sizes.styles.js";import{styles}from"./switch.styles.js";import{dispatchNativeEvent,relayNativeEvent}from"../../../internal/native-event-relay.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{getFormOwner,isBarredFromValidation,setFormOwner}from"../../../internal/form-associated.js";import{currentValidityValidator}from"../form-validator.js";import{LYRA_DEFAULT_fieldRequired,LYRA_DEFAULT_switchRequired}from"../../../internal/default-strings.generated.js";installFormControlLabelSupport();class LyraSwitch extends LyraElement{static{this.defaultStrings={...super.defaultStrings,fieldRequired:LYRA_DEFAULT_fieldRequired,switchRequired:LYRA_DEFAULT_switchRequired}}static get validators(){return[currentValidityValidator("required","disabled","checked","value")]}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},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 hasHintSlot(){return this.slotPresence.has("hint")}get hasHelpTextSlot(){return this.slotPresence.has("help-text")}get hasErrorSlot(){return this.slotPresence.has("error")}get effectiveDisabled(){return this.disabled||this._fieldsetDisabled}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.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 disabled(){return this._disabled}set disabled(next){const old=this._disabled;this._disabled=!!next,this.toggleAttribute("disabled",this._disabled),this._fieldsetDisabled=this.validityController?.fieldsetDisabled(this._fieldsetDisabled)??this._fieldsetDisabled,this.updateValidity(),this.requestUpdate("disabled",old)}get name(){return this._name}set name(next){const old=this._name;this._name=next??"",reflectFormName(this,this._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.requestUpdate("value",old,{reflect:!1})}constructor(){super(),this.size="m",this.hint="",this.helpText="",this.withHint=!1,this.errorText="",this.hasLabelSlot=!1,this.slotPresence=new SlotPresenceController(this),this.labelTextObserver=new AccessibleTextController(this,[""],()=>this.recomputeHasLabelSlot(),["slot"]),this.hasInteracted=!1,this._defaultChecked=!1,this._checkedDirty=!1,this.settingDefaultChecked=!1,this.reflectingDefaultChecked=!1,this._fieldsetDisabled=!1,this._name="",this._checked=!1,this._disabled=!1,this._required=!1,this._value="on",this.toggleGuard=new VetoWriteGuard,this.markInteracted=()=>{this.hasInteracted||(this.hasInteracted=!0,this.reflectValidityStates())},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.setFromUser(!this.checked)},this.onBlur=event=>{this.liveDisabled||(this.hasInteracted=!0,this.reflectValidityStates()),relayNativeEvent(this,event)},this.onFocus=event=>{if(this.liveDisabled){event.stopPropagation();return}relayNativeEvent(this,event)},this.onKeyDown=e=>{if(!this.liveDisabled&&!e.repeat){if(e.key===" "||e.key==="Spacebar"){e.preventDefault(),this.setFromUser(!this.checked);return}if(e.key==="ArrowLeft"||e.key==="ArrowRight"){e.preventDefault();const turnsOn=this.effectiveDirection==="rtl"?e.key==="ArrowLeft":e.key==="ArrowRight";this.setFromUser(turnsOn)}}},this.onLabelSlotChange=event=>this.handleLabelSlotChange(event),this.onSlotChange=event=>this.handleLabelSlotChange(event),this.validityController=new FormControlController(this,{invalid:init=>this.emit("lr-invalid",null,init),interacted:this.markInteracted,customError:()=>this.validityController.customValidityMessage}),this.internals=this.validityController.formInternals,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(".switch-owner")??null}get liveDisabled(){return this.effectiveDisabled||this.matches(":disabled")}click(){this.liveDisabled||this[VALIDITY_ANCHOR]()?.click()}focus(options){this.liveDisabled||this[VALIDITY_ANCHOR]()?.focus(options)}blur(){this[VALIDITY_ANCHOR]()?.blur()}syncExternalDescription(){if(!this.isConnected)return;const target=this[VALIDITY_ANCHOR]();target&&(this.externalDescriptionLease?this.externalDescriptionLease.update(target):this.externalDescriptionLease=acquireResolvedAriaRelationship(this,target,"aria-describedby"))}updated(changed){super.updated(changed),this.syncExternalDescription()}releaseExternalDescription(){this.externalDescriptionLease?.release(),this.externalDescriptionLease=void 0}connectedCallback(){super.connectedCallback(),this.hasUpdated&&this.syncExternalDescription(),this.updateValidity(),this.addEventListener("slotchange",this.onLabelSlotChange),this.hasUpdated?this.recomputeHasLabelSlot():this.seedFirstRenderState(()=>this.recomputeHasLabelSlot())}adoptedCallback(){super.adoptedCallback(),this.labelTextObserver.adopted(),this.releaseExternalDescription(),this.hasUpdated&&this.syncExternalDescription()}disconnectedCallback(){this.releaseExternalDescription(),this.removeEventListener("slotchange",this.onLabelSlotChange),super.disconnectedCallback()}willUpdate(changed){super.willUpdate(changed)}get barredFromValidation(){return isBarredFromValidation(this,this.internals)}updateValidity(){this.barredFromValidation?this.validityController.setValidity({}):this.required&&!this.checked?this.validityController.setValidity({valueMissing:!0},this.localize("switchRequired")):this.validityController.setValidity({}),this.reflectValidityStates()}reflectValidityStates(){syncValidityStates(this.internals,{required:this.required,hasInteracted:this.hasInteracted,barred:this.barredFromValidation}),setCustomState(this.internals,"checked",this.checked),setCustomState(this.internals,"disabled",this.effectiveDisabled)}syncFormState(){this.internals.setFormValue(this.checked?this.value:null,this.checked?"checked":"unchecked"),this.updateValidity()}formResetCallback(){this.hasInteracted=!1,this.restoreCheckedFromDefault(),this.reflectValidityStates()}formStateRestoreCallback(state2,reason){this.checked=state2==="checked"}restoreCheckedFromDefault(){this.settingDefaultChecked=!0;try{this.checked=this._defaultChecked}finally{this.settingDefaultChecked=!1}this._checkedDirty=!1}formDisabledCallback(disabled){if(this.validityController?.reflectingDisabled)return;const wasDisabled=this.effectiveDisabled;this._fieldsetDisabled=disabled,wasDisabled!==this.effectiveDisabled&&(this.updateValidity(),this.requestUpdate())}checkValidity(){return this.validityController.checkValidity()}reportValidity(){return this.validityController.syncConstraints(),this.hasInteracted=!0,this.reflectValidityStates(),this.internals.reportValidity()}setCustomValidity(message){this.validityController.setCustomValidity(message??""),this.reflectValidityStates(),this.requestUpdate()}resetValidity(){this.setCustomValidity("")}setFromUser(next){this.liveDisabled||this.checked!==next&&requestThenCommit({requestDetail:{checked:next,value:this.value},emitRequest:(detail,init)=>this.emit("lr-switch-toggle-request",detail,init),guard:this.toggleGuard,commit:()=>{this.hasInteracted=!0,this.checked=next,dispatchNativeEvent(this,"input"),this.emit("lr-input",{checked:this.checked,value:this.value}),dispatchNativeEvent(this,"change"),this.emit("lr-change",{checked:this.checked,value:this.value})}})}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)})}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)}handleLabelSlotChange(event){const target=event.target;if(!(target?.nodeType!==1||target.localName!=="slot")){if(target.getRootNode()===this.renderRoot){if((target.getAttribute("name")??"")!=="")return}else if(!this.labelForwardingSlots().includes(target))return;this.labelTextObserver.bind(),this.recomputeHasLabelSlot()}}render(){const hasHint=this.withHint||this.hasHintSlot||this.hasHelpTextSlot||(this.hint??"").length>0||(this.helpText??"").length>0,hasError=this.hasErrorSlot||(this.errorText??"").length>0,describedBy=[hasError?"switch-error":"",hasHint?"switch-hint":""].filter(Boolean).join(" "),invalid=hasError||this.hasInteracted&&!this.internals.validity.valid;return html`
+import{__decorate}from"tslib";import{SlotPresenceController}from"../../../internal/slot-presence-controller.js";import{installFormControlLabelSupport}from"../../../internal/form-control-labels.js";import{acquireResolvedAriaRelationship}from"../../../internal/aria-controls.js";import{html,nothing}from"lit";import{property,state}from"lit/decorators.js";import{LyraElement}from"../../../internal/lyra-element.js";import{AccessibleTextController}from"../../../internal/accessible-text-controller.js";import{VALIDITY_ANCHOR}from"../../../internal/anchored-validity.js";import{sizes}from"../../../internal/sizes.styles.js";import{styles}from"./switch.styles.js";import{dispatchNativeEvent,relayNativeEvent}from"../../../internal/native-event-relay.js";import{requestThenCommit}from"../../../internal/request-commit.js";import{markVetoGuardWrite,VetoWriteGuard}from"../../../internal/veto-write-guard.js";import{hasRealContent}from"../../../internal/a11y.js";import{isActionableElement}from"../../../internal/focus-navigation.js";import{CheckedFormAssociated}from"../../../internal/form-associated.js";import{currentValidityValidator}from"../form-validator.js";import{LYRA_DEFAULT_switchRequired}from"../../../internal/default-strings/forms.generated.js";import{LYRA_DEFAULT_fieldRequired}from"../../../internal/default-strings/shared.generated.js";installFormControlLabelSupport();class LyraSwitchBase extends LyraElement{}class LyraSwitch extends CheckedFormAssociated(LyraSwitchBase){constructor(){super(...arguments),this.size="m",this.hint="",this.helpText="",this.withHint=!1,this.errorText="",this.hasLabelSlot=!1,this.slotPresence=new SlotPresenceController(this),this.labelTextObserver=new AccessibleTextController(this,[""],()=>this.recomputeHasLabelSlot(),["slot"]),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.setFromUser(!this.checked)},this.onBlur=event=>{this.liveDisabled||this.setInteracted(!0),relayNativeEvent(this,event)},this.onFocus=event=>{if(this.liveDisabled){event.stopPropagation();return}relayNativeEvent(this,event)},this.onKeyDown=e=>{if(!this.liveDisabled&&!e.repeat){if(e.key===" "||e.key==="Spacebar"){e.preventDefault(),this.setFromUser(!this.checked);return}if(e.key==="ArrowLeft"||e.key==="ArrowRight"){e.preventDefault();const turnsOn=this.effectiveDirection==="rtl"?e.key==="ArrowLeft":e.key==="ArrowRight";this.setFromUser(turnsOn)}}},this.onLabelSlotChange=event=>this.handleLabelSlotChange(event),this.onSlotChange=event=>this.handleLabelSlotChange(event)}static{this.defaultStrings={...super.defaultStrings,fieldRequired:LYRA_DEFAULT_fieldRequired,switchRequired:LYRA_DEFAULT_switchRequired}}static get validators(){return[currentValidityValidator("required","disabled","checked","value")]}static{this.styles=[LyraElement.styles,sizes,styles]}static{this.properties={size:{reflect:!0}}}get hasHintSlot(){return this.slotPresence.has("hint")}get hasHelpTextSlot(){return this.slotPresence.has("help-text")}get hasErrorSlot(){return this.slotPresence.has("error")}checkedWritten(previous){markVetoGuardWrite(this.toggleGuard)}requiredMessage(){return this.localize("switchRequired")}[VALIDITY_ANCHOR](){return this.renderRoot?.querySelector(".switch-owner")??null}get liveDisabled(){return this.effectiveDisabled||this.matches(":disabled")}click(){this.liveDisabled||this[VALIDITY_ANCHOR]()?.click()}focus(options){this.liveDisabled||this[VALIDITY_ANCHOR]()?.focus(options)}blur(){this[VALIDITY_ANCHOR]()?.blur()}syncExternalDescription(){if(!this.isConnected)return;const target=this[VALIDITY_ANCHOR]();target&&(this.externalDescriptionLease?this.externalDescriptionLease.update(target):this.externalDescriptionLease=acquireResolvedAriaRelationship(this,target,"aria-describedby"))}updated(changed){super.updated(changed),this.syncExternalDescription()}releaseExternalDescription(){this.externalDescriptionLease?.release(),this.externalDescriptionLease=void 0}connectedCallback(){super.connectedCallback(),this.hasUpdated&&this.syncExternalDescription(),this.addEventListener("slotchange",this.onLabelSlotChange),this.hasUpdated?this.recomputeHasLabelSlot():this.seedFirstRenderState(()=>this.recomputeHasLabelSlot())}adoptedCallback(){super.adoptedCallback(),this.labelTextObserver.adopted(),this.releaseExternalDescription(),this.hasUpdated&&this.syncExternalDescription()}disconnectedCallback(){this.releaseExternalDescription(),this.removeEventListener("slotchange",this.onLabelSlotChange),super.disconnectedCallback()}willUpdate(changed){super.willUpdate(changed)}setFromUser(next){this.liveDisabled||this.checked!==next&&requestThenCommit({requestDetail:{checked:next,value:this.value},emitRequest:(detail,init)=>this.emit("lr-switch-toggle-request",detail,init),guard:this.toggleGuard,commit:()=>{this.setInteracted(!0),this.checked=next,dispatchNativeEvent(this,"input"),this.emit("lr-input",{checked:this.checked,value:this.value}),dispatchNativeEvent(this,"change"),this.emit("lr-change",{checked:this.checked,value:this.value})}})}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)})}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)}handleLabelSlotChange(event){const target=event.target;if(!(target?.nodeType!==1||target.localName!=="slot")){if(target.getRootNode()===this.renderRoot){if((target.getAttribute("name")??"")!=="")return}else if(!this.labelForwardingSlots().includes(target))return;this.labelTextObserver.bind(),this.recomputeHasLabelSlot()}}render(){const hasHint=this.withHint||this.hasHintSlot||this.hasHelpTextSlot||(this.hint??"").length>0||(this.helpText??"").length>0,hasError=this.hasErrorSlot||(this.errorText??"").length>0,describedBy=[hasError?"switch-error":"",hasHint?"switch-hint":""].filter(Boolean).join(" "),invalid=hasError||this.hasInteracted&&!this.internals.validity.valid;return html`
       <div part="form-control">
         <span class="switch-layout" part="row" @click=${this.onClick}>
           <span
@@ -33,4 +33,4 @@ import{__decorate}from"tslib";import{SlotPresenceController}from"../../../intern
           ><slot name="help-text"></slot>
         </div>
       </div>
-    `}}__decorate([property()],LyraSwitch.prototype,"hint",void 0),__decorate([property({attribute:"help-text"})],LyraSwitch.prototype,"helpText",void 0),__decorate([property({type:Boolean,attribute:"with-hint"})],LyraSwitch.prototype,"withHint",void 0),__decorate([property({attribute:"error-text"})],LyraSwitch.prototype,"errorText",void 0),__decorate([state()],LyraSwitch.prototype,"hasLabelSlot",void 0),__decorate([state()],LyraSwitch.prototype,"hasInteracted",void 0);export{LyraSwitch};
+    `}}__decorate([property()],LyraSwitch.prototype,"hint",void 0),__decorate([property({attribute:"help-text"})],LyraSwitch.prototype,"helpText",void 0),__decorate([property({type:Boolean,attribute:"with-hint"})],LyraSwitch.prototype,"withHint",void 0),__decorate([property({attribute:"error-text"})],LyraSwitch.prototype,"errorText",void 0),__decorate([state()],LyraSwitch.prototype,"hasLabelSlot",void 0);export{LyraSwitch};

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

@@ -1,4 +1,4 @@
-import{__decorate}from"tslib";import{setNativeRangeText,nativeAutocorrectAttribute}from"../../../internal/native-text-control.js";import{renderFormControlHintError}from"../../../internal/form-control-template.js";import{html,nothing}from"lit";import{property,query,state}from"lit/decorators.js";import{styleMap}from"lit/directives/style-map.js";import{acquireAnnouncementSink}from"../../../internal/announcer.js";import{HostDescriptionController}from"../../../internal/aria-controls.js";import{isAccessibilityVisible}from"../../../internal/accessibility-visibility.js";import{LyraElement}from"../../../internal/lyra-element.js";import{OwnedFrame,OwnedTimeout}from"../../../internal/owned-timer.js";import{FormAssociated,isBarredFromValidation}from"../../../internal/form-associated.js";import{SET_ANCHORED_VALIDITY}from"../../../internal/anchored-validity.js";import{setCustomState}from"../../../internal/custom-states.js";import{lengthLimitConverter,lengthViolations,normalizeLengthLimit}from"../../../internal/length-constraints.js";import{styles}from"./textarea.styles.js";import{sizes}from"../../../internal/sizes.styles.js";import{autocorrectConverter,normalizeAutocorrect,spellcheckConverter}from"../../../internal/converters.js";import{sanitizeCssResize}from"../../../internal/safe-css.js";import{finiteDuration,finiteNumber}from"../../../internal/numbers.js";import{getNumberFormat}from"../../../internal/intl-cache.js";import{relayNativeEvent}from"../../../internal/native-event-relay.js";import{SlotPresenceController}from"../../../internal/slot-presence-controller.js";import{DebounceController}from"../../../internal/debounce-controller.js";import{currentValidityValidator}from"../form-validator.js";import{LYRA_DEFAULT_fieldRequired,LYRA_DEFAULT_textareaCharacterCount,LYRA_DEFAULT_textareaCharactersRemaining,LYRA_DEFAULT_textareaLabel,LYRA_DEFAULT_valueInvalid}from"../../../internal/default-strings.generated.js";const COUNT_ANNOUNCE_DELAY_MS=1e3;class LyraTextareaBase extends LyraElement{}class LyraTextarea extends FormAssociated(LyraTextareaBase){static{this.defaultStrings={...super.defaultStrings,fieldRequired:LYRA_DEFAULT_fieldRequired,textareaCharacterCount:LYRA_DEFAULT_textareaCharacterCount,textareaCharactersRemaining:LYRA_DEFAULT_textareaCharactersRemaining,textareaLabel:LYRA_DEFAULT_textareaLabel,valueInvalid:LYRA_DEFAULT_valueInvalid}}static get validators(){return[currentValidityValidator("required","disabled","readonly","value","minlength","maxlength")]}static{this.styles=[LyraElement.styles,sizes,styles]}get value(){return super.value}set value(next){const normalized=next??"";super.value=normalized,this.settlingValueFromInput||this.settledDebounce.cancelIfChanged(normalized)}get autocorrect(){return this.autocorrectValue}set autocorrect(next){this.autocorrectValue=normalizeAutocorrect(next),this.requestUpdate()}get inputmode(){return this.inputMode}set inputmode(next){this.inputMode=next??""}get enterkeyhint(){return this.enterKeyHint}set enterkeyhint(next){this.enterKeyHint=next??""}get defaultValueAlias(){return this.defaultValue}set defaultValueAlias(next){this.defaultValue=next??""}constructor(){super(),this.rows=4,this.resize="vertical",this.size="m",this.appearance="outlined",this.filled=!1,this.pill=!1,this.withCount=!1,this.placeholder="",this.readonly=!1,this.label="",this.hint="",this.helpText="",this.withLabel=!1,this.withHint=!1,this.errorText="",this.accessibleLabel=null,this.spellcheck=!0,this.autofocus=!1,this.title="",this.autocapitalize="",this.autocorrectValue=!0,this.wrap="soft",this.autocomplete="",this.inputMode="",this.enterKeyHint="",this.touched=!1,this.countAnnounceDelay=COUNT_ANNOUNCE_DELAY_MS,this.announcedCountText="",this.slotPresence=new SlotPresenceController(this),this.settlingValueFromInput=!1,this.settledDebounce=new DebounceController(0,value=>{this.emit("lr-input-settled",{value})}),this.resizeRaf=new OwnedFrame(this),this.countAnnounceTimer=new OwnedTimeout(this),this.hostDescription=new HostDescriptionController(this,()=>this.textareaEl??null),this.onInput=event=>{if(this.liveDisabled){event.stopPropagation();return}this.textareaEl&&(this.settlingValueFromInput=!0,this.value=this.textareaEl.value,this.settlingValueFromInput=!1,this.resize==="auto"&&this.fitToContent(),this.scheduleCountAnnouncement(),relayNativeEvent(this,event),this.emit("lr-input",{value:this.value}),this.isDebounced()?(this.settledDebounce.delayMs=this.effectiveDebounceMs,this.settledDebounce.push(this.value)):this.settledDebounce.cancel())},this.onChange=event=>{if(this.liveDisabled){event.stopPropagation();return}this.textareaEl&&(this.settledDebounce.flush(),this.value=this.textareaEl.value,relayNativeEvent(this,event),this.emit("lr-change",{value:this.value}))},this.onFocus=event=>{if(this.liveDisabled){event.stopPropagation();return}relayNativeEvent(this,event)},this.onBlur=event=>{this.liveDisabled||(this.touched=!0),this.settledDebounce.flush(),relayNativeEvent(this,event)},this.onKeyDown=event=>{if(this.liveDisabled){event.stopPropagation();return}event.key==="Enter"&&this.settledDebounce.flush()},this.addEventListener("invalid",()=>{this.touched=!0})}get input(){return this.textareaEl??null}get selectionStart(){return this.textareaEl?.selectionStart??null}set selectionStart(value){this.textareaEl&&(this.textareaEl.selectionStart=value??0)}get selectionEnd(){return this.textareaEl?.selectionEnd??null}set selectionEnd(value){this.textareaEl&&(this.textareaEl.selectionEnd=value??0)}get selectionDirection(){return this.textareaEl?.selectionDirection}set selectionDirection(value){this.textareaEl&&(this.textareaEl.selectionDirection=value??"none")}get liveDisabled(){return this.effectiveDisabled||this.matches(":disabled")}click(){this.liveDisabled||this.textareaEl?.click()}focus(options){this.liveDisabled||this.textareaEl?.focus(options)}blur(){this.textareaEl?.blur()}select(){this.textareaEl?.select()}setSelectionRange(selectionStart,selectionEnd,selectionDirection="none"){this.textareaEl?.setSelectionRange(selectionStart,selectionEnd,selectionDirection)}scrollPosition(position){const ta=this.textareaEl;if(ta){if(position){position.top!==void 0&&(ta.scrollTop=finiteNumber(position.top,ta.scrollTop)),position.left!==void 0&&(ta.scrollLeft=finiteNumber(position.left,ta.scrollLeft));return}return{top:ta.scrollTop,left:ta.scrollLeft}}}setRangeText(replacement,start,end,selectMode="preserve"){const ta=this.textareaEl;ta&&(setNativeRangeText(ta,replacement,start,end,selectMode),this.value=ta.value,this.fitToContent())}connectedCallback(){super.connectedCallback(),this.countAnnouncementSink??=acquireAnnouncementSink("polite",{document:this.ownerDocument,source:this}),this.resize==="auto"&&this.hasUpdated&&(this.armResizeObserver(),this.fitToContent())}disconnectedCallback(){this.settledDebounce.cancel(),this.resizeObserver?.disconnect(),this.resizeObserver=void 0,this.resizeRaf.cancel(),this.countAnnounceTimer.cancel(),this.countAnnouncementSink?.release(),this.countAnnouncementSink=void 0,super.disconnectedCallback()}adoptedCallback(){super.adoptedCallback(),this.hostDescription.adopted()}countText(){const format=getNumberFormat(this.effectiveLocale),max=normalizeLengthLimit(this.maxlength);if(max!==void 0){const remaining=Math.max(0,max-this.value.length);return this.localize("textareaCharactersRemaining",void 0,{count:format.format(remaining),pluralCount:remaining})}const length=this.value.length;return this.localize("textareaCharacterCount",void 0,{count:format.format(length),pluralCount:length})}scheduleCountAnnouncement(){this.countAnnounceTimer.cancel(),this.withCount&&this.countAnnounceTimer.schedule(this.countAnnounceDelay,()=>{if(!this.withCount||!isAccessibilityVisible(this))return;const text=this.countText();this.announcedCountText=text,this.countAnnouncementSink?.announce(text)})}updateValidity(){if(isBarredFromValidation(this,this.internals)){this[SET_ANCHORED_VALIDITY]({});return}if(this.required&&this.value===""){this[SET_ANCHORED_VALIDITY]({valueMissing:!0},this.localize("fieldRequired"));return}const native=this.textareaEl;native&&native.value!==this.value&&(native.value=this.value);const own=lengthViolations(this.value,this.minlength,this.maxlength),tooShort=!!native?.validity.tooShort||own.tooShort,tooLong=!!native?.validity.tooLong||own.tooLong;if(!tooShort&&!tooLong){this[SET_ANCHORED_VALIDITY]({});return}this[SET_ANCHORED_VALIDITY]({tooShort,tooLong},native?.validationMessage||this.localize("valueInvalid"))}updated(changed){super.updated(changed),changed.has("value")&&setCustomState(this.internals,"blank",this.value===""),this.toggleAttribute("data-invalid",this.touched&&!this.internals.validity.valid),(changed.has("minlength")||changed.has("maxlength")||changed.has("readonly"))&&this.updateValidity(),changed.has("resize")&&(this.resize==="auto"?this.armResizeObserver():changed.get("resize")==="auto"&&(this.resizeObserver?.disconnect(),this.resizeObserver=void 0,this.resizeRaf.cancel(),this.textareaEl&&(this.textareaEl.style.blockSize="",this.textareaEl.style.overflowY=""))),this.resize==="auto"&&(this.armResizeObserver(),(changed.has("value")||changed.has("rows")||changed.has("resize"))&&this.fitToContent())}formResetCallback(){super.formResetCallback(),this.touched=!1}armResizeObserver(){const textarea=this.textareaEl;if(this.resizeObserver||!textarea)return;const view=this.ownerDocument.defaultView,ResizeObserverCtor=view?.ResizeObserver;!view||!ResizeObserverCtor||(this.lastObservedWidth=textarea.getBoundingClientRect().width,this.resizeObserver=new ResizeObserverCtor(entries=>{if(!this.isConnected||this.ownerDocument.defaultView!==view)return;const width=entries[0]?.contentRect.width;width===void 0||this.lastObservedWidth!==void 0&&Math.abs(width-this.lastObservedWidth)<.5||(this.lastObservedWidth=width,this.resizeRaf.schedule(()=>{this.fitToContent()}))}),this.resizeObserver.observe(textarea))}fitToContent(){const ta=this.textareaEl;if(!ta||this.resize!=="auto")return;ta.style.blockSize="auto";const computed=ta.ownerDocument.defaultView?.getComputedStyle(ta);if(!computed)return;const borderBlock=parseFloat(computed.borderBlockStartWidth)+parseFloat(computed.borderBlockEndWidth),parsedMax=parseFloat(computed.maxBlockSize),maxBlockSize=Number.isFinite(parsedMax)?parsedMax:Number.POSITIVE_INFINITY,contentBlockSize=ta.scrollHeight+borderBlock;ta.style.blockSize=`${Math.min(contentBlockSize,maxBlockSize)}px`,ta.style.overflowY="auto"}get effectiveDebounceMs(){return finiteDuration(this.debounce??0,0)}isDebounced(){return this.effectiveDebounceMs>0}render(){const hasHint=this.slotPresence.has("hint")||this.slotPresence.has("help-text")||(this.hint??"").length>0||(this.helpText??"").length>0||this.withHint,hasError=this.slotPresence.has("error")||(this.errorText??"").length>0,hasLabel=this.slotPresence.has("label")||(this.label??"").length>0||this.withLabel,describedBy=[hasError?"textarea-error":"",hasHint?"textarea-hint":""].filter(Boolean).join(" "),cssResize=this.resize==="auto"?"none":sanitizeCssResize(this.resize,"vertical");return html`
+import{__decorate}from"tslib";import{setNativeRangeText,nativeAutocorrectAttribute}from"../../../internal/native-text-control.js";import{renderFormControlHintError}from"../../../internal/form-control-template.js";import{html,nothing}from"lit";import{property,query,state}from"lit/decorators.js";import{styleMap}from"lit/directives/style-map.js";import{acquireAnnouncementSink}from"../../../internal/announcer.js";import{HostDescriptionController}from"../../../internal/aria-controls.js";import{isAccessibilityVisible}from"../../../internal/accessibility-visibility.js";import{LyraElement}from"../../../internal/lyra-element.js";import{OwnedFrame,OwnedTimeout}from"../../../internal/owned-timer.js";import{FormAssociated,isBarredFromValidation}from"../../../internal/form-associated.js";import{SET_ANCHORED_VALIDITY}from"../../../internal/anchored-validity.js";import{setCustomState}from"../../../internal/custom-states.js";import{lengthLimitConverter,lengthViolations,normalizeLengthLimit}from"../../../internal/length-constraints.js";import{styles}from"./textarea.styles.js";import{sizes}from"../../../internal/sizes.styles.js";import{autocorrectConverter,normalizeAutocorrect,spellcheckConverter}from"../../../internal/converters.js";import{sanitizeCssResize}from"../../../internal/safe-css.js";import{finiteDuration,finiteNumber}from"../../../internal/numbers.js";import{getNumberFormat}from"../../../internal/intl-cache.js";import{relayNativeEvent}from"../../../internal/native-event-relay.js";import{SlotPresenceController}from"../../../internal/slot-presence-controller.js";import{DebounceController}from"../../../internal/debounce-controller.js";import{currentValidityValidator}from"../form-validator.js";import{LYRA_DEFAULT_textareaCharacterCount,LYRA_DEFAULT_textareaCharactersRemaining,LYRA_DEFAULT_textareaLabel}from"../../../internal/default-strings/forms.generated.js";import{LYRA_DEFAULT_fieldRequired,LYRA_DEFAULT_valueInvalid}from"../../../internal/default-strings/shared.generated.js";const COUNT_ANNOUNCE_DELAY_MS=1e3;class LyraTextareaBase extends LyraElement{}class LyraTextarea extends FormAssociated(LyraTextareaBase){static{this.defaultStrings={...super.defaultStrings,fieldRequired:LYRA_DEFAULT_fieldRequired,textareaCharacterCount:LYRA_DEFAULT_textareaCharacterCount,textareaCharactersRemaining:LYRA_DEFAULT_textareaCharactersRemaining,textareaLabel:LYRA_DEFAULT_textareaLabel,valueInvalid:LYRA_DEFAULT_valueInvalid}}static get validators(){return[currentValidityValidator("required","disabled","readonly","value","minlength","maxlength")]}static{this.styles=[LyraElement.styles,sizes,styles]}get value(){return super.value}set value(next){const normalized=next??"";super.value=normalized,this.settlingValueFromInput||this.settledDebounce.cancelIfChanged(normalized)}get autocorrect(){return this.autocorrectValue}set autocorrect(next){this.autocorrectValue=normalizeAutocorrect(next),this.requestUpdate()}get inputmode(){return this.inputMode}set inputmode(next){this.inputMode=next??""}get enterkeyhint(){return this.enterKeyHint}set enterkeyhint(next){this.enterKeyHint=next??""}get defaultValueAlias(){return this.defaultValue}set defaultValueAlias(next){this.defaultValue=next??""}constructor(){super(),this.rows=4,this.resize="vertical",this.size="m",this.appearance="outlined",this.filled=!1,this.pill=!1,this.withCount=!1,this.placeholder="",this.readonly=!1,this.label="",this.hint="",this.helpText="",this.withLabel=!1,this.withHint=!1,this.errorText="",this.accessibleLabel=null,this.spellcheck=!0,this.autofocus=!1,this.title="",this.autocapitalize="",this.autocorrectValue=!0,this.wrap="soft",this.autocomplete="",this.inputMode="",this.enterKeyHint="",this.touched=!1,this.countAnnounceDelay=COUNT_ANNOUNCE_DELAY_MS,this.announcedCountText="",this.slotPresence=new SlotPresenceController(this),this.settlingValueFromInput=!1,this.settledDebounce=new DebounceController(0,value=>{this.emit("lr-input-settled",{value})}),this.resizeRaf=new OwnedFrame(this),this.countAnnounceTimer=new OwnedTimeout(this),this.hostDescription=new HostDescriptionController(this,()=>this.textareaEl??null),this.onInput=event=>{if(this.liveDisabled){event.stopPropagation();return}this.textareaEl&&(this.settlingValueFromInput=!0,this.value=this.textareaEl.value,this.settlingValueFromInput=!1,this.resize==="auto"&&this.fitToContent(),this.scheduleCountAnnouncement(),relayNativeEvent(this,event),this.emit("lr-input",{value:this.value}),this.isDebounced()?(this.settledDebounce.delayMs=this.effectiveDebounceMs,this.settledDebounce.push(this.value)):this.settledDebounce.cancel())},this.onChange=event=>{if(this.liveDisabled){event.stopPropagation();return}this.textareaEl&&(this.settledDebounce.flush(),this.value=this.textareaEl.value,relayNativeEvent(this,event),this.emit("lr-change",{value:this.value}))},this.onFocus=event=>{if(this.liveDisabled){event.stopPropagation();return}relayNativeEvent(this,event)},this.onBlur=event=>{this.liveDisabled||(this.touched=!0),this.settledDebounce.flush(),relayNativeEvent(this,event)},this.onKeyDown=event=>{if(this.liveDisabled){event.stopPropagation();return}event.key==="Enter"&&this.settledDebounce.flush()},this.addEventListener("invalid",()=>{this.touched=!0})}get input(){return this.textareaEl??null}get selectionStart(){return this.textareaEl?.selectionStart??null}set selectionStart(value){this.textareaEl&&(this.textareaEl.selectionStart=value??0)}get selectionEnd(){return this.textareaEl?.selectionEnd??null}set selectionEnd(value){this.textareaEl&&(this.textareaEl.selectionEnd=value??0)}get selectionDirection(){return this.textareaEl?.selectionDirection}set selectionDirection(value){this.textareaEl&&(this.textareaEl.selectionDirection=value??"none")}get liveDisabled(){return this.effectiveDisabled||this.matches(":disabled")}click(){this.liveDisabled||this.textareaEl?.click()}focus(options){this.liveDisabled||this.textareaEl?.focus(options)}blur(){this.textareaEl?.blur()}select(){this.textareaEl?.select()}setSelectionRange(selectionStart,selectionEnd,selectionDirection="none"){this.textareaEl?.setSelectionRange(selectionStart,selectionEnd,selectionDirection)}scrollPosition(position){const ta=this.textareaEl;if(ta){if(position){position.top!==void 0&&(ta.scrollTop=finiteNumber(position.top,ta.scrollTop)),position.left!==void 0&&(ta.scrollLeft=finiteNumber(position.left,ta.scrollLeft));return}return{top:ta.scrollTop,left:ta.scrollLeft}}}setRangeText(replacement,start,end,selectMode="preserve"){const ta=this.textareaEl;ta&&(setNativeRangeText(ta,replacement,start,end,selectMode),this.value=ta.value,this.fitToContent())}connectedCallback(){super.connectedCallback(),this.countAnnouncementSink??=acquireAnnouncementSink("polite",{document:this.ownerDocument,source:this}),this.resize==="auto"&&this.hasUpdated&&(this.armResizeObserver(),this.fitToContent())}disconnectedCallback(){this.settledDebounce.cancel(),this.resizeObserver?.disconnect(),this.resizeObserver=void 0,this.resizeRaf.cancel(),this.countAnnounceTimer.cancel(),this.countAnnouncementSink?.release(),this.countAnnouncementSink=void 0,super.disconnectedCallback()}adoptedCallback(){super.adoptedCallback(),this.hostDescription.adopted()}countText(){const format=getNumberFormat(this.effectiveLocale),max=normalizeLengthLimit(this.maxlength);if(max!==void 0){const remaining=Math.max(0,max-this.value.length);return this.localize("textareaCharactersRemaining",void 0,{count:format.format(remaining),pluralCount:remaining})}const length=this.value.length;return this.localize("textareaCharacterCount",void 0,{count:format.format(length),pluralCount:length})}scheduleCountAnnouncement(){this.countAnnounceTimer.cancel(),this.withCount&&this.countAnnounceTimer.schedule(this.countAnnounceDelay,()=>{if(!this.withCount||!isAccessibilityVisible(this))return;const text=this.countText();this.announcedCountText=text,this.countAnnouncementSink?.announce(text)})}updateValidity(){if(isBarredFromValidation(this,this.internals)){this[SET_ANCHORED_VALIDITY]({});return}if(this.required&&this.value===""){this[SET_ANCHORED_VALIDITY]({valueMissing:!0},this.localize("fieldRequired"));return}const native=this.textareaEl;native&&native.value!==this.value&&(native.value=this.value);const own=lengthViolations(this.value,this.minlength,this.maxlength),tooShort=!!native?.validity.tooShort||own.tooShort,tooLong=!!native?.validity.tooLong||own.tooLong;if(!tooShort&&!tooLong){this[SET_ANCHORED_VALIDITY]({});return}this[SET_ANCHORED_VALIDITY]({tooShort,tooLong},native?.validationMessage||this.localize("valueInvalid"))}updated(changed){super.updated(changed),changed.has("value")&&setCustomState(this.internals,"blank",this.value===""),this.toggleAttribute("data-invalid",this.touched&&!this.internals.validity.valid),(changed.has("minlength")||changed.has("maxlength")||changed.has("readonly"))&&this.updateValidity(),changed.has("resize")&&(this.resize==="auto"?this.armResizeObserver():changed.get("resize")==="auto"&&(this.resizeObserver?.disconnect(),this.resizeObserver=void 0,this.resizeRaf.cancel(),this.textareaEl&&(this.textareaEl.style.blockSize="",this.textareaEl.style.overflowY=""))),this.resize==="auto"&&(this.armResizeObserver(),(changed.has("value")||changed.has("rows")||changed.has("resize"))&&this.fitToContent())}formResetCallback(){super.formResetCallback(),this.touched=!1}armResizeObserver(){const textarea=this.textareaEl;if(this.resizeObserver||!textarea)return;const view=this.ownerDocument.defaultView,ResizeObserverCtor=view?.ResizeObserver;!view||!ResizeObserverCtor||(this.lastObservedWidth=textarea.getBoundingClientRect().width,this.resizeObserver=new ResizeObserverCtor(entries=>{if(!this.isConnected||this.ownerDocument.defaultView!==view)return;const width=entries[0]?.contentRect.width;width===void 0||this.lastObservedWidth!==void 0&&Math.abs(width-this.lastObservedWidth)<.5||(this.lastObservedWidth=width,this.resizeRaf.schedule(()=>{this.fitToContent()}))}),this.resizeObserver.observe(textarea))}fitToContent(){const ta=this.textareaEl;if(!ta||this.resize!=="auto")return;ta.style.blockSize="auto";const computed=ta.ownerDocument.defaultView?.getComputedStyle(ta);if(!computed)return;const borderBlock=parseFloat(computed.borderBlockStartWidth)+parseFloat(computed.borderBlockEndWidth),parsedMax=parseFloat(computed.maxBlockSize),maxBlockSize=Number.isFinite(parsedMax)?parsedMax:Number.POSITIVE_INFINITY,contentBlockSize=ta.scrollHeight+borderBlock;ta.style.blockSize=`${Math.min(contentBlockSize,maxBlockSize)}px`,ta.style.overflowY="auto"}get effectiveDebounceMs(){return finiteDuration(this.debounce??0,0)}isDebounced(){return this.effectiveDebounceMs>0}render(){const hasHint=this.slotPresence.has("hint")||this.slotPresence.has("help-text")||(this.hint??"").length>0||(this.helpText??"").length>0||this.withHint,hasError=this.slotPresence.has("error")||(this.errorText??"").length>0,hasLabel=this.slotPresence.has("label")||(this.label??"").length>0||this.withLabel,describedBy=[hasError?"textarea-error":"",hasHint?"textarea-hint":""].filter(Boolean).join(" "),cssResize=this.resize==="auto"?"none":sanitizeCssResize(this.resize,"vertical");return html`
       <div part="form-control">
         <label part="form-control-label" for="textarea" ?hidden=${!hasLabel}>
           <span part="label">${this.label}<slot name="label"></slot></span>
@@ -7,6 +7,7 @@ import{__decorate}from"tslib";import{setNativeRangeText,nativeAutocorrectAttribu
           <textarea
             id="textarea"
             part="textarea"
+            name=${this.name||nothing}
             rows=${this.rows}
             placeholder=${this.placeholder}
             title=${this.title||nothing}

package/dist/components/forms/textarea/textarea.styles.js

@@ -1 +1 @@
-import{visuallyHidden}from"../../../internal/a11y.js";import{css}from"lit";import{formControlTextWrap,formControlChrome,formControlFocusHalo,formControlRequiredMarker}from"../../../internal/form-control.styles.js";const styles=css` :host { display: block; --_lr-textarea-max-block-size: none; --_lr-textarea-padding: var(--lr-form-control-padding-inline); --_lr-textarea-font-size: var(--lr-form-control-font-size); --_lr-textarea-radius: var(--lr-form-control-radius); --_lr-textarea-fill: var(--lr-color-surface); --_lr-textarea-border-color: var(--lr-color-border); --_lr-form-control-focus-shadow: var(--lr-form-control-focus-shadow, none); } :host([pill]) { --_lr-textarea-radius: var(--lr-radius-pill); } :host([appearance="filled-outlined"]) { --_lr-textarea-fill: var(--lr-color-surface-raised); --_lr-textarea-border-color: var(--lr-color-border); } :host([appearance="outlined"]) { --_lr-textarea-fill: var(--lr-color-surface); --_lr-textarea-border-color: var(--lr-color-border); } :host([appearance="filled"]) { --_lr-textarea-fill: var(--lr-color-surface-raised); --_lr-textarea-border-color: transparent; } :host([filled]) { --_lr-textarea-fill: var(--lr-color-surface-raised); --_lr-textarea-border-color: transparent; } :host([appearance="plain"]) { --_lr-textarea-fill: transparent; --_lr-textarea-border-color: transparent; } :host([appearance="accent"]) { --_lr-textarea-fill: var(--lr-color-brand-quiet); --_lr-textarea-border-color: var(--lr-color-brand); } [part="form-control"] { display: flex; flex-direction: column; min-inline-size: 0; block-size: 100%; } ${formControlChrome} ${formControlRequiredMarker} [part~='textarea-wrapper'] { display: flex; flex-direction: column; flex: 1 1 auto; min-inline-size: 0; min-block-size: 0; block-size: 100%; } [part="textarea"] { display: block; flex: 0 1 auto; min-block-size: 0; inline-size: 100%; block-size: 100%; box-sizing: border-box; padding: var(--lr-textarea-padding, var(--_lr-textarea-padding)); border: var(--lr-border-width-thin) solid var(--lr-textarea-border-color, var(--_lr-textarea-border-color)); border-radius: var(--lr-textarea-radius, var(--_lr-textarea-radius)); background: var(--lr-textarea-fill, var(--_lr-textarea-fill)); color: var(--lr-color-text); font: inherit; font-size: var(--lr-textarea-font-size, var(--_lr-textarea-font-size)); line-height: var(--lr-line-height-normal); transition: border-color var(--lr-transition-fast); } [part="textarea"][data-auto-resize] { max-block-size: var( --lr-textarea-max-block-size, var(--_lr-textarea-max-block-size) ); } [part="textarea"]:focus { outline: none; border-color: var(--lr-textarea-focus-border-color, var(--lr-color-brand)); ${formControlFocusHalo} } :host(:not(:disabled)) [part="textarea"]:hover { border-color: var(--lr-textarea-hover-border-color, var(--lr-color-brand)); } [part="textarea"]:disabled { opacity: var(--lr-opacity-disabled); cursor: not-allowed; } [part="textarea"]::placeholder { color: var(--lr-color-text-quiet); } [part="footer"] { display: flex; justify-content: flex-end; margin-block-start: var(--lr-space-xs); } [part="footer"][hidden] { display: none; } [part="count"] { font-size: var(--lr-font-size-sm); color: var(--lr-color-text-quiet); } .count-announcement { ${visuallyHidden} margin: var(--lr-size-neg-1px); } [part="form-control"], [part="form-control-label"], [part~="hint"], [part="error"], [part="footer"] { ${formControlTextWrap} } `;export{styles};
+import{visuallyHidden}from"../../../internal/a11y.js";import{css}from"lit";import{formControlTextWrap,formControlChrome,formControlAppearance,formControlFocusHalo,formControlRequiredMarker}from"../../../internal/form-control.styles.js";const styles=css` :host { display: block; --_lr-textarea-max-block-size: none; --_lr-textarea-padding: var(--lr-form-control-padding-inline); --_lr-textarea-font-size: var(--lr-form-control-font-size); --_lr-textarea-radius: var(--lr-form-control-radius); --_lr-textarea-fill: var(--_lr-form-control-fill); --_lr-textarea-border-color: var(--_lr-form-control-border-color); --_lr-form-control-focus-shadow: var(--lr-form-control-focus-shadow, none); } :host([pill]) { --_lr-textarea-radius: var(--lr-radius-pill); } ${formControlAppearance} [part="form-control"] { display: flex; flex-direction: column; min-inline-size: 0; block-size: 100%; } ${formControlChrome} ${formControlRequiredMarker} [part~='textarea-wrapper'] { display: flex; flex-direction: column; flex: 1 1 auto; min-inline-size: 0; min-block-size: 0; block-size: 100%; } [part="textarea"] { display: block; flex: 0 1 auto; min-block-size: 0; inline-size: 100%; block-size: 100%; box-sizing: border-box; padding: var(--lr-textarea-padding, var(--_lr-textarea-padding)); border: var(--lr-border-width-thin) solid var(--lr-textarea-border-color, var(--_lr-textarea-border-color)); border-radius: var(--lr-textarea-radius, var(--_lr-textarea-radius)); background: var(--lr-textarea-fill, var(--_lr-textarea-fill)); color: var(--lr-color-text); font: inherit; font-size: var(--lr-textarea-font-size, var(--_lr-textarea-font-size)); line-height: var(--lr-line-height-normal); transition: border-color var(--lr-transition-fast); } [part="textarea"][data-auto-resize] { max-block-size: var( --lr-textarea-max-block-size, var(--_lr-textarea-max-block-size) ); } [part="textarea"]:focus { outline: none; border-color: var(--lr-textarea-focus-border-color, var(--lr-color-brand)); ${formControlFocusHalo} } :host(:not(:disabled)) [part="textarea"]:hover { border-color: var(--lr-textarea-hover-border-color, var(--lr-color-brand)); } [part="textarea"]:disabled { opacity: var(--lr-opacity-disabled); cursor: not-allowed; } [part="textarea"]::placeholder { color: var(--lr-color-text-quiet); } [part="footer"] { display: flex; justify-content: flex-end; margin-block-start: var(--lr-space-xs); } [part="footer"][hidden] { display: none; } [part="count"] { font-size: var(--lr-font-size-sm); color: var(--lr-color-text-quiet); } .count-announcement { ${visuallyHidden} margin: var(--lr-size-neg-1px); } [part="form-control"], [part="form-control-label"], [part~="hint"], [part="error"], [part="footer"] { ${formControlTextWrap} } `;export{styles};

package/dist/components/forms/time-range/time-range.class.d.ts

@@ -1,4 +1,4 @@
-import{type TemplateResult,type PropertyValues}from'lit';import{LyraElement}from'../../../internal/lyra-element.js';import type{LyraSize}from'../../../internal/variants.js';import{type FormOwnerValue}from'../../../internal/form-associated.js';export type TimeRangeHandle='start'|'end';
+import{type TemplateResult,type PropertyValues}from'lit';import{LyraFormControlElement}from'../../../internal/form-control-element.js';import type{LyraSize}from'../../../internal/variants.js';import{type FormOwnerValue}from'../../../internal/form-associated.js';export type TimeRangeHandle='start'|'end';
 /** Formats a finite, clamped handle value for `aria-valuetext`; return a nullish value to omit
 *  the attribute for that handle. */
 export type TimeRangeValueFormatter=(value:number,handle:TimeRangeHandle)=>string|null|undefined;
@@ -105,6 +105,8 @@ readonly id?:string;}export interface LyraTimeRangeEventMap{input:Event;change:E
 *   wins over `--lr-time-range-preset-active-border-color`.
 * @cssprop --lr-time-range-preset-selected-color - Text color of the active preset button; wins
 *   over `--lr-time-range-preset-active-color`.
+* @cssprop [--lr-time-range-preset-hover-bg=var(--lr-color-brand-quiet)] - Background of a hovered
+*   preset button.
 * @cssprop [--lr-time-range-preset-hover-border-color=var(--lr-color-brand)] - Border color of a
 *   hovered preset button.
 * @cssprop --lr-time-range-preset-pressed-border-color - Border color of a pressed preset button;
@@ -132,7 +134,7 @@ readonly id?:string;}export interface LyraTimeRangeEventMap{input:Event;change:E
 * @status stable
 * @since 4.0.0
 */
-export declare class LyraTimeRange extends LyraElement<LyraTimeRangeEventMap>{static formAssociated:boolean;static styles:import("lit").CSSResultGroup[];static properties:{disabled:{type:BooleanConstructor;reflect:boolean;noAccessor:boolean;};customError:{attribute:string;reflect:boolean;noAccessor:boolean;};};min:number;max:number;start:number;end:number;step:number;
+export declare class LyraTimeRange extends LyraFormControlElement<LyraTimeRangeEventMap>{static formAssociated:boolean;static styles:import("lit").CSSResultGroup[];static properties:{disabled:{type:BooleanConstructor;reflect:boolean;noAccessor:boolean;};customError:{attribute:string;reflect:boolean;noAccessor:boolean;};};min:number;max:number;start:number;end:number;step:number;
 /** Visual size — proportionally scales the handle, track, and preset buttons via a single
 *  multiplier; the drag hit-area never shrinks below 24px (WCAG 2.5.8). Not pixel-matched to
 *  `lr-input`'s row-height scale -- this component's own dimensions aren't on that ladder. The Web Awesome / Shoelace spellings
@@ -164,7 +166,7 @@ valueFormatter?:TimeRangeValueFormatter;private _presets;get presets():readonly
 */
 get appliedPreset():TimeRangePreset|undefined;private _disabled;private _fieldsetDisabled;private readonly dragController;private get drags();private keyboardChanged;private internals;private validityController;
 /** Reflected consumer validity message; only `setCustomValidity('')` clears it. */
-customError:string|null;private hasInteracted;constructor();private markInteracted;private get liveDisabled();private emitInput;private emitChange;private onHandleFocus;private onHandleBlur;private reflectValidityStates;get form():HTMLFormElement|null;set form(owner:FormOwnerValue);getForm():HTMLFormElement|null;get labels():NodeList;get validity():ValidityState;get validationMessage():string;get willValidate():boolean;
+customError:string|null;private hasInteracted;constructor();private markInteracted;private get liveDisabled();private emitInput;private emitChange;private movesBetweenHandles;private onHandleFocus;private onHandleBlur;private reflectValidityStates;get form():HTMLFormElement|null;set form(owner:FormOwnerValue);
 /** Whether the control currently satisfies its constraints — the silent query, so it
 *  deliberately does not count as interaction for the `user-*` custom states.
 *  `withStaticValidityCheck()` tells the `installInteractionOnInvalid()` listener above that

package/dist/components/forms/time-range/time-range.class.js

@@ -1,4 +1,4 @@
-import{__decorate}from"tslib";import{RangeDragController,rangePointerRatio,nearestRangeEnd,RANGE_PAGE_STEP_MULTIPLIER}from"../../../internal/range-drag.js";import{emitValueEvents}from"../../../internal/value-events.js";import{installFormControlLabelSupport}from"../../../internal/form-control-labels.js";import{FormControlController}from"../../../internal/form-control-controller.js";import{html,nothing}from"lit";import{property}from"lit/decorators.js";import{LyraElement}from"../../../internal/lyra-element.js";import{VALIDITY_ANCHOR}from"../../../internal/anchored-validity.js";import{syncValidityStates}from"../../../internal/custom-states.js";import{isRtl}from"../../../internal/rtl.js";import{finiteAdd,finiteInterpolate,finiteNumber,finiteRange,finiteRatio,isSliderKey}from"../../../internal/numbers.js";import{clampSteppedValue}from"../../../internal/step-value.js";import{styles}from"./time-range.styles.js";import{relayNativeEvent}from"../../../internal/native-event-relay.js";import{activeElementIn}from"../../../internal/active-element.js";import{getFormOwner,isBarredFromValidation,setFormOwner}from"../../../internal/form-associated.js";import{LYRA_DEFAULT_fieldRequired,LYRA_DEFAULT_rangeEnd,LYRA_DEFAULT_rangeStart}from"../../../internal/default-strings.generated.js";installFormControlLabelSupport();class LyraTimeRange extends LyraElement{static{this.defaultStrings={...super.defaultStrings,fieldRequired:LYRA_DEFAULT_fieldRequired,rangeEnd:LYRA_DEFAULT_rangeEnd,rangeStart:LYRA_DEFAULT_rangeStart}}static{this.formAssociated=!0}static{this.styles=[LyraElement.styles,styles]}static{this.properties={disabled:{type:Boolean,reflect:!0,noAccessor:!0},customError:{attribute:"custom-error",reflect:!0,noAccessor:!0}}}get presets(){return this._presets}set presets(next){const previous=this._presets;if(next===previous)return;const rows=[];if(Array.isArray(next))for(let index=0;index<Math.min(next.length,256);index+=1)try{const raw=next[index];if(raw===null||typeof raw!="object"||typeof raw.label!="string"||typeof raw.start!="number"||typeof raw.end!="number")continue;rows.push({source:raw,label:raw.label,start:raw.start,end:raw.end})}catch{}this._appliedPreset=void 0,this.presetRows=rows,this._presets=Object.freeze(rows.map(row=>row.source)),this.requestUpdate("presets",previous)}get appliedPreset(){return this._appliedPreset?.source}get drags(){return this.dragController.active}constructor(){super(),this.min=0,this.max=100,this.start=0,this.end=100,this.step=1,this.size="m",this._presets=Object.freeze([]),this.presetRows=[],this._disabled=!1,this._fieldsetDisabled=!1,this.dragController=new RangeDragController(this,event=>this.onPointerMove(event),event=>this.onPointerUp(event)),this.keyboardChanged=!1,this.hasInteracted=!1,this.markInteracted=()=>{this.liveDisabled||this.hasInteracted||(this.hasInteracted=!0,this.reflectValidityStates())},this.onHandleFocus=event=>{relayNativeEvent(this,event)},this.onHandleBlur=event=>{this.finishKeyboardGesture(),relayNativeEvent(this,event)},this.onKeyDown=(handle,e)=>{if(this.liveDisabled)return;const current=handle==="start"?finiteRange(this.start,this.domain().lo):finiteRange(this.end,this.domain().hi),step=finiteRange(this.step,0,0),move=(direction,multiplier=1)=>{const delta=finiteRange(step*multiplier,Number.MAX_VALUE,0,Number.MAX_VALUE);delta!==0&&(this.keyboardChanged=this.setValue(handle,finiteAdd(current,direction*delta,current),!1)||this.keyboardChanged)},rtl=isRtl(this),forwardKey=rtl?"ArrowLeft":"ArrowRight",backwardKey=rtl?"ArrowRight":"ArrowLeft";e.key===forwardKey||e.key==="ArrowUp"?(e.preventDefault(),move(1)):e.key===backwardKey||e.key==="ArrowDown"?(e.preventDefault(),move(-1)):e.key==="PageUp"?(e.preventDefault(),move(1,RANGE_PAGE_STEP_MULTIPLIER)):e.key==="PageDown"?(e.preventDefault(),move(-1,RANGE_PAGE_STEP_MULTIPLIER)):e.key==="Home"?(e.preventDefault(),this.keyboardChanged=this.setValue(handle,this.reachableBounds(handle).min,!1)||this.keyboardChanged):e.key==="End"&&(e.preventDefault(),this.keyboardChanged=this.setValue(handle,this.reachableBounds(handle).max,!1)||this.keyboardChanged)},this.onKeyUp=e=>{isSliderKey(e.key)&&this.finishKeyboardGesture()},this.onPointerDown=(handle,e)=>{this.beginDrag(handle,e,e.target)},this.onBasePointerDown=e=>{if(this.liveDisabled)return;const handles=Array.from(this.renderRoot.querySelectorAll('[part="handle-start"],[part="handle-end"]'));if(handles.length===0||handles.includes(e.target))return;const base=this.renderRoot.querySelector('[part="base"]');if(!base)return;const rect=base.getBoundingClientRect();if(rect.width===0)return;const target=this.valueAtPointer(e.clientX,rect,isRtl(this)),handle=this.nearestHandle(target),handleEl=this.renderRoot.querySelector(`[part="handle-${handle}"]`);if(!handleEl)return;const drag=this.beginDrag(handle,e,handleEl);drag&&(this.setValue(handle,target,!1)&&(drag.changed=!0),handleEl.focus())},this.onPointerMove=e=>{const drag=this.drags.get(e.pointerId);if(drag===void 0)return;if(this.liveDisabled){this.endDrag(e.pointerId,!1);return}if(!drag.rect)return;const value=this.valueAtPointer(e.clientX,drag.rect,drag.rtl);drag.changed=this.setValue(drag.handle,value,!1)||drag.changed},this.onPointerUp=e=>{this.endDrag(e.pointerId,e.type==="pointerup"&&!this.liveDisabled)},this.validityController=new FormControlController(this,{invalid:init=>this.emit("lr-invalid",null,init),interacted:this.markInteracted,customError:()=>this.validityController.customValidityMessage}),this.internals=this.validityController.formInternals,this.addEventListener("focusout",this.markInteracted),this.reflectValidityStates()}get liveDisabled(){return this.effectiveDisabled||typeof this.matches=="function"&&this.matches(":disabled")}emitInput(){const value=Object.freeze({start:this.start,end:this.end});return emitValueEvents(this,"input",{value,...value},detail=>this.emit("lr-input",detail)),value}emitChange(value=Object.freeze({start:this.start,end:this.end})){emitValueEvents(this,"change",{value,...value},detail=>this.emit("lr-change",detail))}reflectValidityStates(){syncValidityStates(this.internals,{required:!1,hasInteracted:this.hasInteracted,barred:isBarredFromValidation(this,this.internals)})}[VALIDITY_ANCHOR](){return this.renderRoot?.querySelector('[part="handle-start"]')??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.validityController.checkValidity()}reportValidity(){return this.validityController.syncConstraints(),this.markInteracted(),this.internals.reportValidity()}setCustomValidity(message){this.validityController.setCustomValidity(message??""),this.reflectValidityStates(),this.requestUpdate()}get disabled(){return this._disabled}set disabled(next){const old=this._disabled;this._disabled=!!next,this._disabled&&this.abortActiveGestures(),this.toggleAttribute("disabled",this._disabled),this._fieldsetDisabled=this.validityController?.fieldsetDisabled(this._fieldsetDisabled)??this._fieldsetDisabled,this.reflectValidityStates(),this.requestUpdate("disabled",old)}get effectiveDisabled(){return this.disabled||this._fieldsetDisabled}formDisabledCallback(disabled){if(this.validityController?.reflectingDisabled)return;const wasDisabled=this.effectiveDisabled;this._fieldsetDisabled=this.validityController.fieldsetDisabled(disabled),wasDisabled!==this.effectiveDisabled&&(this.effectiveDisabled&&this.abortActiveGestures(),this.reflectValidityStates(),this.requestUpdate())}declaredHandleValue(handle,fallback){const declared=this.getAttribute(handle);return declared===null?fallback:finiteNumber(Number(declared),fallback)}formResetCallback(){const hadAppliedPreset=this._appliedPreset!==void 0;this._appliedPreset=void 0;const{lo,hi}=this.domain(),declaredStart=this.declaredHandleValue("start",lo),declaredEnd=this.declaredHandleValue("end",hi),start=finiteRange(declaredStart,lo,lo,hi),end=finiteRange(declaredEnd,hi,lo,hi);this.start=Math.min(start,end),this.end=Math.max(start,end),this.abortActiveGestures(),this.hasInteracted=!1,this.reflectValidityStates(),hadAppliedPreset&&this.requestUpdate()}disconnectedCallback(){super.disconnectedCallback(),this.abortActiveGestures()}adoptedCallback(){super.adoptedCallback(),this.abortActiveGestures()}click(){this.liveDisabled||this.renderRoot?.querySelector('[part="handle-start"]')?.click()}focus(options){this.liveDisabled||this.renderRoot?.querySelector('[part="handle-start"]')?.focus(options)}blur(){const active=activeElementIn(this.shadowRoot);active?.nodeType===1&&typeof active.matches=="function"&&typeof active.blur=="function"&&active.matches('[part^="handle-"]')?active.blur():this.renderRoot?.querySelector('[part="handle-start"]')?.blur()}domain(){const min=finiteNumber(this.min,0),max=finiteNumber(this.max,100);return{lo:Math.min(min,max),hi:Math.max(min,max)}}percentOf(value){const{lo,hi}=this.domain(),safeValue=finiteRange(value,lo,lo,hi);return finiteRatio(safeValue,lo,hi)*100}reachableBounds(handle){const{lo,hi}=this.domain(),start=finiteRange(this.start,lo,lo,hi),end=finiteRange(this.end,hi,lo,hi);return handle==="start"?{min:lo,max:end}:{min:start,max:hi}}clamp(handle,value){const{lo,hi}=this.domain(),bounded=clampSteppedValue(value,lo,hi,this.step);return handle==="start"?Math.min(bounded,finiteRange(this.end,hi,lo,hi)):Math.max(bounded,finiteRange(this.start,lo,lo,hi))}setValue(handle,value,commit){const clamped=this.clamp(handle,value),previous=handle==="start"?this.start:this.end;if(clamped===previous)return!1;this._appliedPreset=void 0,handle==="start"?this.start=clamped:this.end=clamped,this.markInteracted();const detail=this.emitInput();return commit&&this.emitChange(detail),!0}applyPreset(preset){if(this.liveDisabled)return;const{start:nextStart,end:nextEnd}=this.normalizePreset(preset),previousPreset=this._appliedPreset;if(this._appliedPreset=preset,nextStart===this.start&&nextEnd===this.end){previousPreset!==preset&&this.requestUpdate();return}this.start=nextStart,this.end=nextEnd,this.markInteracted();const detail=this.emitInput();this.emitChange(detail)}normalizePreset(preset){const{lo,hi}=this.domain(),start=finiteRange(preset.start,lo,lo,hi),end=finiteRange(preset.end,hi,lo,hi);return{start:Math.min(start,end),end:Math.max(start,end)}}reconcileAppliedPreset(){if(!this._appliedPreset)return;const normalized=this.normalizePreset(this._appliedPreset);(normalized.start!==this.start||normalized.end!==this.end)&&(this._appliedPreset=void 0)}finishKeyboardGesture(){this.keyboardChanged&&(this.keyboardChanged=!1,this.liveDisabled||this.emitChange())}beginDrag(handle,e,captureTarget){if(e.button!==0||this.liveDisabled)return;const base=this.renderRoot.querySelector('[part="base"]');if(!(!base||base.ownerDocument.defaultView!==captureTarget.ownerDocument.defaultView))return this.dragController.begin(e,{handle,changed:!1,captureTarget,rect:base.getBoundingClientRect(),rtl:isRtl(this)})}valueAtPointer(clientX,rect,rtl){const ratio=rangePointerRatio(clientX,0,rect,rtl),{lo,hi}=this.domain();return finiteInterpolate(lo,hi,ratio)}nearestHandle(target){const{lo,hi}=this.domain(),start=finiteRange(this.start,lo),end=finiteRange(this.end,hi);return nearestRangeEnd(target,start,end)===0?"start":"end"}abortActiveGestures(){this.keyboardChanged=!1,this.dragController.abort()}endDrag(pointerId,commit){const drag=this.dragController.end(pointerId);commit&&drag?.changed&&this.emitChange()}willUpdate(changed){if(super.willUpdate(changed),changed.has("start")||changed.has("end")||changed.has("min")||changed.has("max")){const{lo,hi}=this.domain(),start=Number.isFinite(this.start)?finiteRange(this.start,lo,lo,hi):this.start,end=Number.isFinite(this.end)?finiteRange(this.end,hi,lo,hi):this.end;if(changed.has("start")&&changed.has("end")&&Number.isFinite(start)&&Number.isFinite(end)){this.start=Math.min(start,end),this.end=Math.max(start,end),this.reconcileAppliedPreset();return}Number.isFinite(start)&&(this.start=start),Number.isFinite(end)&&(this.end=end)}(changed.has("start")||changed.has("min")||changed.has("max"))&&Number.isFinite(this.start)&&Number.isFinite(this.end)&&(this.start=Math.min(this.start,this.end)),(changed.has("end")||changed.has("min")||changed.has("max"))&&Number.isFinite(this.start)&&Number.isFinite(this.end)&&(this.end=Math.max(this.end,this.start)),this.reconcileAppliedPreset()}render(){const startPct=this.percentOf(this.start),endPct=this.percentOf(this.end),startBounds=this.reachableBounds("start"),endBounds=this.reachableBounds("end"),startValue=Number.isFinite(this.start)?finiteRange(this.start,startBounds.min,startBounds.min,startBounds.max):void 0,endValue=Number.isFinite(this.end)?finiteRange(this.end,endBounds.min,endBounds.min,endBounds.max):void 0,startValueText=startValue===void 0?void 0:this.valueFormatter?.(startValue,"start"),endValueText=endValue===void 0?void 0:this.valueFormatter?.(endValue,"end");return html`
+import{__decorate}from"tslib";import{RangeDragController,rangePointerRatio,nearestRangeEnd,RANGE_PAGE_STEP_MULTIPLIER}from"../../../internal/range-drag.js";import{emitValueEvents}from"../../../internal/value-events.js";import{installFormControlLabelSupport}from"../../../internal/form-control-labels.js";import{FormControlController}from"../../../internal/form-control-controller.js";import{html,nothing}from"lit";import{property}from"lit/decorators.js";import{LyraElement}from"../../../internal/lyra-element.js";import{LyraFormControlElement}from"../../../internal/form-control-element.js";import{VALIDITY_ANCHOR}from"../../../internal/anchored-validity.js";import{syncValidityStates}from"../../../internal/custom-states.js";import{isRtl}from"../../../internal/rtl.js";import{finiteAdd,finiteInterpolate,finiteNumber,finiteRange,finiteRatio,isSliderKey}from"../../../internal/numbers.js";import{clampSteppedValue}from"../../../internal/step-value.js";import{styles}from"./time-range.styles.js";import{relayNativeEvent}from"../../../internal/native-event-relay.js";import{shadowFocusTarget}from"../../../internal/active-element.js";import{getFormOwner,isBarredFromValidation,setFormOwner}from"../../../internal/form-associated.js";import{LYRA_DEFAULT_rangeEnd,LYRA_DEFAULT_rangeStart}from"../../../internal/default-strings/forms.generated.js";import{LYRA_DEFAULT_fieldRequired}from"../../../internal/default-strings/shared.generated.js";installFormControlLabelSupport();class LyraTimeRange extends LyraFormControlElement{static{this.defaultStrings={...super.defaultStrings,fieldRequired:LYRA_DEFAULT_fieldRequired,rangeEnd:LYRA_DEFAULT_rangeEnd,rangeStart:LYRA_DEFAULT_rangeStart}}static{this.formAssociated=!0}static{this.styles=[LyraElement.styles,styles]}static{this.properties={disabled:{type:Boolean,reflect:!0,noAccessor:!0},customError:{attribute:"custom-error",reflect:!0,noAccessor:!0}}}get presets(){return this._presets}set presets(next){const previous=this._presets;if(next===previous)return;const rows=[];if(Array.isArray(next))for(let index=0;index<Math.min(next.length,256);index+=1)try{const raw=next[index];if(raw===null||typeof raw!="object"||typeof raw.label!="string"||typeof raw.start!="number"||typeof raw.end!="number")continue;rows.push({source:raw,label:raw.label,start:raw.start,end:raw.end})}catch{}this._appliedPreset=void 0,this.presetRows=rows,this._presets=Object.freeze(rows.map(row=>row.source)),this.requestUpdate("presets",previous)}get appliedPreset(){return this._appliedPreset?.source}get drags(){return this.dragController.active}constructor(){super(),this.min=0,this.max=100,this.start=0,this.end=100,this.step=1,this.size="m",this._presets=Object.freeze([]),this.presetRows=[],this._disabled=!1,this._fieldsetDisabled=!1,this.dragController=new RangeDragController(this,event=>this.onPointerMove(event),event=>this.onPointerUp(event)),this.keyboardChanged=!1,this.hasInteracted=!1,this.markInteracted=()=>{this.liveDisabled||this.hasInteracted||(this.hasInteracted=!0,this.reflectValidityStates())},this.onHandleFocus=event=>{this.movesBetweenHandles(event.relatedTarget)||relayNativeEvent(this,event)},this.onHandleBlur=event=>{this.finishKeyboardGesture(),this.movesBetweenHandles(event.relatedTarget)||relayNativeEvent(this,event)},this.onKeyDown=(handle,e)=>{if(this.liveDisabled)return;const current=handle==="start"?finiteRange(this.start,this.domain().lo):finiteRange(this.end,this.domain().hi),step=finiteRange(this.step,0,0),move=(direction,multiplier=1)=>{const delta=finiteRange(step*multiplier,Number.MAX_VALUE,0,Number.MAX_VALUE);delta!==0&&(this.keyboardChanged=this.setValue(handle,finiteAdd(current,direction*delta,current),!1)||this.keyboardChanged)},rtl=isRtl(this),forwardKey=rtl?"ArrowLeft":"ArrowRight",backwardKey=rtl?"ArrowRight":"ArrowLeft";e.key===forwardKey||e.key==="ArrowUp"?(e.preventDefault(),move(1)):e.key===backwardKey||e.key==="ArrowDown"?(e.preventDefault(),move(-1)):e.key==="PageUp"?(e.preventDefault(),move(1,RANGE_PAGE_STEP_MULTIPLIER)):e.key==="PageDown"?(e.preventDefault(),move(-1,RANGE_PAGE_STEP_MULTIPLIER)):e.key==="Home"?(e.preventDefault(),this.keyboardChanged=this.setValue(handle,this.reachableBounds(handle).min,!1)||this.keyboardChanged):e.key==="End"&&(e.preventDefault(),this.keyboardChanged=this.setValue(handle,this.reachableBounds(handle).max,!1)||this.keyboardChanged)},this.onKeyUp=e=>{isSliderKey(e.key)&&this.finishKeyboardGesture()},this.onPointerDown=(handle,e)=>{this.beginDrag(handle,e,e.target)},this.onBasePointerDown=e=>{if(this.liveDisabled)return;const handles=Array.from(this.renderRoot.querySelectorAll('[part="handle-start"],[part="handle-end"]'));if(handles.length===0||handles.includes(e.target))return;const base=this.renderRoot.querySelector('[part="base"]');if(!base)return;const rect=base.getBoundingClientRect();if(rect.width===0)return;const target=this.valueAtPointer(e.clientX,rect,isRtl(this)),handle=this.nearestHandle(target),handleEl=this.renderRoot.querySelector(`[part="handle-${handle}"]`);if(!handleEl)return;const drag=this.beginDrag(handle,e,handleEl);drag&&(this.setValue(handle,target,!1)&&(drag.changed=!0),handleEl.focus())},this.onPointerMove=e=>{const drag=this.drags.get(e.pointerId);if(drag===void 0)return;if(this.liveDisabled){this.endDrag(e.pointerId,!1);return}if(!drag.rect)return;const value=this.valueAtPointer(e.clientX,drag.rect,drag.rtl);drag.changed=this.setValue(drag.handle,value,!1)||drag.changed},this.onPointerUp=e=>{this.endDrag(e.pointerId,e.type==="pointerup"&&!this.liveDisabled)},this.validityController=new FormControlController(this,{invalid:init=>this.emit("lr-invalid",null,init),interacted:this.markInteracted,customError:()=>this.validityController.customValidityMessage}),this.internals=this.validityController.formInternals,this.addEventListener("focusout",event=>{event.relatedTarget!==this&&this.markInteracted()}),this.reflectValidityStates()}get liveDisabled(){return this.effectiveDisabled||typeof this.matches=="function"&&this.matches(":disabled")}emitInput(){const value=Object.freeze({start:this.start,end:this.end});return emitValueEvents(this,"input",{value,...value},detail=>this.emit("lr-input",detail)),value}emitChange(value=Object.freeze({start:this.start,end:this.end})){emitValueEvents(this,"change",{value,...value},detail=>this.emit("lr-change",detail))}movesBetweenHandles(related){return related instanceof Element&&related.matches('[part="handle-start"], [part="handle-end"]')&&this.renderRoot.contains(related)}reflectValidityStates(){syncValidityStates(this.internals,{required:!1,hasInteracted:this.hasInteracted,barred:isBarredFromValidation(this,this.internals)})}[VALIDITY_ANCHOR](){return this.renderRoot?.querySelector('[part="handle-start"]')??null}get form(){return getFormOwner(this.internals)}set form(owner){setFormOwner(this,owner)}checkValidity(){return this.validityController.checkValidity()}reportValidity(){return this.validityController.syncConstraints(),this.markInteracted(),this.internals.reportValidity()}setCustomValidity(message){this.validityController.setCustomValidity(message??""),this.reflectValidityStates(),this.requestUpdate()}get disabled(){return this._disabled}set disabled(next){const old=this._disabled;this._disabled=!!next,this._disabled&&this.abortActiveGestures(),this.toggleAttribute("disabled",this._disabled),this._fieldsetDisabled=this.validityController?.fieldsetDisabled(this._fieldsetDisabled)??this._fieldsetDisabled,this.reflectValidityStates(),this.requestUpdate("disabled",old)}get effectiveDisabled(){return this.disabled||this._fieldsetDisabled}formDisabledCallback(disabled){if(this.validityController?.reflectingDisabled)return;const wasDisabled=this.effectiveDisabled;this._fieldsetDisabled=this.validityController.fieldsetDisabled(disabled),wasDisabled!==this.effectiveDisabled&&(this.effectiveDisabled&&this.abortActiveGestures(),this.reflectValidityStates(),this.requestUpdate())}declaredHandleValue(handle,fallback){const declared=this.getAttribute(handle);return declared===null?fallback:finiteNumber(Number(declared),fallback)}formResetCallback(){const hadAppliedPreset=this._appliedPreset!==void 0;this._appliedPreset=void 0;const{lo,hi}=this.domain(),declaredStart=this.declaredHandleValue("start",lo),declaredEnd=this.declaredHandleValue("end",hi),start=finiteRange(declaredStart,lo,lo,hi),end=finiteRange(declaredEnd,hi,lo,hi);this.start=Math.min(start,end),this.end=Math.max(start,end),this.abortActiveGestures(),this.hasInteracted=!1,this.reflectValidityStates(),hadAppliedPreset&&this.requestUpdate()}disconnectedCallback(){super.disconnectedCallback(),this.abortActiveGestures()}adoptedCallback(){super.adoptedCallback(),this.abortActiveGestures()}click(){this.liveDisabled||this.renderRoot?.querySelector('[part="handle-start"]')?.click()}focus(options){this.liveDisabled||this.renderRoot?.querySelector('[part="handle-start"]')?.focus(options)}blur(){const active=shadowFocusTarget(this);active?.nodeType===1&&typeof active.matches=="function"&&typeof active.blur=="function"&&active.matches('[part^="handle-"]')?active.blur():this.renderRoot?.querySelector('[part="handle-start"]')?.blur()}domain(){const min=finiteNumber(this.min,0),max=finiteNumber(this.max,100);return{lo:Math.min(min,max),hi:Math.max(min,max)}}percentOf(value){const{lo,hi}=this.domain(),safeValue=finiteRange(value,lo,lo,hi);return finiteRatio(safeValue,lo,hi)*100}reachableBounds(handle){const{lo,hi}=this.domain(),start=finiteRange(this.start,lo,lo,hi),end=finiteRange(this.end,hi,lo,hi);return handle==="start"?{min:lo,max:end}:{min:start,max:hi}}clamp(handle,value){const{lo,hi}=this.domain(),bounded=clampSteppedValue(value,lo,hi,this.step);return handle==="start"?Math.min(bounded,finiteRange(this.end,hi,lo,hi)):Math.max(bounded,finiteRange(this.start,lo,lo,hi))}setValue(handle,value,commit){const clamped=this.clamp(handle,value),previous=handle==="start"?this.start:this.end;if(clamped===previous)return!1;this._appliedPreset=void 0,handle==="start"?this.start=clamped:this.end=clamped,this.markInteracted();const detail=this.emitInput();return commit&&this.emitChange(detail),!0}applyPreset(preset){if(this.liveDisabled)return;const{start:nextStart,end:nextEnd}=this.normalizePreset(preset),previousPreset=this._appliedPreset;if(this._appliedPreset=preset,nextStart===this.start&&nextEnd===this.end){previousPreset!==preset&&this.requestUpdate();return}this.start=nextStart,this.end=nextEnd,this.markInteracted();const detail=this.emitInput();this.emitChange(detail)}normalizePreset(preset){const{lo,hi}=this.domain(),start=finiteRange(preset.start,lo,lo,hi),end=finiteRange(preset.end,hi,lo,hi);return{start:Math.min(start,end),end:Math.max(start,end)}}reconcileAppliedPreset(){if(!this._appliedPreset)return;const normalized=this.normalizePreset(this._appliedPreset);(normalized.start!==this.start||normalized.end!==this.end)&&(this._appliedPreset=void 0)}finishKeyboardGesture(){this.keyboardChanged&&(this.keyboardChanged=!1,this.liveDisabled||this.emitChange())}beginDrag(handle,e,captureTarget){if(e.button!==0||this.liveDisabled)return;const base=this.renderRoot.querySelector('[part="base"]');if(!(!base||base.ownerDocument.defaultView!==captureTarget.ownerDocument.defaultView))return this.dragController.begin(e,{handle,changed:!1,captureTarget,rect:base.getBoundingClientRect(),rtl:isRtl(this)})}valueAtPointer(clientX,rect,rtl){const ratio=rangePointerRatio(clientX,0,rect,rtl),{lo,hi}=this.domain();return finiteInterpolate(lo,hi,ratio)}nearestHandle(target){const{lo,hi}=this.domain(),start=finiteRange(this.start,lo),end=finiteRange(this.end,hi);return nearestRangeEnd(target,start,end)===0?"start":"end"}abortActiveGestures(){this.keyboardChanged=!1,this.dragController.abort()}endDrag(pointerId,commit){const drag=this.dragController.end(pointerId);commit&&drag?.changed&&this.emitChange()}willUpdate(changed){if(super.willUpdate(changed),changed.has("start")||changed.has("end")||changed.has("min")||changed.has("max")){const{lo,hi}=this.domain(),start=Number.isFinite(this.start)?finiteRange(this.start,lo,lo,hi):this.start,end=Number.isFinite(this.end)?finiteRange(this.end,hi,lo,hi):this.end;if(changed.has("start")&&changed.has("end")&&Number.isFinite(start)&&Number.isFinite(end)){this.start=Math.min(start,end),this.end=Math.max(start,end),this.reconcileAppliedPreset();return}Number.isFinite(start)&&(this.start=start),Number.isFinite(end)&&(this.end=end)}(changed.has("start")||changed.has("min")||changed.has("max"))&&Number.isFinite(this.start)&&Number.isFinite(this.end)&&(this.start=Math.min(this.start,this.end)),(changed.has("end")||changed.has("min")||changed.has("max"))&&Number.isFinite(this.start)&&Number.isFinite(this.end)&&(this.end=Math.max(this.end,this.start)),this.reconcileAppliedPreset()}render(){const startPct=this.percentOf(this.start),endPct=this.percentOf(this.end),startBounds=this.reachableBounds("start"),endBounds=this.reachableBounds("end"),startValue=Number.isFinite(this.start)?finiteRange(this.start,startBounds.min,startBounds.min,startBounds.max):void 0,endValue=Number.isFinite(this.end)?finiteRange(this.end,endBounds.min,endBounds.min,endBounds.max):void 0,startValueText=startValue===void 0?void 0:this.valueFormatter?.(startValue,"start"),endValueText=endValue===void 0?void 0:this.valueFormatter?.(endValue,"end");return html`
       ${this.presets.length>0?html`<div part="presets">
             ${this.presetRows.map(preset=>{const active=preset===this._appliedPreset;return html`<button
                 part="preset-button"

package/dist/components/forms/time-range/time-range.styles.js

@@ -1 +1 @@
-import{focusRing}from"../../../internal/interactive-control.styles.js";import{css}from"lit";const styles=css` :host { display: block; inline-size: 100%; --_lr-time-range-handle-size: calc( var(--lr-size-14px) * var(--lr-time-range-size-scale, var(--_lr-time-range-size-scale)) ); --_lr-time-range-hit-size: max( var(--lr-size-24px), calc( var(--lr-size-28px) * var(--lr-time-range-size-scale, var(--_lr-time-range-size-scale)) ) ); --_lr-time-range-track-size: calc( var(--lr-size-4px) * var(--lr-time-range-size-scale, var(--_lr-time-range-size-scale)) ); --_lr-time-range-base-size: calc( var(--lr-size-1-5rem) * var(--lr-time-range-size-scale, var(--_lr-time-range-size-scale)) ); --_lr-time-range-preset-gap: var(--lr-space-xs); --_lr-time-range-preset-radius: var(--lr-radius); --_lr-time-range-preset-padding: calc( var(--lr-space-xs) * var(--lr-time-range-size-scale, var(--_lr-time-range-size-scale)) ) calc( var(--lr-space-s) * var(--lr-time-range-size-scale, var(--_lr-time-range-size-scale)) ); --_lr-time-range-preset-font-size: calc( var(--lr-font-size-sm) * var(--lr-time-range-size-scale, var(--_lr-time-range-size-scale)) ); --_lr-time-range-size-scale: 1; } :host([size="2xs"]) { --_lr-time-range-size-scale: 0.5; } :host([size="xs"]) { --_lr-time-range-size-scale: 0.6; } :host([size="s"]), :host([size="small"]) { --_lr-time-range-size-scale: 0.75; } :host([size="l"]), :host([size="large"]) { --_lr-time-range-size-scale: 1.2; } :host([size="xl"]) { --_lr-time-range-size-scale: 1.4; } [part="presets"] { display: flex; flex-wrap: wrap; gap: var(--lr-time-range-preset-gap, var(--_lr-time-range-preset-gap)); margin-block-end: var(--lr-space-s); } [part="preset-button"] { display: inline-flex; align-items: center; min-block-size: var(--lr-size-24px); min-inline-size: var(--lr-size-24px); padding: var( --lr-time-range-preset-padding, var(--_lr-time-range-preset-padding) ); border: var(--lr-border-width-thin) solid var(--lr-color-border); border-radius: var( --lr-time-range-preset-radius, var(--_lr-time-range-preset-radius) ); background: var(--lr-color-surface); color: var(--lr-color-text); font: inherit; font-size: var( --lr-time-range-preset-font-size, var(--_lr-time-range-preset-font-size) ); cursor: pointer; transition: var(--lr-transition-interactive); } :where([part="preset-button"]):hover:where(:not(:disabled)) { border-color: var( --lr-time-range-preset-hover-border-color, var(--lr-color-brand) ); } :where([part="preset-button"]):active:where(:not(:disabled)) { border-color: var( --lr-time-range-preset-pressed-border-color, color-mix( in oklab, var(--lr-color-brand), var(--lr-color-mix-partner) var(--lr-color-mix-active) ) ); background: var( --lr-time-range-preset-pressed-bg, color-mix( in oklab, var(--lr-color-surface), var(--lr-color-mix-partner) var(--lr-color-mix-active) ) ); } [part="preset-button"]:focus-visible { ${focusRing} } [part="preset-button"][data-active] { background: var( --lr-time-range-preset-selected-bg, var(--lr-time-range-preset-active-bg, var(--lr-color-brand)) ); border-color: var( --lr-time-range-preset-selected-border-color, var(--lr-time-range-preset-active-border-color, var(--lr-color-brand)) ); color: var( --lr-time-range-preset-selected-color, var(--lr-time-range-preset-active-color, var(--lr-color-on-brand)) ); } [part="preset-button"][data-active]:active:where(:not(:disabled)) { background: color-mix( in oklab, var( --lr-time-range-preset-selected-bg, var(--lr-time-range-preset-active-bg, var(--lr-color-brand)) ), var(--lr-color-mix-partner) var(--lr-color-mix-active) ); border-color: color-mix( in oklab, var( --lr-time-range-preset-selected-border-color, var(--lr-time-range-preset-active-border-color, var(--lr-color-brand)) ), var(--lr-color-mix-partner) var(--lr-color-mix-active) ); } [part="preset-button"]:disabled { cursor: not-allowed; } [part="base"] { position: relative; inline-size: 100%; block-size: var(--lr-time-range-base-size, var(--_lr-time-range-base-size)); display: flex; align-items: center; } [part="track"] { position: absolute; inset-inline: 0; block-size: var( --lr-time-range-track-size, var(--_lr-time-range-track-size) ); border-radius: var(--lr-size-2px); background: var(--lr-color-border); } [part="range"] { position: absolute; block-size: var( --lr-time-range-track-size, var(--_lr-time-range-track-size) ); border-radius: var(--lr-size-2px); background: var(--lr-color-brand); } [part^="handle"] { position: absolute; inline-size: var( --lr-time-range-handle-size, var(--_lr-time-range-handle-size) ); block-size: var( --lr-time-range-handle-size, var(--_lr-time-range-handle-size) ); border-radius: 50%; background: var(--lr-time-range-handle-bg, var(--lr-color-brand)); border: var(--lr-border-width-medium) solid var(--lr-time-range-handle-border-color, var(--lr-color-surface)); box-shadow: var(--lr-shadow-s); transform: translateX(-50%); cursor: grab; touch-action: none; } [part^="handle"][data-at-domain-start] { transform: translateX(0); } [part^="handle"][data-at-domain-end] { transform: translateX(-100%); } :host(:dir(rtl)) [part^="handle"] { transform: translateX(50%); } :host(:dir(rtl)) [part^="handle"][data-at-domain-start] { transform: translateX(0); } :host(:dir(rtl)) [part^="handle"][data-at-domain-end] { transform: translateX(100%); } [part^="handle"]::before { content: ""; position: absolute; inset-block-start: 50%; inset-inline-start: 50%; inline-size: var(--lr-time-range-hit-size, var(--_lr-time-range-hit-size)); block-size: var(--lr-time-range-hit-size, var(--_lr-time-range-hit-size)); transform: translate(-50%, -50%); border-radius: 50%; } [part^="handle"][data-at-domain-start]::before { inset-inline-start: 0; transform: translate(0, -50%); } [part^="handle"][data-at-domain-end]::before { inset-inline-start: 100%; transform: translate(-100%, -50%); } :host(:dir(rtl)) [part^="handle"]:not([data-at-domain-start]):not( [data-at-domain-end] )::before { transform: translate(50%, -50%); } :host(:dir(rtl)) [part^="handle"][data-at-domain-start]::before { transform: translate(0, -50%); } :host(:dir(rtl)) [part^="handle"][data-at-domain-end]::before { transform: translate(100%, -50%); } [part^="handle"]:focus-visible { ${focusRing} } :host(:not(:disabled)) [part^="handle"]:hover { background: var( --lr-time-range-handle-hover-bg, color-mix( in oklab, var(--lr-time-range-handle-bg, var(--lr-color-brand)), var(--lr-color-mix-partner) var(--lr-color-mix-hover) ) ); } :host(:not(:disabled)) [part^="handle"]:active { background: var( --lr-time-range-handle-pressed-bg, color-mix( in oklab, var(--lr-time-range-handle-bg, var(--lr-color-brand)), var(--lr-color-mix-partner) var(--lr-color-mix-active) ) ); cursor: grabbing; } :host(:disabled) { opacity: var(--lr-opacity-disabled); cursor: not-allowed; } :host(:disabled) [part^="handle"] { cursor: not-allowed; } @media (prefers-reduced-motion: reduce) { [part="preset-button"], [part^="handle"], [part="range"] { transition: none !important; } } [part="presets"] { min-inline-size: 0; max-inline-size: 100%; } [part="preset-button"] { max-inline-size: 100%; overflow-wrap: anywhere; } `;export{styles};
+import{focusRing}from"../../../internal/interactive-control.styles.js";import{css}from"lit";import{formControlPresetButton}from"../../../internal/form-control.styles.js";const styles=css` :host { display: block; inline-size: 100%; --_lr-time-range-handle-size: calc( var(--lr-size-14px) * var(--lr-time-range-size-scale, var(--_lr-time-range-size-scale)) ); --_lr-time-range-hit-size: max( var(--lr-size-24px), calc( var(--lr-size-28px) * var(--lr-time-range-size-scale, var(--_lr-time-range-size-scale)) ) ); --_lr-time-range-track-size: calc( var(--lr-size-4px) * var(--lr-time-range-size-scale, var(--_lr-time-range-size-scale)) ); --_lr-time-range-base-size: calc( var(--lr-size-1-5rem) * var(--lr-time-range-size-scale, var(--_lr-time-range-size-scale)) ); --_lr-preset-hover-bg: var(--lr-time-range-preset-hover-bg, var(--lr-color-surface)); --_lr-preset-pressed-base: var(--lr-color-surface); --_lr-preset-hover-border-color: var(--lr-time-range-preset-hover-border-color); --_lr-preset-pressed-bg: var(--lr-time-range-preset-pressed-bg); --_lr-preset-pressed-border-color: var(--lr-time-range-preset-pressed-border-color); --_lr-preset-selected-bg: var(--lr-time-range-preset-selected-bg, var(--lr-time-range-preset-active-bg)); --_lr-preset-selected-border-color: var( --lr-time-range-preset-selected-border-color, var(--lr-time-range-preset-active-border-color) ); --_lr-preset-selected-color: var(--lr-time-range-preset-selected-color, var(--lr-time-range-preset-active-color)); --_lr-time-range-preset-gap: var(--lr-space-xs); --_lr-time-range-preset-radius: var(--lr-radius); --_lr-time-range-preset-padding: calc( var(--lr-space-xs) * var(--lr-time-range-size-scale, var(--_lr-time-range-size-scale)) ) calc( var(--lr-space-s) * var(--lr-time-range-size-scale, var(--_lr-time-range-size-scale)) ); --_lr-time-range-preset-font-size: calc( var(--lr-font-size-sm) * var(--lr-time-range-size-scale, var(--_lr-time-range-size-scale)) ); --_lr-time-range-size-scale: 1; } :host([size="2xs"]) { --_lr-time-range-size-scale: 0.5; } :host([size="xs"]) { --_lr-time-range-size-scale: 0.6; } :host([size="s"]), :host([size="small"]) { --_lr-time-range-size-scale: 0.75; } :host([size="l"]), :host([size="large"]) { --_lr-time-range-size-scale: 1.2; } :host([size="xl"]) { --_lr-time-range-size-scale: 1.4; } [part="presets"] { display: flex; flex-wrap: wrap; gap: var(--lr-time-range-preset-gap, var(--_lr-time-range-preset-gap)); margin-block-end: var(--lr-space-s); } ${formControlPresetButton} [part="preset-button"] { display: inline-flex; align-items: center; min-block-size: var(--lr-size-24px); min-inline-size: var(--lr-size-24px); padding: var( --lr-time-range-preset-padding, var(--_lr-time-range-preset-padding) ); border-radius: var( --lr-time-range-preset-radius, var(--_lr-time-range-preset-radius) ); font-size: var( --lr-time-range-preset-font-size, var(--_lr-time-range-preset-font-size) ); } [part="base"] { position: relative; inline-size: 100%; block-size: var(--lr-time-range-base-size, var(--_lr-time-range-base-size)); display: flex; align-items: center; } [part="track"] { position: absolute; inset-inline: 0; block-size: var( --lr-time-range-track-size, var(--_lr-time-range-track-size) ); border-radius: var(--lr-size-2px); background: var(--lr-color-border); } [part="range"] { position: absolute; block-size: var( --lr-time-range-track-size, var(--_lr-time-range-track-size) ); border-radius: var(--lr-size-2px); background: var(--lr-color-brand); } [part^="handle"] { position: absolute; inline-size: var( --lr-time-range-handle-size, var(--_lr-time-range-handle-size) ); block-size: var( --lr-time-range-handle-size, var(--_lr-time-range-handle-size) ); border-radius: 50%; background: var(--lr-time-range-handle-bg, var(--lr-color-brand)); border: var(--lr-border-width-medium) solid var(--lr-time-range-handle-border-color, var(--lr-color-surface)); box-shadow: var(--lr-shadow-s); transform: translateX(-50%); cursor: grab; touch-action: none; } [part^="handle"][data-at-domain-start] { transform: translateX(0); } [part^="handle"][data-at-domain-end] { transform: translateX(-100%); } :host(:dir(rtl)) [part^="handle"] { transform: translateX(50%); } :host(:dir(rtl)) [part^="handle"][data-at-domain-start] { transform: translateX(0); } :host(:dir(rtl)) [part^="handle"][data-at-domain-end] { transform: translateX(100%); } [part^="handle"]::before { content: ""; position: absolute; inset-block-start: 50%; inset-inline-start: 50%; inline-size: var(--lr-time-range-hit-size, var(--_lr-time-range-hit-size)); block-size: var(--lr-time-range-hit-size, var(--_lr-time-range-hit-size)); transform: translate(-50%, -50%); border-radius: 50%; } [part^="handle"][data-at-domain-start]::before { inset-inline-start: 0; transform: translate(0, -50%); } [part^="handle"][data-at-domain-end]::before { inset-inline-start: 100%; transform: translate(-100%, -50%); } :host(:dir(rtl)) [part^="handle"]:not([data-at-domain-start]):not( [data-at-domain-end] )::before { transform: translate(50%, -50%); } :host(:dir(rtl)) [part^="handle"][data-at-domain-start]::before { transform: translate(0, -50%); } :host(:dir(rtl)) [part^="handle"][data-at-domain-end]::before { transform: translate(100%, -50%); } [part^="handle"]:focus-visible { ${focusRing} } :host(:not(:disabled)) [part^="handle"]:hover { background: var( --lr-time-range-handle-hover-bg, color-mix( in oklab, var(--lr-time-range-handle-bg, var(--lr-color-brand)), var(--lr-color-mix-partner) var(--lr-color-mix-hover) ) ); } :host(:not(:disabled)) [part^="handle"]:active { background: var( --lr-time-range-handle-pressed-bg, color-mix( in oklab, var(--lr-time-range-handle-bg, var(--lr-color-brand)), var(--lr-color-mix-partner) var(--lr-color-mix-active) ) ); cursor: grabbing; } :host(:disabled) { opacity: var(--lr-opacity-disabled); cursor: not-allowed; } :host(:disabled) [part^="handle"] { cursor: not-allowed; } @media (prefers-reduced-motion: reduce) { [part="preset-button"], [part^="handle"], [part="range"] { transition: none !important; } } [part="presets"] { min-inline-size: 0; max-inline-size: 100%; } [part="preset-button"] { max-inline-size: 100%; overflow-wrap: anywhere; } `;export{styles};

package/dist/components/forms/time-zone-picker/time-zone-picker.class.js

@@ -1 +1 @@
-import{__decorate}from"tslib";import{property}from"lit/decorators.js";import{LyraElement}from"../../../internal/lyra-element.js";import{normalizeSelectionValue,snapshotSelectionCatalog}from"../../../internal/selection-catalog.js";import{getTimeZoneCodes}from"../../../time-zones.js";import{LyraCatalogPickerBase}from"../catalog-picker-base.js";import{styles}from"./time-zone-picker.styles.js";import{LYRA_DEFAULT_fieldRequired,LYRA_DEFAULT_notInCatalog,LYRA_DEFAULT_select,LYRA_DEFAULT_timeZonePickerLabel}from"../../../internal/default-strings.generated.js";let defaultEntries;class LyraTimeZonePicker extends LyraCatalogPickerBase{static{this.defaultStrings={...super.defaultStrings,fieldRequired:LYRA_DEFAULT_fieldRequired,notInCatalog:LYRA_DEFAULT_notInCatalog,select:LYRA_DEFAULT_select,timeZonePickerLabel:LYRA_DEFAULT_timeZonePickerLabel}}static{this.styles=[LyraElement.styles,styles]}get timeZones(){return this._timeZones}set timeZones(value){const previous=this._timeZones;this._timeZones=snapshotSelectionCatalog(value,normalizeSelectionValue),this.updateValidity(),this.requestUpdate("timeZones",previous)}get entries(){return this._timeZones??(defaultEntries??=Object.freeze(getTimeZoneCodes().map(code=>Object.freeze({code}))))}get pickerLabel(){return this.localize("timeZonePickerLabel")}resolveRows(){return Object.freeze(this.entries.map(entry=>{const readableName=entry.code.replace(/_/g," "),label=entry.label??readableName;return Object.freeze({...entry,label,searchText:[entry.code,readableName,label].join(" ")})}))}}__decorate([property({attribute:!1})],LyraTimeZonePicker.prototype,"timeZones",null);export{LyraTimeZonePicker};
+import{__decorate}from"tslib";import{property}from"lit/decorators.js";import{LyraElement}from"../../../internal/lyra-element.js";import{normalizeSelectionValue,snapshotSelectionCatalog}from"../../../internal/selection-catalog.js";import{getTimeZoneCodes}from"../../../time-zones.js";import{LyraCatalogPickerBase}from"../catalog-picker-base.js";import{styles}from"./time-zone-picker.styles.js";import{LYRA_DEFAULT_timeZonePickerLabel}from"../../../internal/default-strings/forms.generated.js";import{LYRA_DEFAULT_fieldRequired,LYRA_DEFAULT_notInCatalog,LYRA_DEFAULT_select}from"../../../internal/default-strings/shared.generated.js";let defaultEntries;class LyraTimeZonePicker extends LyraCatalogPickerBase{static{this.defaultStrings={...super.defaultStrings,fieldRequired:LYRA_DEFAULT_fieldRequired,notInCatalog:LYRA_DEFAULT_notInCatalog,select:LYRA_DEFAULT_select,timeZonePickerLabel:LYRA_DEFAULT_timeZonePickerLabel}}static{this.styles=[LyraElement.styles,styles]}get timeZones(){return this._timeZones}set timeZones(value){const previous=this._timeZones;this._timeZones=snapshotSelectionCatalog(value,normalizeSelectionValue),this.updateValidity(),this.requestUpdate("timeZones",previous)}get entries(){return this._timeZones??(defaultEntries??=Object.freeze(getTimeZoneCodes().map(code=>Object.freeze({code}))))}get pickerLabel(){return this.localize("timeZonePickerLabel")}resolveRows(){return Object.freeze(this.entries.map(entry=>{const readableName=entry.code.replace(/_/g," "),label=entry.label??readableName;return Object.freeze({...entry,label,searchText:[entry.code,readableName,label].join(" ")})}))}}__decorate([property({attribute:!1})],LyraTimeZonePicker.prototype,"timeZones",null);export{LyraTimeZonePicker};

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

@@ -63,7 +63,7 @@ readonly option:LyraToggle;}export interface LyraToggleGroupEventMap{'lr-toggle-
 * @status experimental
 * @since 21.0.0
 */
-export declare class LyraToggleGroup extends LyraElement<LyraToggleGroupEventMap>{protected static collectionSupport:import("../../../internal/lyra-element.js").LyraCollectionSupport;protected static readonly immutableEventDetails:readonly string[];protected static readonly identityEventDetailProperties:Readonly<{'lr-toggle-group-toggle-request':readonly string[];}>;static styles:import("lit").CSSResultGroup[];static properties:{value:{attribute:boolean;noAccessor:boolean;};disabled:{type:BooleanConstructor;reflect:boolean;noAccessor:boolean;};};private _disabled;private _selectionMode;private _orientation;private _size?;private _appearance?;private linked;private previousOrder;private runPositions;private syncing;private pendingValue?;private lastFocused?;private lastPressed?;private trackedFocus?;private membershipObserver?;private resizeObserver?;private sizedToggles;private runFrame?;private generation;private definitionSyncQueued;private readonly groupGuard;private readonly link;
+export declare class LyraToggleGroup extends LyraElement<LyraToggleGroupEventMap>{protected static collectionSupport:import("../../../internal/lyra-element.js").LyraCollectionSupport;protected static readonly immutableEventDetails:readonly string[];protected static readonly identityEventDetailProperties:Readonly<{'lr-toggle-group-toggle-request':readonly string[];}>;static styles:import("lit").CSSResultGroup[];static properties:{value:{attribute:boolean;noAccessor:boolean;};disabled:{type:BooleanConstructor;reflect:boolean;noAccessor:boolean;};};private _disabled;private _selectionMode;private _orientation;private _size?;private _appearance?;private linked;private previousOrder;private runPositions;private syncing;private pendingValue?;private lastFocused?;private lastPressed?;private trackedFocus?;private membershipObserver?;private readonly runs;private generation;private definitionSyncQueued;private readonly groupGuard;private readonly link;
 /** `multiple` (zero or more, the default) or `single` (zero or one). Unsupported values fall back
 *  to `multiple`. Switching to `single` silently keeps only the first pressed toggle. */
 get selectionMode():LyraToggleGroupSelectionMode;set selectionMode(next:LyraToggleGroupSelectionMode);
@@ -92,4 +92,4 @@ focus(options?:FocusOptions):void;
 /** Removes focus from whichever owned toggle contains the deep active element. */
 blur():void;
 /** Toggles the current tab-stop toggle through its full user-activation path. */
-click():void;private currentStop;private ownsToggle;private isOwnedToggle;private toggles;private ownedElements;private isAvailable;private sync;private keepOnePressed;private applyValue;private onPressedWritten;private warnOnAmbiguousValues;private computeTabStop;private project;private repairFocus;private queueDefinitionSync;private armMembershipObserver;private observeSizes;private scheduleRunProjection;private measureRuns;private firstToggleInPath;private onToggleRequest;private onToggleChange;private projectedValue;private onKeyDown;private onFocusIn;private onFocusOut;private onClick;private onSlotChange;render():TemplateResult;}declare global{interface HTMLElementTagNameMap{'lr-toggle-group':LyraToggleGroup;}}
+click():void;private currentStop;private ownsToggle;private isOwnedToggle;private toggles;private ownedElements;private isAvailable;private sync;private keepOnePressed;private applyValue;private onPressedWritten;private warnOnAmbiguousValues;private computeTabStop;private project;private repairFocus;private queueDefinitionSync;private armMembershipObserver;private observeSizes;private measureRuns;private firstToggleInPath;private onToggleRequest;private onToggleChange;private projectedValue;private onKeyDown;private onFocusIn;private onFocusOut;private onClick;private onSlotChange;render():TemplateResult;}declare global{interface HTMLElementTagNameMap{'lr-toggle-group':LyraToggleGroup;}}

package/dist/components/forms/toggle-group/toggle-group.class.js

@@ -1,3 +1,3 @@
-import{__decorate}from"tslib";import{collectionSupport}from"../../../internal/collection-snapshot.js";import{html,nothing}from"lit";import{property}from"lit/decorators.js";import{LyraElement}from"../../../internal/lyra-element.js";import{tag}from"../../../internal/prefix.js";import{sizes}from"../../../internal/sizes.styles.js";import{normalizeReflectedOptionalSize,optionalSizeConverter}from"../../../internal/variants.js";import{literalSetConverter,optionalLiteralSetConverter}from"../../../internal/converters.js";import{hostAriaLabel}from"../../../internal/a11y.js";import{isAccessibilitySubtreeExcluded,isAriaTrue}from"../../../internal/accessibility-visibility.js";import{composedParentElement,deepActiveElementIn}from"../../../internal/active-element.js";import{composedContains}from"../../../internal/overlay-stack.js";import{applyComposedFocusRepair,captureComposedFocusRepair,collectComposedFocusTargets}from"../../../internal/focus-navigation.js";import{measureAdjacentRuns}from"../../../internal/adjacent-runs.js";import{devWarnOnce}from"../../../internal/dev-mode-attribute-warning.js";import{requestThenCommit}from"../../../internal/request-commit.js";import{markVetoGuardWrite,VetoWriteGuard}from"../../../internal/veto-write-guard.js";import{styles}from"./toggle-group.styles.js";const SELECTION_MODE=literalSetConverter(["single","multiple"],"multiple"),ORIENTATION=literalSetConverter(["horizontal","vertical"],"horizontal"),APPEARANCE=optionalLiteralSetConverter(["plain","outlined"]),AMBIGUOUS_VALUE_WARNING_KEY="lyra-toggle-group-ambiguous-values",AMBIGUOUS_VALUE_WARNING="<lr-toggle-group>: empty or duplicate toggle values make the group value ambiguous; give each toggle a distinct value.",OBSERVED_ATTRIBUTES=["slot","pressed","disabled","value","hidden","inert","aria-hidden","aria-disabled","class","style"];class LyraToggleGroup extends LyraElement{static{this.collectionSupport=collectionSupport}static{this.immutableEventDetails=Object.freeze(["lr-toggle-group-toggle-request","lr-change"])}static{this.identityEventDetailProperties=Object.freeze({"lr-toggle-group-toggle-request":Object.freeze(["option"])})}static{this.styles=[LyraElement.styles,sizes,styles]}static{this.properties={value:{attribute:!1,noAccessor:!0},disabled:{type:Boolean,reflect:!0,noAccessor:!0}}}get selectionMode(){return this._selectionMode}set selectionMode(next){const normalized=SELECTION_MODE.normalizeReflected(this,"selection-mode",next),old=this._selectionMode;old!==normalized&&(this._selectionMode=normalized,normalized==="single"&&(this.lastPressed=void 0),this.sync(),this.requestUpdate("selectionMode",old))}get orientation(){return this._orientation}set orientation(next){const normalized=ORIENTATION.normalizeReflected(this,"orientation",next),old=this._orientation;old!==normalized&&(this._orientation=normalized,this.requestUpdate("orientation",old))}get size(){return this._size}set size(next){const normalized=normalizeReflectedOptionalSize(this,next),old=this._size;old!==normalized&&(this._size=normalized,this.sync(),this.requestUpdate("size",old))}get appearance(){return this._appearance}set appearance(next){const normalized=APPEARANCE.normalizeReflected(this,"appearance",next),old=this._appearance;old!==normalized&&(this._appearance=normalized,this.sync(),this.requestUpdate("appearance",old))}get disabled(){return this._disabled}set disabled(next){const old=this._disabled;this._disabled=!!next,this.toggleAttribute("disabled",this._disabled),this.sync(),this.requestUpdate("disabled",old)}get value(){const values=new Set;for(const toggle of this.toggles())toggle.pressed&&values.add(toggle.value);return Object.freeze([...values])}set value(next){markVetoGuardWrite(this.groupGuard);const requested=Object.freeze(Array.isArray(next)?next.filter(entry=>typeof entry=="string"):[]),toggles=this.toggles();if(toggles.length===0){this.pendingValue=requested;return}this.pendingValue=void 0,this.applyValue(toggles,requested),this.sync()}constructor(){super(),this._disabled=!1,this._selectionMode="multiple",this._orientation="horizontal",this.linked=new Set,this.previousOrder=[],this.runPositions=new WeakMap,this.syncing=!1,this.sizedToggles=[],this.generation=0,this.definitionSyncQueued=!1,this.groupGuard=new VetoWriteGuard,this.link={owns:toggle=>this.isConnected&&this.ownsToggle(toggle),pressedWritten:toggle=>this.onPressedWritten(toggle)},this.label="",this.onToggleRequest=event=>{const option=event.target;if(!this.isOwnedToggle(option))return;event.stopImmediatePropagation();const proposed=event.detail.pressed;let allowed=!1;requestThenCommit({requestDetail:{value:this.projectedValue(option,proposed),previousValue:this.value,option},emitRequest:(detail,init)=>this.emit("lr-toggle-group-toggle-request",detail,init),guard:this.groupGuard,commit:()=>{allowed=!0}}),allowed||event.preventDefault()},this.onToggleChange=event=>{this.isOwnedToggle(event.target)&&(event.stopImmediatePropagation(),this.emit("lr-change",{value:this.value}))},this.onKeyDown=event=>{if(event.defaultPrevented||event.altKey||event.ctrlKey||event.metaKey)return;const current=this.firstToggleInPath(event);if(!current||!this.isOwnedToggle(current))return;const horizontal=this.orientation==="horizontal",rtl=this.effectiveDirection==="rtl";let move;if(event.key==="Home"?move="first":event.key==="End"?move="last":horizontal&&event.key==="ArrowRight"?move=rtl?"previous":"next":horizontal&&event.key==="ArrowLeft"?move=rtl?"next":"previous":!horizontal&&event.key==="ArrowDown"?move="next":!horizontal&&event.key==="ArrowUp"&&(move="previous"),!move)return;const available=this.toggles().filter(toggle=>this.isAvailable(toggle));if(available.length===0)return;const index=available.indexOf(current),count=available.length;let nextIndex;move==="first"?nextIndex=0:move==="last"?nextIndex=count-1:index<0?nextIndex=move==="next"?0:count-1:nextIndex=move==="next"?(index+1)%count:(index-1+count)%count,event.preventDefault();const next=available[nextIndex];this.lastFocused=next,this.project(this.toggles()),next.focus()},this.onFocusIn=event=>{const toggle=this.firstToggleInPath(event);if(!toggle||!this.isOwnedToggle(toggle))return;const snapshot=captureComposedFocusRepair(toggle,toggle);this.trackedFocus=snapshot?{toggle,snapshot}:void 0,this.lastFocused!==toggle&&(this.lastFocused=toggle,this.project(this.toggles()))},this.onFocusOut=()=>{const tracked=this.trackedFocus;tracked&&queueMicrotask(()=>{if(this.trackedFocus!==tracked)return;const active=deepActiveElementIn(this.ownerDocument);if(active!==null&&composedContains(tracked.toggle,active))return;const lost=active===null||active===this.ownerDocument.body||active===this.ownerDocument.documentElement,vanished=!tracked.toggle.isConnected||!this.isAvailable(tracked.toggle);(!lost||!vanished)&&(this.trackedFocus=void 0)})},this.onClick=event=>{const toggle=this.firstToggleInPath(event);!toggle||!this.isOwnedToggle(toggle)||this.lastFocused===toggle||(this.lastFocused=toggle,this.project(this.toggles()))},this.onSlotChange=()=>{this.sync()},this.addEventListener("lr-toggle-toggle-request",this.onToggleRequest,{capture:!0}),this.addEventListener("lr-change",this.onToggleChange,{capture:!0}),this.addEventListener("keydown",this.onKeyDown),this.addEventListener("focusin",this.onFocusIn),this.addEventListener("focusout",this.onFocusOut),this.addEventListener("click",this.onClick)}connectedCallback(){super.connectedCallback(),this.armMembershipObserver(),this.sync()}disconnectedCallback(){this.generation+=1,this.membershipObserver?.disconnect(),this.membershipObserver=void 0,this.resizeObserver?.disconnect(),this.resizeObserver=void 0,this.sizedToggles=[],this.runFrame!==void 0&&this.ownerDocument?.defaultView?.cancelAnimationFrame(this.runFrame),this.runFrame=void 0,this.definitionSyncQueued=!1,this.pendingValue=void 0,this.trackedFocus=void 0,this.lastPressed=void 0;for(const toggle of this.linked)toggle.leaveGroup(this.link);this.linked=new Set,this.previousOrder=[],super.disconnectedCallback()}updated(changed){super.updated(changed),this.scheduleRunProjection()}focus(options){this.disabled||this.currentStop()?.focus(options)}blur(){this.toggles().find(toggle=>toggle.matches(":focus-within"))?.blur()}click(){this.disabled||this.currentStop()?.click()}currentStop(){return this.computeTabStop(this.toggles())}ownsToggle(element){if(element.localName!==tag("toggle"))return!1;const closest=element.closest;if(typeof closest!="function"||closest.call(element,tag("toggle-group"))!==this)return!1;let topLevel=element;for(;topLevel.parentElement&&topLevel.parentElement!==this;)topLevel=topLevel.parentElement;return topLevel.parentElement!==this?!1:!topLevel.getAttribute("slot")}isOwnedToggle(target){return target?.nodeType===1&&this.ownsToggle(target)&&typeof target.joinGroup=="function"}toggles(){return this.ownedElements().filter(element=>typeof element.joinGroup=="function")}ownedElements(){const querySelectorAll=this.querySelectorAll;return typeof querySelectorAll!="function"?[]:[...querySelectorAll.call(this,tag("toggle"))].filter(element=>this.ownsToggle(element))}isAvailable(toggle){if(this.disabled||toggle.disabled)return!1;for(let current=toggle;current;current=composedParentElement(current)){if(isAccessibilitySubtreeExcluded(current)||isAriaTrue(current.getAttribute("aria-disabled")))return!1;if(current===this)break}return!0}sync(){if(this.syncing||!this.isConnected)return;const elements=this.ownedElements(),toggles=this.toggles();elements.length!==toggles.length&&this.queueDefinitionSync(),this.syncing=!0;try{const current=new Set(toggles);for(const toggle of this.linked)current.has(toggle)||toggle.leaveGroup(this.link);for(const toggle of toggles)this.linked.has(toggle)||toggle.joinGroup(this.link);if(this.linked=current,this.selectionMode==="single"&&this.keepOnePressed(toggles),this.pendingValue!==void 0&&toggles.length>0){const pending=this.pendingValue;this.pendingValue=void 0,this.applyValue(toggles,pending)}}finally{this.syncing=!1}this.warnOnAmbiguousValues(toggles),this.observeSizes(toggles),this.project(toggles),this.scheduleRunProjection()}keepOnePressed(toggles){const pressed=toggles.filter(toggle=>toggle.pressed);if(pressed.length<=1)return;const keep=this.lastPressed&&pressed.includes(this.lastPressed)?this.lastPressed:pressed[0];for(const toggle of pressed)toggle!==keep&&(toggle.pressed=!1)}applyValue(toggles,requested){const wasSyncing=this.syncing;this.syncing=!0;try{if(this.selectionMode==="single"){const wanted=requested.find(value=>toggles.some(toggle=>toggle.value===value)),chosen=wanted===void 0?void 0:toggles.find(toggle=>toggle.value===wanted);for(const toggle of toggles)toggle.pressed=toggle===chosen;chosen&&(this.lastPressed=chosen)}else{const wanted=new Set(requested);for(const toggle of toggles)toggle.pressed=wanted.has(toggle.value)}}finally{this.syncing=wasSyncing}}onPressedWritten(toggle){if(!(this.syncing||!this.isConnected||!this.ownsToggle(toggle))&&!(this.selectionMode!=="single"||!toggle.pressed)){this.lastPressed=toggle,this.syncing=!0;try{for(const other of this.toggles())other!==toggle&&other.pressed&&(other.pressed=!1)}finally{this.syncing=!1}}}warnOnAmbiguousValues(toggles){const seen=new Set;for(const toggle of toggles){if(toggle.value===""||seen.has(toggle.value)){devWarnOnce(AMBIGUOUS_VALUE_WARNING_KEY,AMBIGUOUS_VALUE_WARNING);return}seen.add(toggle.value)}}computeTabStop(toggles){const available=toggles.filter(toggle=>this.isAvailable(toggle));if(available.length===0)return;const anchor=this.lastFocused;if(anchor&&available.includes(anchor))return anchor;if(anchor){const index=this.previousOrder.indexOf(anchor);if(index>=0){const after=this.previousOrder.slice(index+1).find(toggle=>available.includes(toggle)),before=this.previousOrder.slice(0,index).reverse().find(toggle=>available.includes(toggle)),clamped=after??before;if(clamped)return this.lastFocused=clamped,clamped}this.lastFocused=void 0}return available.find(toggle=>toggle.pressed)??available[0]}project(toggles){const stop=this.computeTabStop(toggles);this.previousOrder=[...toggles];const horizontal=this.orientation==="horizontal";for(const toggle of toggles)toggle.setGroupProjection({disabled:this.disabled,tabbable:toggle===stop,size:this.size??null,appearance:this.appearance??null,run:horizontal?this.runPositions.get(toggle)??"standalone":"standalone"});this.repairFocus(toggles,stop)}repairFocus(toggles,stop){const tracked=this.trackedFocus;if(!tracked||toggles.includes(tracked.toggle)&&this.isAvailable(tracked.toggle)||(this.trackedFocus=void 0,!stop))return;const target=collectComposedFocusTargets(stop,{includeRoot:!1,mode:"programmatic"}).elements[0];target&&applyComposedFocusRepair(tracked.snapshot,()=>[target])}queueDefinitionSync(){if(this.definitionSyncQueued)return;const registry=this.ownerDocument?.defaultView?.customElements;if(!registry)return;this.definitionSyncQueued=!0;const generation=this.generation;registry.whenDefined(tag("toggle")).then(()=>{this.generation===generation&&(this.definitionSyncQueued=!1,this.isConnected&&this.sync())})}armMembershipObserver(){const MutationObserverCtor=this.ownerDocument?.defaultView?.MutationObserver;if(!MutationObserverCtor||this.membershipObserver)return;const generation=this.generation,observer=new MutationObserverCtor(()=>{this.membershipObserver!==observer||this.generation!==generation||!this.isConnected||this.sync()});this.membershipObserver=observer,observer.observe(this,{attributes:!0,childList:!0,subtree:!0,attributeFilter:OBSERVED_ATTRIBUTES})}observeSizes(toggles){const ResizeObserverCtor=this.ownerDocument?.defaultView?.ResizeObserver;if(!ResizeObserverCtor||this.resizeObserver&&toggles.length===this.sizedToggles.length&&toggles.every((toggle,index)=>this.sizedToggles[index]===toggle))return;this.sizedToggles=[...toggles],this.resizeObserver?.disconnect();const generation=this.generation,observer=new ResizeObserverCtor(()=>{this.resizeObserver!==observer||this.generation!==generation||this.scheduleRunProjection()});this.resizeObserver=observer,observer.observe(this);for(const toggle of toggles)observer.observe(toggle)}scheduleRunProjection(){const ownerWindow=this.ownerDocument?.defaultView;if(!ownerWindow||!this.isConnected||this.runFrame!==void 0)return;const generation=this.generation;this.runFrame=ownerWindow.requestAnimationFrame(()=>{this.runFrame=void 0,!(this.generation!==generation||!this.isConnected)&&this.measureRuns()})}measureRuns(){const toggles=this.toggles(),positions=this.orientation==="horizontal"?measureAdjacentRuns(toggles,{direction:getComputedStyle(this).direction==="rtl"?"rtl":"ltr",joinable:()=>!0}):toggles.map(()=>"standalone");toggles.forEach((toggle,index)=>this.runPositions.set(toggle,positions[index])),this.project(toggles)}firstToggleInPath(event){for(const target of event.composedPath()){if(target===this)return;if(target.nodeType===1&&target.localName===tag("toggle"))return target}}projectedValue(option,pressed){if(this.selectionMode==="single")return Object.freeze(pressed?[option.value]:[]);const values=new Set;for(const toggle of this.toggles())(toggle===option?pressed:toggle.pressed)&&values.add(toggle.value);return Object.freeze([...values])}render(){const name=hostAriaLabel(this);return html`<div part="base" role="group" aria-label=${name??(this.label||nothing)}>
+import{__decorate}from"tslib";import{collectionSupport}from"../../../internal/collection-snapshot.js";import{html,nothing}from"lit";import{property}from"lit/decorators.js";import{LyraElement}from"../../../internal/lyra-element.js";import{tag}from"../../../internal/prefix.js";import{sizes}from"../../../internal/sizes.styles.js";import{normalizeReflectedOptionalSize,optionalSizeConverter}from"../../../internal/variants.js";import{literalSetConverter,optionalLiteralSetConverter}from"../../../internal/converters.js";import{hostAriaLabel}from"../../../internal/a11y.js";import{isAccessibilitySubtreeExcluded,isAriaTrue}from"../../../internal/accessibility-visibility.js";import{composedParentElement,deepActiveElementIn}from"../../../internal/active-element.js";import{composedContains}from"../../../internal/overlay-stack.js";import{applyComposedFocusRepair,captureComposedFocusRepair,collectComposedFocusTargets}from"../../../internal/focus-navigation.js";import{resolveListMove}from"../../../internal/list-navigation.js";import{AdjacentRunScheduler,measureAdjacentRuns}from"../../../internal/adjacent-runs.js";import{devWarnOnce}from"../../../internal/dev-mode-attribute-warning.js";import{requestThenCommit}from"../../../internal/request-commit.js";import{markVetoGuardWrite,VetoWriteGuard}from"../../../internal/veto-write-guard.js";import{styles}from"./toggle-group.styles.js";const SELECTION_MODE=literalSetConverter(["single","multiple"],"multiple"),ORIENTATION=literalSetConverter(["horizontal","vertical"],"horizontal"),APPEARANCE=optionalLiteralSetConverter(["plain","outlined"]),AMBIGUOUS_VALUE_WARNING_KEY="lyra-toggle-group-ambiguous-values",AMBIGUOUS_VALUE_WARNING="<lr-toggle-group>: empty or duplicate toggle values make the group value ambiguous; give each toggle a distinct value.",OBSERVED_ATTRIBUTES=["slot","pressed","disabled","value","hidden","inert","aria-hidden","aria-disabled","class","style"];class LyraToggleGroup extends LyraElement{static{this.collectionSupport=collectionSupport}static{this.immutableEventDetails=Object.freeze(["lr-toggle-group-toggle-request","lr-change"])}static{this.identityEventDetailProperties=Object.freeze({"lr-toggle-group-toggle-request":Object.freeze(["option"])})}static{this.styles=[LyraElement.styles,sizes,styles]}static{this.properties={value:{attribute:!1,noAccessor:!0},disabled:{type:Boolean,reflect:!0,noAccessor:!0}}}get selectionMode(){return this._selectionMode}set selectionMode(next){const normalized=SELECTION_MODE.normalizeReflected(this,"selection-mode",next),old=this._selectionMode;old!==normalized&&(this._selectionMode=normalized,normalized==="single"&&(this.lastPressed=void 0),this.sync(),this.requestUpdate("selectionMode",old))}get orientation(){return this._orientation}set orientation(next){const normalized=ORIENTATION.normalizeReflected(this,"orientation",next),old=this._orientation;old!==normalized&&(this._orientation=normalized,this.requestUpdate("orientation",old))}get size(){return this._size}set size(next){const normalized=normalizeReflectedOptionalSize(this,next),old=this._size;old!==normalized&&(this._size=normalized,this.sync(),this.requestUpdate("size",old))}get appearance(){return this._appearance}set appearance(next){const normalized=APPEARANCE.normalizeReflected(this,"appearance",next),old=this._appearance;old!==normalized&&(this._appearance=normalized,this.sync(),this.requestUpdate("appearance",old))}get disabled(){return this._disabled}set disabled(next){const old=this._disabled;this._disabled=!!next,this.toggleAttribute("disabled",this._disabled),this.sync(),this.requestUpdate("disabled",old)}get value(){const values=new Set;for(const toggle of this.toggles())toggle.pressed&&values.add(toggle.value);return Object.freeze([...values])}set value(next){markVetoGuardWrite(this.groupGuard);const requested=Object.freeze(Array.isArray(next)?next.filter(entry=>typeof entry=="string"):[]),toggles=this.toggles();if(toggles.length===0){this.pendingValue=requested;return}this.pendingValue=void 0,this.applyValue(toggles,requested),this.sync()}constructor(){super(),this._disabled=!1,this._selectionMode="multiple",this._orientation="horizontal",this.linked=new Set,this.previousOrder=[],this.runPositions=new WeakMap,this.syncing=!1,this.runs=new AdjacentRunScheduler(this,()=>this.measureRuns()),this.generation=0,this.definitionSyncQueued=!1,this.groupGuard=new VetoWriteGuard,this.link={owns:toggle=>this.isConnected&&this.ownsToggle(toggle),pressedWritten:toggle=>this.onPressedWritten(toggle)},this.label="",this.onToggleRequest=event=>{const option=event.target;if(!this.isOwnedToggle(option))return;event.stopImmediatePropagation();const proposed=event.detail.pressed;let allowed=!1;requestThenCommit({requestDetail:{value:this.projectedValue(option,proposed),previousValue:this.value,option},emitRequest:(detail,init)=>this.emit("lr-toggle-group-toggle-request",detail,init),guard:this.groupGuard,commit:()=>{allowed=!0}}),allowed||event.preventDefault()},this.onToggleChange=event=>{this.isOwnedToggle(event.target)&&(event.stopImmediatePropagation(),this.emit("lr-change",{value:this.value}))},this.onKeyDown=event=>{if(event.defaultPrevented||event.altKey||event.ctrlKey||event.metaKey)return;const current=this.firstToggleInPath(event);if(!current||!this.isOwnedToggle(current))return;const available=this.toggles().filter(toggle=>this.isAvailable(toggle)),nextIndex=resolveListMove(event,{count:available.length,current:available.indexOf(current),orientation:this.orientation==="horizontal"?"horizontal":"vertical",direction:this.effectiveDirection});if(nextIndex===null)return;event.preventDefault();const next=available[nextIndex];this.lastFocused=next,this.project(this.toggles()),next.focus()},this.onFocusIn=event=>{const toggle=this.firstToggleInPath(event);if(!toggle||!this.isOwnedToggle(toggle))return;const snapshot=captureComposedFocusRepair(toggle,toggle);this.trackedFocus=snapshot?{toggle,snapshot}:void 0,this.lastFocused!==toggle&&(this.lastFocused=toggle,this.project(this.toggles()))},this.onFocusOut=()=>{const tracked=this.trackedFocus;tracked&&queueMicrotask(()=>{if(this.trackedFocus!==tracked)return;const active=deepActiveElementIn(this.ownerDocument);if(active!==null&&composedContains(tracked.toggle,active))return;const lost=active===null||active===this.ownerDocument.body||active===this.ownerDocument.documentElement,vanished=!tracked.toggle.isConnected||!this.isAvailable(tracked.toggle);(!lost||!vanished)&&(this.trackedFocus=void 0)})},this.onClick=event=>{const toggle=this.firstToggleInPath(event);!toggle||!this.isOwnedToggle(toggle)||this.lastFocused===toggle||(this.lastFocused=toggle,this.project(this.toggles()))},this.onSlotChange=()=>{this.sync()},this.addEventListener("lr-toggle-toggle-request",this.onToggleRequest,{capture:!0}),this.addEventListener("lr-change",this.onToggleChange,{capture:!0}),this.addEventListener("keydown",this.onKeyDown),this.addEventListener("focusin",this.onFocusIn),this.addEventListener("focusout",this.onFocusOut),this.addEventListener("click",this.onClick)}connectedCallback(){super.connectedCallback(),this.armMembershipObserver(),this.sync()}disconnectedCallback(){this.generation+=1,this.membershipObserver?.disconnect(),this.membershipObserver=void 0,this.runs.dispose(),this.definitionSyncQueued=!1,this.pendingValue=void 0,this.trackedFocus=void 0,this.lastPressed=void 0;for(const toggle of this.linked)toggle.leaveGroup(this.link);this.linked=new Set,this.previousOrder=[],super.disconnectedCallback()}updated(changed){super.updated(changed),this.runs.schedule()}focus(options){this.disabled||this.currentStop()?.focus(options)}blur(){this.toggles().find(toggle=>toggle.matches(":focus-within"))?.blur()}click(){this.disabled||this.currentStop()?.click()}currentStop(){return this.computeTabStop(this.toggles())}ownsToggle(element){if(element.localName!==tag("toggle"))return!1;const closest=element.closest;if(typeof closest!="function"||closest.call(element,tag("toggle-group"))!==this)return!1;let topLevel=element;for(;topLevel.parentElement&&topLevel.parentElement!==this;)topLevel=topLevel.parentElement;return topLevel.parentElement!==this?!1:!topLevel.getAttribute("slot")}isOwnedToggle(target){return target?.nodeType===1&&this.ownsToggle(target)&&typeof target.joinGroup=="function"}toggles(){return this.ownedElements().filter(element=>typeof element.joinGroup=="function")}ownedElements(){const querySelectorAll=this.querySelectorAll;return typeof querySelectorAll!="function"?[]:[...querySelectorAll.call(this,tag("toggle"))].filter(element=>this.ownsToggle(element))}isAvailable(toggle){if(this.disabled||toggle.disabled)return!1;for(let current=toggle;current;current=composedParentElement(current)){if(isAccessibilitySubtreeExcluded(current)||isAriaTrue(current.getAttribute("aria-disabled")))return!1;if(current===this)break}return!0}sync(){if(this.syncing||!this.isConnected)return;const elements=this.ownedElements(),toggles=this.toggles();elements.length!==toggles.length&&this.queueDefinitionSync(),this.syncing=!0;try{const current=new Set(toggles);for(const toggle of this.linked)current.has(toggle)||toggle.leaveGroup(this.link);for(const toggle of toggles)this.linked.has(toggle)||toggle.joinGroup(this.link);if(this.linked=current,this.selectionMode==="single"&&this.keepOnePressed(toggles),this.pendingValue!==void 0&&toggles.length>0){const pending=this.pendingValue;this.pendingValue=void 0,this.applyValue(toggles,pending)}}finally{this.syncing=!1}this.warnOnAmbiguousValues(toggles),this.observeSizes(toggles),this.project(toggles),this.runs.schedule()}keepOnePressed(toggles){const pressed=toggles.filter(toggle=>toggle.pressed);if(pressed.length<=1)return;const keep=this.lastPressed&&pressed.includes(this.lastPressed)?this.lastPressed:pressed[0];for(const toggle of pressed)toggle!==keep&&(toggle.pressed=!1)}applyValue(toggles,requested){const wasSyncing=this.syncing;this.syncing=!0;try{if(this.selectionMode==="single"){const wanted=requested.find(value=>toggles.some(toggle=>toggle.value===value)),chosen=wanted===void 0?void 0:toggles.find(toggle=>toggle.value===wanted);for(const toggle of toggles)toggle.pressed=toggle===chosen;chosen&&(this.lastPressed=chosen)}else{const wanted=new Set(requested);for(const toggle of toggles)toggle.pressed=wanted.has(toggle.value)}}finally{this.syncing=wasSyncing}}onPressedWritten(toggle){if(!(this.syncing||!this.isConnected||!this.ownsToggle(toggle))&&!(this.selectionMode!=="single"||!toggle.pressed)){this.lastPressed=toggle,this.syncing=!0;try{for(const other of this.toggles())other!==toggle&&other.pressed&&(other.pressed=!1)}finally{this.syncing=!1}}}warnOnAmbiguousValues(toggles){const seen=new Set;for(const toggle of toggles){if(toggle.value===""||seen.has(toggle.value)){devWarnOnce(AMBIGUOUS_VALUE_WARNING_KEY,AMBIGUOUS_VALUE_WARNING);return}seen.add(toggle.value)}}computeTabStop(toggles){const available=toggles.filter(toggle=>this.isAvailable(toggle));if(available.length===0)return;const anchor=this.lastFocused;if(anchor&&available.includes(anchor))return anchor;if(anchor){const index=this.previousOrder.indexOf(anchor);if(index>=0){const after=this.previousOrder.slice(index+1).find(toggle=>available.includes(toggle)),before=this.previousOrder.slice(0,index).reverse().find(toggle=>available.includes(toggle)),clamped=after??before;if(clamped)return this.lastFocused=clamped,clamped}this.lastFocused=void 0}return available.find(toggle=>toggle.pressed)??available[0]}project(toggles){const stop=this.computeTabStop(toggles);this.previousOrder=[...toggles];const horizontal=this.orientation==="horizontal";for(const toggle of toggles)toggle.setGroupProjection({disabled:this.disabled,tabbable:toggle===stop,size:this.size??null,appearance:this.appearance??null,run:horizontal?this.runPositions.get(toggle)??"standalone":"standalone"});this.repairFocus(toggles,stop)}repairFocus(toggles,stop){const tracked=this.trackedFocus;if(!tracked||toggles.includes(tracked.toggle)&&this.isAvailable(tracked.toggle)||(this.trackedFocus=void 0,!stop))return;const target=collectComposedFocusTargets(stop,{includeRoot:!1,mode:"programmatic"}).elements[0];target&&applyComposedFocusRepair(tracked.snapshot,()=>[target])}queueDefinitionSync(){if(this.definitionSyncQueued)return;const registry=this.ownerDocument?.defaultView?.customElements;if(!registry)return;this.definitionSyncQueued=!0;const generation=this.generation;registry.whenDefined(tag("toggle")).then(()=>{this.generation===generation&&(this.definitionSyncQueued=!1,this.isConnected&&this.sync())})}armMembershipObserver(){const MutationObserverCtor=this.ownerDocument?.defaultView?.MutationObserver;if(!MutationObserverCtor||this.membershipObserver)return;const generation=this.generation,observer=new MutationObserverCtor(()=>{this.membershipObserver!==observer||this.generation!==generation||!this.isConnected||this.sync()});this.membershipObserver=observer,observer.observe(this,{attributes:!0,childList:!0,subtree:!0,attributeFilter:OBSERVED_ATTRIBUTES})}observeSizes(toggles){this.runs.observe(toggles)}measureRuns(){const toggles=this.toggles(),positions=this.orientation==="horizontal"?measureAdjacentRuns(toggles,{direction:getComputedStyle(this).direction==="rtl"?"rtl":"ltr",joinable:()=>!0}):toggles.map(()=>"standalone");toggles.forEach((toggle,index)=>this.runPositions.set(toggle,positions[index])),this.project(toggles)}firstToggleInPath(event){for(const target of event.composedPath()){if(target===this)return;if(target.nodeType===1&&target.localName===tag("toggle"))return target}}projectedValue(option,pressed){if(this.selectionMode==="single")return Object.freeze(pressed?[option.value]:[]);const values=new Set;for(const toggle of this.toggles())(toggle===option?pressed:toggle.pressed)&&values.add(toggle.value);return Object.freeze([...values])}render(){const name=hostAriaLabel(this);return html`<div part="base" role="group" aria-label=${name??(this.label||nothing)}>
       <slot @slotchange=${this.onSlotChange}></slot>
     </div>`}}__decorate([property({attribute:"selection-mode",reflect:!0,converter:SELECTION_MODE})],LyraToggleGroup.prototype,"selectionMode",null),__decorate([property({reflect:!0,converter:ORIENTATION})],LyraToggleGroup.prototype,"orientation",null),__decorate([property({reflect:!0,converter:optionalSizeConverter})],LyraToggleGroup.prototype,"size",null),__decorate([property({reflect:!0,converter:APPEARANCE})],LyraToggleGroup.prototype,"appearance",null),__decorate([property()],LyraToggleGroup.prototype,"label",void 0);export{LyraToggleGroup};

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

@@ -1,4 +1,4 @@
-import{type PropertyValues,type TemplateResult}from'lit';import{LyraElement}from'../../../internal/lyra-element.js';import type{LyraSize}from'../../../internal/variants.js';import{type FormOwnerValue}from'../../../internal/form-associated.js';export interface LyraTokenInputEventMap{'lr-invalid':CustomEvent<null>;input:InputEvent;change:Event;focus:FocusEvent;blur:FocusEvent;'lr-input':CustomEvent<Readonly<{value:readonly string[];previousValue:readonly string[];}>>;'lr-change':CustomEvent<Readonly<{value:readonly string[];previousValue:readonly string[];}>>;
+import{type PropertyValues,type TemplateResult}from'lit';import{LyraFormControlElement}from'../../../internal/form-control-element.js';import type{LyraSize}from'../../../internal/variants.js';import{type FormOwnerValue}from'../../../internal/form-associated.js';export interface LyraTokenInputEventMap{'lr-invalid':CustomEvent<null>;input:InputEvent;change:Event;focus:FocusEvent;blur:FocusEvent;'lr-input':CustomEvent<Readonly<{value:readonly string[];previousValue:readonly string[];}>>;'lr-change':CustomEvent<Readonly<{value:readonly string[];previousValue:readonly string[];}>>;
 /** Cancelable proposal to add one or more tokens in a single commit. */
 'lr-token-add-request':CustomEvent<Readonly<{value:string;values:readonly string[];}>>;
 /** Cancelable proposal to remove one token. */
@@ -133,7 +133,7 @@ import{type PropertyValues,type TemplateResult}from'lit';import{LyraElement}from
 * @status stable
 * @since 4.0.0
 */
-export declare class LyraTokenInput extends LyraElement<LyraTokenInputEventMap>{static formAssociated:boolean;static styles:import("lit").CSSResultGroup[];static properties:{customError:{attribute:string;reflect:boolean;noAccessor:boolean;};name:{reflect:boolean;noAccessor:boolean;};required:{type:BooleanConstructor;reflect:boolean;noAccessor:boolean;};disabled:{type:BooleanConstructor;reflect:boolean;noAccessor:boolean;};readonly:{type:BooleanConstructor;reflect:boolean;noAccessor:boolean;};defaultValue:{attribute:string;reflect:boolean;useDefault:boolean;converter:{fromAttribute:(value:string|null)=>readonly string[]|null;toAttribute:(value:readonly string[]|null)=>string|null;};noAccessor:boolean;};};label:string;hint:string;errorText:string;placeholder:string;
+export declare class LyraTokenInput extends LyraFormControlElement<LyraTokenInputEventMap>{static formAssociated:boolean;static styles:import("lit").CSSResultGroup[];static properties:{customError:{attribute:string;reflect:boolean;noAccessor:boolean;};name:{reflect:boolean;noAccessor:boolean;};required:{type:BooleanConstructor;reflect:boolean;noAccessor:boolean;};disabled:{type:BooleanConstructor;reflect:boolean;noAccessor:boolean;};readonly:{type:BooleanConstructor;reflect:boolean;noAccessor:boolean;};defaultValue:{attribute:string;reflect:boolean;useDefault:boolean;converter:{fromAttribute:(value:string|null)=>readonly string[]|null;toAttribute:(value:readonly string[]|null)=>string|null;};noAccessor:boolean;};};label:string;hint:string;errorText:string;placeholder:string;
 /** Forwarded to both native text inputs using the native explicit `"true"`/`"false"`
 *  attribute vocabulary. */
 spellcheck:boolean;
@@ -170,7 +170,7 @@ get name():string;set name(next:string);get required():boolean;set required(next
 *  blocks every other value-committing affordance (adding, removing, or editing a token) while
 *  leaving the control, its tokens, and its remove buttons focusable and its current value
 *  submitted with the form -- mirroring `lr-input`'s `readonly`. */
-get readonly():boolean;set readonly(next:boolean);constructor();connectedCallback():void;disconnectedCallback():void;adoptedCallback():void;get form():HTMLFormElement|null;set form(owner:FormOwnerValue);getForm():HTMLFormElement|null;get labels():NodeList;get validity():ValidityState;get validationMessage():string;get willValidate():boolean;
+get readonly():boolean;set readonly(next:boolean);constructor();connectedCallback():void;disconnectedCallback():void;adoptedCallback():void;get form():HTMLFormElement|null;set form(owner:FormOwnerValue);
 /** Effective disabled state: this element's own `disabled` OR an ancestor
 *  `<fieldset disabled>`'s inherited state -- mirrors native `<input>`, whose
 *  own `disabled` IDL property/attribute is never mutated by a fieldset. */