@aceshooting/lyra-ui 14.1.0 → 14.2.0

package/dist/components/forms/date-picker/date-input.styles.js

@@ -1 +1 @@
-import{css}from"lit";import{formControlRequiredMarker}from"../../../internal/form-control.styles.js";const styles=css` :host { display: block; --_lr-date-input-padding-block: var(--lr-space-xs); --_lr-date-input-padding-inline: var(--lr-space-s); --_lr-date-input-font-size: inherit; --_lr-date-input-gap: var(--lr-space-xs); --_lr-date-input-radius: var(--lr-form-control-radius); --_lr-date-input-fill: var(--lr-color-surface); --_lr-date-input-border-color: var(--lr-color-border); --_lr-date-input-control-min-height: var(--lr-form-control-height); } :host([pill]) { --_lr-date-input-radius: var(--lr-radius-pill); } [part="date-input"], [part="base"] { display: block; min-inline-size: 0; max-inline-size: 100%; } :host([appearance="filled"]) { --_lr-date-input-border-color: transparent; --_lr-date-input-fill: var(--lr-color-surface-raised); } :host([appearance="filled-outlined"]) { --_lr-date-input-fill: var(--lr-color-surface-raised); } :host([size="2xs"]) { --_lr-date-input-padding-block: var(--lr-size-0-0625rem); --_lr-date-input-padding-inline: var(--lr-space-2xs); --_lr-date-input-font-size: var(--lr-font-size-2xs); } :host([size="xs"]) { --_lr-date-input-padding-block: var(--lr-size-0-125rem); --_lr-date-input-padding-inline: var(--lr-space-xs); --_lr-date-input-font-size: var(--lr-font-size-xs); } :host([size="s"]), :host([size="small"]) { --_lr-date-input-padding-block: var(--lr-space-xs); --_lr-date-input-padding-inline: var(--lr-space-xs); --_lr-date-input-font-size: var(--lr-font-size-sm); } :host([size="l"]), :host([size="large"]) { --_lr-date-input-padding-block: var(--lr-space-m); --_lr-date-input-padding-inline: var(--lr-space-m); --_lr-date-input-font-size: var(--lr-font-size-lg); } :host([size="xl"]) { --_lr-date-input-padding-block: var(--lr-space-l); --_lr-date-input-padding-inline: var(--lr-space-l); --_lr-date-input-font-size: var(--lr-font-size-xl); } [part="form-control-label"] { display: block; margin-block-end: var(--lr-space-xs); font-size: var(--lr-font-size-md-sm); font-weight: var(--lr-font-weight-semibold); } [part="form-control-label"][hidden] { display: none; } ${formControlRequiredMarker} [part='input-wrapper'] { display: flex; align-items: center; gap: var(--lr-date-input-gap, var(--_lr-date-input-gap)); inline-size: 100%; min-inline-size: 0; max-inline-size: 100%; box-sizing: border-box; min-block-size: var( --lr-date-input-control-height, var( --lr-date-input-control-min-height, var(--_lr-date-input-control-min-height) ) ); block-size: var(--lr-date-input-control-height, auto); padding: var( --lr-date-input-padding-block, var(--_lr-date-input-padding-block) ) var(--lr-date-input-padding-inline, var(--_lr-date-input-padding-inline)); border: var(--lr-border-width-thin) solid var(--_lr-date-input-border-color); border-radius: var(--lr-date-input-radius, var(--_lr-date-input-radius)); background: var(--_lr-date-input-fill); } [part="input-wrapper"]:focus-within { border-color: var( --lr-date-input-focus-border-color, var(--lr-color-brand) ); } :host(:disabled) [part="input-wrapper"] { opacity: var(--lr-opacity-disabled); cursor: not-allowed; } [part="input"] { flex: 1 1 auto; min-inline-size: 0; border: none; outline: none; background: transparent; color: inherit; font: inherit; font-size: var(--lr-date-input-font-size, var(--_lr-date-input-font-size)); } [part="form-control-input"], [part="segment"] { display: contents; } [part="input"]::placeholder { color: var(--lr-date-input-placeholder-color, var(--lr-color-text-quiet)); } [part="start"], [part="end"] { flex: 0 1 40%; display: inline-flex; min-inline-size: 0; max-inline-size: 40%; align-items: center; color: var(--lr-color-text-quiet); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } [part="start"][hidden], [part="end"][hidden] { display: none; } [part="clear-button"], [part="expand-button"] { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; border: none; background: none; cursor: pointer; color: var(--lr-color-text-quiet); padding: var(--lr-space-xs); min-inline-size: var(--lr-icon-button-size); min-block-size: var(--lr-icon-button-size); line-height: var(--lr-line-height-none); font-size: var(--lr-font-size-m); } [part="clear-button"]:hover:not(:disabled), [part="expand-button"]:hover:not(:disabled) { color: var(--lr-date-input-action-hover-color, var(--lr-color-text)); background: var(--lr-date-input-action-hover-bg, transparent); border-radius: var( --lr-date-input-action-hover-radius, var(--lr-date-input-radius, var(--_lr-date-input-radius)) ); } [part="clear-button"]:active:not(:disabled), [part="expand-button"]:active:not(:disabled) { color: var( --lr-date-input-action-active-color, var(--lr-date-input-action-hover-color, var(--lr-color-text)) ); background: var( --lr-date-input-action-active-bg, color-mix( in oklab, var(--lr-color-surface), var(--lr-color-mix-partner) var(--lr-color-mix-active) ) ); border-radius: var( --lr-date-input-action-active-radius, var(--lr-date-input-radius, var(--_lr-date-input-radius)) ); } [part="clear-button"]:focus-visible, [part="expand-button"]:focus-visible { outline: var(--lr-focus-ring-width) solid var(--lr-focus-ring-color); outline-offset: var(--lr-focus-ring-offset); } [part="popup"] { position: fixed; z-index: var(--lr-overlay-stack-index, var(--lr-layer-dropdown)); max-inline-size: min( var(--lr-popover-viewport-clamp), var(--lr-size-28rem) ); visibility: hidden; opacity: 0; transform: translateY(var(--lr-size-neg-0-25rem)); transition-property: opacity, transform, visibility; transition-duration: var(--hide-duration, var(--lr-transition-fast)); } :host([open]) [part="popup"] { visibility: visible; opacity: 1; transform: translateY(0); transition-duration: var(--show-duration, var(--lr-transition-fast)); } @media (prefers-reduced-motion: reduce) { [part="popup"] { transition: none !important; } } [part="hint"] { margin-block-start: var(--lr-space-xs); font-size: var(--lr-font-size-sm); color: var(--lr-color-text-quiet); } [part="hint"][hidden] { display: none; } [part="error"] { margin-block-start: var(--lr-space-xs); font-size: var(--lr-font-size-sm); color: var(--lr-color-danger); } [part="error"][hidden] { display: none; } [part="form-control"], [part="form-control-label"], [part="hint"], [part="error"] { min-inline-size: 0; max-inline-size: 100%; overflow-wrap: anywhere; } `;export{styles};
+import{css}from"lit";import{formControlRequiredMarker}from"../../../internal/form-control.styles.js";const styles=css` :host { display: block; --_lr-date-input-padding-block: var(--lr-form-control-padding-block); --_lr-date-input-padding-inline: var(--lr-form-control-padding-inline); --_lr-date-input-font-size: var(--lr-form-control-font-size); --_lr-date-input-gap: var(--lr-space-xs); --_lr-date-input-radius: var(--lr-form-control-radius); --_lr-date-input-fill: var(--lr-color-surface); --_lr-date-input-border-color: var(--lr-color-border); --_lr-date-input-control-min-height: var(--lr-form-control-height); } :host([pill]) { --_lr-date-input-radius: var(--lr-radius-pill); } [part="date-input"], [part="base"] { display: block; min-inline-size: 0; max-inline-size: 100%; } :host([appearance="filled"]) { --_lr-date-input-border-color: transparent; --_lr-date-input-fill: var(--lr-color-surface-raised); } :host([appearance="filled-outlined"]) { --_lr-date-input-fill: var(--lr-color-surface-raised); } [part="form-control-label"] { display: block; margin-block-end: var(--lr-space-xs); font-size: var(--lr-font-size-md-sm); font-weight: var(--lr-font-weight-semibold); } [part="form-control-label"][hidden] { display: none; } ${formControlRequiredMarker} [part='input-wrapper'] { display: flex; align-items: center; gap: var(--lr-date-input-gap, var(--_lr-date-input-gap)); inline-size: 100%; min-inline-size: 0; max-inline-size: 100%; box-sizing: border-box; min-block-size: var( --lr-date-input-control-height, var( --lr-date-input-control-min-height, var(--_lr-date-input-control-min-height) ) ); block-size: var(--lr-date-input-control-height, auto); padding-inline: var(--lr-date-input-padding-inline, var(--_lr-date-input-padding-inline)); border: var(--lr-border-width-thin) solid var(--_lr-date-input-border-color); border-radius: var(--lr-date-input-radius, var(--_lr-date-input-radius)); background: var(--_lr-date-input-fill); } [part="input-wrapper"]:focus-within { border-color: var( --lr-date-input-focus-border-color, var(--lr-color-brand) ); } :host(:disabled) [part="input-wrapper"] { opacity: var(--lr-opacity-disabled); cursor: not-allowed; } [part="input"] { flex: 1 1 auto; min-inline-size: 0; padding-block: var(--lr-date-input-padding-block, var(--_lr-date-input-padding-block)); border: none; outline: none; background: transparent; color: inherit; font: inherit; font-size: var(--lr-date-input-font-size, var(--_lr-date-input-font-size)); } [part="form-control-input"], [part="segment"] { display: contents; } [part="input"]::placeholder { color: var(--lr-date-input-placeholder-color, var(--lr-color-text-quiet)); } [part="start"], [part="end"] { flex: 0 1 40%; display: inline-flex; min-inline-size: 0; max-inline-size: 40%; align-items: center; color: var(--lr-color-text-quiet); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } [part="start"][hidden], [part="end"][hidden] { display: none; } [part="clear-button"], [part="expand-button"] { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; border: none; background: none; cursor: pointer; color: var(--lr-color-text-quiet); padding: var(--lr-space-xs); min-inline-size: max(var(--lr-size-24px), min(var(--lr-icon-button-size), calc(var(--lr-form-control-height) - 2 * var(--lr-border-width-thin)))); min-block-size: max(var(--lr-size-24px), min(var(--lr-icon-button-size), calc(var(--lr-form-control-height) - 2 * var(--lr-border-width-thin)))); line-height: var(--lr-line-height-none); font-size: var(--lr-font-size-m); } [part='expand-icon'], [part='clear-button'] > span { display: inline-flex; align-items: center; } [part="clear-button"]:hover:not(:disabled), [part="expand-button"]:hover:not(:disabled) { color: var(--lr-date-input-action-hover-color, var(--lr-color-text)); background: var(--lr-date-input-action-hover-bg, transparent); border-radius: var( --lr-date-input-action-hover-radius, var(--lr-date-input-radius, var(--_lr-date-input-radius)) ); } [part="clear-button"]:active:not(:disabled), [part="expand-button"]:active:not(:disabled) { color: var( --lr-date-input-action-active-color, var(--lr-date-input-action-hover-color, var(--lr-color-text)) ); background: var( --lr-date-input-action-active-bg, color-mix( in oklab, var(--lr-color-surface), var(--lr-color-mix-partner) var(--lr-color-mix-active) ) ); border-radius: var( --lr-date-input-action-active-radius, var(--lr-date-input-radius, var(--_lr-date-input-radius)) ); } [part="clear-button"]:focus-visible, [part="expand-button"]:focus-visible { outline: var(--lr-focus-ring-width) solid var(--lr-focus-ring-color); outline-offset: var(--lr-focus-ring-offset); } [part="popup"] { position: fixed; z-index: var(--lr-overlay-stack-index, var(--lr-layer-dropdown)); max-inline-size: min( var(--lr-popover-viewport-clamp), var(--lr-size-28rem) ); visibility: hidden; opacity: 0; transform: translateY(var(--lr-size-neg-0-25rem)); transition-property: opacity, transform, visibility; transition-duration: var(--hide-duration, var(--lr-transition-fast)); } :host([open]) [part="popup"] { visibility: visible; opacity: 1; transform: translateY(0); transition-duration: var(--show-duration, var(--lr-transition-fast)); } @media (prefers-reduced-motion: reduce) { [part="popup"] { transition: none !important; } } [part="hint"] { margin-block-start: var(--lr-space-xs); font-size: var(--lr-font-size-sm); color: var(--lr-color-text-quiet); } [part="hint"][hidden] { display: none; } [part="error"] { margin-block-start: var(--lr-space-xs); font-size: var(--lr-font-size-sm); color: var(--lr-color-danger); } [part="error"][hidden] { display: none; } [part="form-control"], [part="form-control-label"], [part="hint"], [part="error"] { min-inline-size: 0; max-inline-size: 100%; overflow-wrap: anywhere; } `;export{styles};

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

@@ -24,6 +24,8 @@ readonly country?:string;}
 *  no per-row flag override available) or `{ tag, label, country }` rows for custom
 *  labels/ordering/subsets/flag overrides. */
 export type LyraLocaleCatalog=readonly string[]|readonly LyraLocaleEntry[];
+/** Visible content of the locale picker's trigger; option labels are always retained. */
+export type LyraLocaleTriggerDisplay='flag'|'label'|'flag-label';
 /** `lr-change`'s detail. `direction` is the picked locale's writing direction, resolved through
 *  `getLyraLocaleDirection()` — the component never applies it (see the class doc), it just hands
 *  the host the one fact it would otherwise need its own locale table to know. */
@@ -91,7 +93,9 @@ export interface LyraLocaleChangeDetail{value:string;previousValue:string;direct
 *   the accessible name — once `label` is non-empty).
 * @csspart trigger - The trigger button (positioning anchor).
 * @csspart trigger-flag - The trigger's leading `<lr-flag>` for the current value (present only
-*   while `showFlags` is on).
+*   while `showFlags` is on and `triggerDisplay` is not `label`).
+* @csspart trigger-label - The current locale's label. Visually hidden in flag-only mode but
+*   retained as the trigger's accessible current-value description.
 * @csspart listbox - The options popover.
 * @csspart option - An option row.
 * @csspart option-flag - The row's leading `<lr-flag>` (present only while `showFlags` is on).
@@ -149,7 +153,13 @@ private _locales?;get locales():LyraLocaleCatalog|undefined;set locales(next:Lyr
 /** Each row's leading `<lr-flag>`. The composition recipe this component supersedes
 *  (`lr-popover` + `lr-flag`) already pairs a locale switcher with flags by convention --
 *  defaulting to `true` keeps that continuity; set `false` for text-only rows. */
-showFlags:boolean;label:string;hint:string;errorText:string;
+showFlags:boolean;
+/** Trigger content. The default flag-label preserves the label, optional flag and chevron.
+* Flag mode centers the flag in a square based on the trigger height, with a 24px minimum,
+* and keeps the current language accessible while hiding the visible label and chevron.
+* Label mode omits only the trigger flag. showFlags=false always keeps the visible label.
+* Option labels/endonyms and selection behavior are unchanged. */
+triggerDisplay:LyraLocaleTriggerDisplay;label:string;hint:string;errorText:string;
 /** Whether the option popup is open. Disabled controls reject direct reopen attempts, including
 * the synchronous fieldset cascade before `formDisabledCallback()` runs. */
 get open():boolean;set open(next:boolean);

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

@@ -1,4 +1,4 @@
-var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3?target:desc===null?desc=Object.getOwnPropertyDescriptor(target,key):desc,d;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")r=Reflect.decorate(decorators,target,key,desc);else for(var i=decorators.length-1;i>=0;i--)(d=decorators[i])&&(r=(c<3?d(r):c>3?d(target,key,r):d(target,key))||r);return c>3&&r&&Object.defineProperty(target,key,r),r};import{acquireNativeControlDescription}from"../../../internal/native-control-description.js";import{html,nothing}from"lit";import{property,query,state}from"lit/decorators.js";import{LyraElement}from"../../../internal/lyra-element.js";import{installFormControlLabelSupport}from"../../../internal/form-control-labels.js";installFormControlLabelSupport();import{deferredPlace as place}from"../../../internal/anchored-overlay-runtime.js";import{hostAriaLabel,nextId}from"../../../internal/a11y.js";import{chevronIcon}from"../../../internal/icons.js";import{AnchoredValidityController,VALIDITY_ANCHOR}from"../../../internal/anchored-validity.js";import{syncValidityStates}from"../../../internal/custom-states.js";import{activateNonmodalOverlay}from"../../../internal/nonmodal-overlay-manager.js";import{getLyraLocaleDirection,getRegisteredLyraLocales,subscribeLyraLocaleRegistry,setLyraLocale}from"../../../internal/localization-runtime.js";import{localeNativeName}from"../../media/flag/language-map.js";import{sizes}from"../../../internal/sizes.styles.js";import{styles}from"./locale-picker.styles.js";import{declaredDefaultConverter,trueDefaultBooleanFromAttributeConverter as trueDefaultBooleanConverter}from"../../../internal/converters.js";import{attachInternalsSafely,getFormOwner,installCustomErrorProperty,isBarredFromValidation,setFormOwner}from"../../../internal/form-associated.js";import{installInvalidEventAlias}from"../../../internal/invalid-event-alias.js";import{relayNativeEvent}from"../../../internal/native-event-relay.js";import{LYRA_DEFAULT_fieldRequired,LYRA_DEFAULT_localePickerLabel,LYRA_DEFAULT_localePickerRequired}from"../../../internal/default-strings.generated.js";const MAX_LOCALE_ENTRIES=512;function snapshotLocaleCatalog(source){if(!Array.isArray(source))return Object.freeze([]);const rows=[];for(let index=0;index<Math.min(source.length,MAX_LOCALE_ENTRIES);index+=1)try{const raw=source[index];if(typeof raw=="string"){raw.length>0&&rows.push(raw);continue}if(raw===null||typeof raw!="object")continue;const candidate=raw,tag=candidate.tag,label=candidate.label,country=candidate.country;if(typeof tag!="string"||tag.length===0||label!==void 0&&typeof label!="string"||country!==void 0&&typeof country!="string")continue;rows.push(Object.freeze({tag,...label===void 0?{}:{label},...country===void 0?{}:{country}}))}catch{}return Object.freeze(rows)}class LyraLocalePicker extends LyraElement{static{this.defaultStrings={...super.defaultStrings,fieldRequired:LYRA_DEFAULT_fieldRequired,localePickerLabel:LYRA_DEFAULT_localePickerLabel,localePickerRequired:LYRA_DEFAULT_localePickerRequired}}static{this.formAssociated=!0}static{this.styles=[LyraElement.styles,sizes,styles]}static{this.properties={customError:{attribute:"custom-error",reflect:!0,noAccessor:!0},disabled:{type:Boolean,reflect:!0,noAccessor:!0},required:{type:Boolean,reflect:!0,noAccessor:!0},value:{attribute:!1,noAccessor:!0},defaultValue:{attribute:"value",reflect:!0,useDefault:!0,noAccessor:!0},name:{reflect:!0,noAccessor:!0}}}get locales(){return this._locales}set locales(next){const previous=this._locales;this._locales=next===void 0?void 0:snapshotLocaleCatalog(next),this.requestUpdate("locales",previous)}get open(){return this._open}set open(next){const old=this._open,liveDisabled=this.effectiveDisabled||typeof this.matches=="function"&&this.matches(":disabled");if(this._open=!!next&&!liveDisabled,this._open===old){next&&!this._open&&this.hasAttribute("open")&&this.removeAttribute("open");return}this._open||(this.activeIndex=-1),this.requestUpdate("open",old)}constructor(){super(),this.showFlags=!0,this.label="",this.hint="",this.errorText="",this.size="m",this.activeIndex=-1,this.touched=!1,this.hasHintSlot=!1,this.hasErrorSlot=!1,this.hasLabelSlot=!1,this.registryTick=0,this.listId=nextId("locale-picker-list"),this.controlId=nextId("locale-picker-control"),this._value="",this._open=!1,this._fieldsetDisabled=!1,this._name="",this._disabled=!1,this._required=!1,this._defaultValue="",this._valueDirty=!1,this.settingDefaultValue=!1,this.reflectingDefaultValue=!1,this.typeAheadBuffer="",this.typeAheadTimerGeneration=0,this.activeScrollGeneration=0,this.localizedValidityLocale="",this.localizedIntrinsicMessage="",this.localDescriptionIds="",this.onDocPointer=e=>{if(!e.composedPath().includes(this)){if(this.overlayHandle?.isActive()){this.overlayHandle.dismissBackdrop();return}this.hide()}},this.onTriggerClick=()=>{this.liveDisabled||(this.open?this.hide():this.show())},this.onTriggerBlur=event=>{this.liveDisabled||(this.touched=!0),this.syncCustomStates(),this.hide(),relayNativeEvent(this,event)},this.onTriggerFocus=event=>{if(this.liveDisabled){event.stopPropagation();return}relayNativeEvent(this,event)},this.onLabelSlotChange=e=>{this.hasLabelSlot=e.target.assignedElements({flatten:!0}).length>0},this.onHintSlotChange=e=>{this.hasHintSlot=e.target.assignedElements({flatten:!0}).length>0},this.onErrorSlotChange=e=>{this.hasErrorSlot=e.target.assignedElements({flatten:!0}).length>0},this.onKeyDown=e=>{if(this.liveDisabled)return;const rows=this.normalizedEntries;switch(e.key){case"ArrowDown":if(e.preventDefault(),!this.open)return this.show();this.setActiveIndex(Math.min(rows.length-1,this.activeIndex+1));break;case"ArrowUp":if(e.preventDefault(),!this.open)return this.show();this.setActiveIndex(Math.max(0,this.activeIndex-1));break;case"Enter":case" ":if(this.open){e.preventDefault();const activeRow=rows[this.activeIndex];this.activeIndex>=0&&activeRow?this.commit(activeRow.tag):this.hide()}break;case"Escape":this.open&&(!this.overlayHandle?.isActive()||this.overlayHandle.isTopmost())&&(e.preventDefault(),this.dismissFromEscape());break;case"Home":this.open&&(e.preventDefault(),this.setActiveIndex(0));break;case"End":this.open&&(e.preventDefault(),this.setActiveIndex(rows.length-1));break;default:e.key.length===1&&!e.altKey&&!e.ctrlKey&&!e.metaKey&&this.typeAhead(e.key);break}},this.onListboxMouseDown=e=>{e.target.closest('[part="option"]')&&e.preventDefault()},this.onListboxClick=e=>{if(this.liveDisabled)return;const tag=e.target.closest('[part="option"]')?.dataset.value;tag!==void 0&&this.commit(tag)},this.internals=attachInternalsSafely(this),this.validityController=new AnchoredValidityController(this,this.internals,()=>this[VALIDITY_ANCHOR]()),installCustomErrorProperty(this,()=>this.validityController.customValidityMessage),installInvalidEventAlias(this,init=>this.emit("lr-invalid",null,init)),this.internals.setFormValue("")}get liveDisabled(){return this.effectiveDisabled||this.matches(":disabled")}focus(options){this.liveDisabled||this.triggerElement?.focus(options)}blur(){this.triggerElement?.blur()}click(){this.liveDisabled||this.triggerElement?.click()}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('[part="trigger"]')??null}syncExternalDescription(){if(!this.isConnected)return;const target=this.triggerElement??null;target&&(this.externalDescriptionLease?this.externalDescriptionLease.update(target):this.externalDescriptionLease=acquireNativeControlDescription(this,target,()=>this.localDescriptionIds))}releaseExternalDescription(){this.externalDescriptionLease?.release(),this.externalDescriptionLease=void 0}connectedCallback(){super.connectedCallback(),this.hasUpdated&&this.syncExternalDescription(),this.syncLocaleAttributeForLocalization(),this.updateValidity(),this.stopRegistrySubscription=subscribeLyraLocaleRegistry(()=>{this.registryTick+=1}),this.hasUpdated&&this.open&&queueMicrotask(()=>this.syncPopup())}disconnectedCallback(){this.releaseExternalDescription(),super.disconnectedCallback(),this.cleanup?.(),this.cleanup=void 0,this.deactivatePopupOverlay(!1),this.stopRegistrySubscription?.(),this.stopRegistrySubscription=void 0,this.clearTypeAheadTimer(),this.activeScrollGeneration+=1,this.typeAheadBuffer="",this.open=!1}adoptedCallback(){super.adoptedCallback(),this.releaseExternalDescription(),this.hasUpdated&&this.syncExternalDescription(),this.cleanup?.(),this.cleanup=void 0,this.unbindDocumentPointer(),this.overlayHandle?.suspend(),this.clearTypeAheadTimer(),this.open&&queueMicrotask(()=>this.syncPopup())}willUpdate(changed){super.willUpdate(changed),changed.has("locale")&&this.syncLocaleAttributeForLocalization(),this.hasUpdated&&this.refreshLocalizedIntrinsicValidity(changed),this.open&&(changed.has("locales")||changed.has("registryTick"))&&this.activeIndex>=0&&(this.activeIndex=Math.min(this.activeIndex,this.normalizedEntries.length-1),this.queueActiveScroll()),this.hasUpdated||(this.hasHintSlot=Array.from(this.children??[]).some(el=>el.getAttribute("slot")==="hint"),this.hasErrorSlot=Array.from(this.children??[]).some(el=>el.getAttribute("slot")==="error"),this.hasLabelSlot=Array.from(this.children??[]).some(el=>el.getAttribute("slot")==="label"))}get value(){return this._value}set value(next){const old=this._value;this.settingDefaultValue||(this._valueDirty=!0),this._value=next??"",this.internals.setFormValue(this._value),this.updateValidity(),this.requestUpdate("value",old)}get defaultValue(){return this._defaultValue}set defaultValue(next){if(this.reflectingDefaultValue)return;const old=this._defaultValue;this._defaultValue=next??"",this.reflectingDefaultValue=!0;try{this._defaultValue?this.setAttribute("value",this._defaultValue):this.removeAttribute("value")}finally{this.reflectingDefaultValue=!1}this._valueDirty||this.restoreLiveValueFromDefault(),this.requestUpdate("defaultValue",old)}get name(){return this._name}set name(next){const old=this._name;this._name=next??"",this._name?this.setAttribute("name",this._name):this.removeAttribute("name"),this.requestUpdate("name",old)}get disabled(){return this._disabled}set disabled(next){const old=this._disabled;this._disabled=!!next,this.toggleAttribute("disabled",this._disabled),this._disabled&&this.hide(),this.updateValidity(),this.requestUpdate("disabled",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 effectiveDisabled(){return this.disabled||this._fieldsetDisabled}updateValidity(){this.localizedValidityLocale=this.effectiveMessageLocale;const valueMissing=this.hasMissingRequiredValue(),message=valueMissing?this.localize("localePickerRequired"):"";this.localizedIntrinsicMessage=message,valueMissing?this.validityController.setValidity({valueMissing:!0},message):this.validityController.setValidity({}),this.syncCustomStates()}refreshLocalizedIntrinsicValidity(changed){const locale=this.effectiveMessageLocale,message=this.hasMissingRequiredValue()?this.localize("localePickerRequired"):"";(changed.has("strings")||locale!==this.localizedValidityLocale||message!==this.localizedIntrinsicMessage)&&this.updateValidity()}hasMissingRequiredValue(){return!this.isBarred()&&this.required&&!this._value}syncLocaleAttributeForLocalization(){this.locale?this.getAttribute("locale")!==this.locale&&this.setAttribute("locale",this.locale):this.hasAttribute("locale")&&this.removeAttribute("locale")}isBarred(){return isBarredFromValidation(this,this.internals)}syncCustomStates(){syncValidityStates(this.internals,{required:this.required,hasInteracted:this.touched,barred:this.isBarred()})}formResetCallback(){this.touched=!1,this.restoreLiveValueFromDefault()}restoreLiveValueFromDefault(){this.settingDefaultValue=!0;try{this.value=this._defaultValue}finally{this.settingDefaultValue=!1}this._valueDirty=!1}formStateRestoreCallback(state2,_mode){this.value=typeof state2=="string"?state2:""}formDisabledCallback(disabled){this._fieldsetDisabled=disabled,disabled&&this.hide(),this.updateValidity(),this.requestUpdate()}checkValidity(){return this.internals.checkValidity()}reportValidity(){return this.touched=!0,this.syncCustomStates(),this.internals.reportValidity()}setCustomValidity(message){this.validityController.setCustomValidity(message??""),this.syncCustomStates(),this.toggleAttribute("data-invalid",this.touched&&!this.internals.validity.valid),this.requestUpdate()}get normalizedEntries(){const raw=this.locales;return raw!==void 0?raw.map(entry=>typeof entry=="string"?{tag:entry,label:localeNativeName(entry)}:{tag:entry.tag,label:entry.label??localeNativeName(entry.tag),country:entry.country}):getRegisteredLyraLocales().map(tag=>({tag,label:localeNativeName(tag)}))}get previewTag(){return this._value||this.effectiveLocale}entryFor(tag){return this.normalizedEntries.find(e=>e.tag===tag)}labelFor(tag){return this.entryFor(tag)?.label??localeNativeName(tag)}show(){this.open||this.liveDisabled||(this.open=!0)}hide(){this.open&&(this.open=!1,this.setActiveIndex(-1))}dismissFromEscape(){this.open&&(this.deactivatePopupOverlay(!0),this.hide())}bindDocumentPointer(){if(!this.isConnected)return;const ownerDocument=this.ownerDocument;if(this.pointerListenerDocument===ownerDocument&&this.pointerListener)return;this.unbindDocumentPointer();const listener=event=>{this.pointerListener!==listener||this.pointerListenerDocument!==ownerDocument||!this.isConnected||this.ownerDocument!==ownerDocument||this.onDocPointer(event)};this.pointerListenerDocument=ownerDocument,this.pointerListener=listener,ownerDocument.addEventListener("pointerdown",listener)}unbindDocumentPointer(){this.pointerListenerDocument&&this.pointerListener&&this.pointerListenerDocument.removeEventListener("pointerdown",this.pointerListener),this.pointerListenerDocument=void 0,this.pointerListener=void 0}activatePopupOverlay(){if(this.overlayHandle?.isActive()){this.overlayHandle.resume();return}this.overlayHandle=activateNonmodalOverlay({host:this,panel:()=>this.renderRoot.querySelector('[part="listbox"]'),onEscape:()=>this.dismissFromEscape(),onBackdrop:()=>this.hide(),restoreFocusTo:()=>this.renderRoot.querySelector('[part="trigger"]')})}deactivatePopupOverlay(restoreFocus){const overlay=this.overlayHandle;this.overlayHandle=void 0,overlay?.deactivate({restoreFocus}),this.unbindDocumentPointer()}syncPopup(){if(this.cleanup?.(),this.cleanup=void 0,!this.open||!this.isConnected){this.deactivatePopupOverlay(!1);return}this.activatePopupOverlay(),this.bindDocumentPointer();const anchor=this.renderRoot.querySelector('[part="trigger"]'),listbox=this.renderRoot.querySelector('[part="listbox"]');anchor&&listbox&&(this.cleanup=place(anchor,listbox))}updated(changed){super.updated(changed),this.syncExternalDescription(),(changed.has("open")||this.open&&(changed.has("locales")||changed.has("registryTick")||changed.has("locale")))&&this.syncPopup(),(changed.has("touched")||changed.has("required")||changed.has("value"))&&this.toggleAttribute("data-invalid",this.touched&&!this.internals.validity.valid)}commit(tag){const previousValue=this._value;this.value=tag,this.hide(),this.emit("lr-change",{value:tag,previousValue,direction:getLyraLocaleDirection(tag)},{cancelable:!0}).defaultPrevented||setLyraLocale(tag)}typeAhead(char){this.clearTypeAheadTimer(),this.typeAheadBuffer+=char.toLocaleLowerCase(this.effectiveLocale);const ownerWindow=this.ownerDocument.defaultView;if(this.isConnected&&ownerWindow){const generation=this.typeAheadTimerGeneration;this.typeAheadTimerWindow=ownerWindow,this.typeAheadTimer=ownerWindow.setTimeout(()=>{this.typeAheadTimerGeneration!==generation||!this.isConnected||this.ownerDocument.defaultView!==ownerWindow||(this.typeAheadTimer=void 0,this.typeAheadTimerWindow=void 0,this.typeAheadBuffer="")},500)}const rows=this.normalizedEntries;if(!rows.length)return;const currentTag=this.open?rows[this.activeIndex]?.tag:this.previewTag,currentIndex=rows.findIndex(r=>r.tag===currentTag),n=rows.length;for(let step=1;step<=n;step++){const idx=(currentIndex+step+n)%n,row=rows[idx];if(row&&row.label.toLocaleLowerCase(this.effectiveLocale).startsWith(this.typeAheadBuffer)){this.open?this.setActiveIndex(idx):this.commit(row.tag);return}}}clearTypeAheadTimer(){this.typeAheadTimerGeneration+=1,this.typeAheadTimer!==void 0&&this.typeAheadTimerWindow?.clearTimeout(this.typeAheadTimer),this.typeAheadTimer=void 0,this.typeAheadTimerWindow=void 0}setActiveIndex(index){const last=this.normalizedEntries.length-1,next=last<0||index<0?-1:Math.min(last,index);this.activeIndex=next,this.queueActiveScroll()}queueActiveScroll(){const generation=++this.activeScrollGeneration,index=this.activeIndex;index<0||!this.open||this.updateComplete.then(()=>{generation!==this.activeScrollGeneration||!this.isConnected||!this.open||this.activeIndex!==index||this.shadowRoot?.getElementById(`${this.listId}-opt-${index}`)?.scrollIntoView({block:"nearest"})})}renderRows(rows,activeId){return rows.map((entry,i)=>{const id=`${this.listId}-opt-${i}`,selected=entry.tag===this._value;return html`<div
+var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3?target:desc===null?desc=Object.getOwnPropertyDescriptor(target,key):desc,d;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")r=Reflect.decorate(decorators,target,key,desc);else for(var i=decorators.length-1;i>=0;i--)(d=decorators[i])&&(r=(c<3?d(r):c>3?d(target,key,r):d(target,key))||r);return c>3&&r&&Object.defineProperty(target,key,r),r};import{acquireNativeControlDescription}from"../../../internal/native-control-description.js";import{html,nothing}from"lit";import{property,query,state}from"lit/decorators.js";import{LyraElement}from"../../../internal/lyra-element.js";import{installFormControlLabelSupport}from"../../../internal/form-control-labels.js";installFormControlLabelSupport();import{deferredPlace as place}from"../../../internal/anchored-overlay-runtime.js";import{hostAriaLabel,nextId,srOnly}from"../../../internal/a11y.js";import{chevronIcon}from"../../../internal/icons.js";import{AnchoredValidityController,VALIDITY_ANCHOR}from"../../../internal/anchored-validity.js";import{syncValidityStates}from"../../../internal/custom-states.js";import{activateNonmodalOverlay}from"../../../internal/nonmodal-overlay-manager.js";import{getLyraLocaleDirection,getRegisteredLyraLocales,subscribeLyraLocaleRegistry,setLyraLocale}from"../../../internal/localization-runtime.js";import{localeNativeName}from"../../media/flag/language-map.js";import{sizes}from"../../../internal/sizes.styles.js";import{styles}from"./locale-picker.styles.js";import{declaredDefaultConverter,trueDefaultBooleanFromAttributeConverter as trueDefaultBooleanConverter}from"../../../internal/converters.js";import{attachInternalsSafely,getFormOwner,installCustomErrorProperty,isBarredFromValidation,setFormOwner}from"../../../internal/form-associated.js";import{installInvalidEventAlias}from"../../../internal/invalid-event-alias.js";import{relayNativeEvent}from"../../../internal/native-event-relay.js";import{LYRA_DEFAULT_fieldRequired,LYRA_DEFAULT_localePickerLabel,LYRA_DEFAULT_localePickerRequired}from"../../../internal/default-strings.generated.js";const MAX_LOCALE_ENTRIES=512;function snapshotLocaleCatalog(source){if(!Array.isArray(source))return Object.freeze([]);const rows=[];for(let index=0;index<Math.min(source.length,MAX_LOCALE_ENTRIES);index+=1)try{const raw=source[index];if(typeof raw=="string"){raw.length>0&&rows.push(raw);continue}if(raw===null||typeof raw!="object")continue;const candidate=raw,tag=candidate.tag,label=candidate.label,country=candidate.country;if(typeof tag!="string"||tag.length===0||label!==void 0&&typeof label!="string"||country!==void 0&&typeof country!="string")continue;rows.push(Object.freeze({tag,...label===void 0?{}:{label},...country===void 0?{}:{country}}))}catch{}return Object.freeze(rows)}class LyraLocalePicker extends LyraElement{static{this.defaultStrings={...super.defaultStrings,fieldRequired:LYRA_DEFAULT_fieldRequired,localePickerLabel:LYRA_DEFAULT_localePickerLabel,localePickerRequired:LYRA_DEFAULT_localePickerRequired}}static{this.formAssociated=!0}static{this.styles=[LyraElement.styles,sizes,srOnly,styles]}static{this.properties={customError:{attribute:"custom-error",reflect:!0,noAccessor:!0},disabled:{type:Boolean,reflect:!0,noAccessor:!0},required:{type:Boolean,reflect:!0,noAccessor:!0},value:{attribute:!1,noAccessor:!0},defaultValue:{attribute:"value",reflect:!0,useDefault:!0,noAccessor:!0},name:{reflect:!0,noAccessor:!0}}}get locales(){return this._locales}set locales(next){const previous=this._locales;this._locales=next===void 0?void 0:snapshotLocaleCatalog(next),this.requestUpdate("locales",previous)}get open(){return this._open}set open(next){const old=this._open,liveDisabled=this.effectiveDisabled||typeof this.matches=="function"&&this.matches(":disabled");if(this._open=!!next&&!liveDisabled,this._open===old){next&&!this._open&&this.hasAttribute("open")&&this.removeAttribute("open");return}this._open||(this.activeIndex=-1),this.requestUpdate("open",old)}constructor(){super(),this.showFlags=!0,this.triggerDisplay="flag-label",this.label="",this.hint="",this.errorText="",this.size="m",this.activeIndex=-1,this.touched=!1,this.hasHintSlot=!1,this.hasErrorSlot=!1,this.hasLabelSlot=!1,this.registryTick=0,this.listId=nextId("locale-picker-list"),this.controlId=nextId("locale-picker-control"),this._value="",this._open=!1,this._fieldsetDisabled=!1,this._name="",this._disabled=!1,this._required=!1,this._defaultValue="",this._valueDirty=!1,this.settingDefaultValue=!1,this.reflectingDefaultValue=!1,this.typeAheadBuffer="",this.typeAheadTimerGeneration=0,this.activeScrollGeneration=0,this.localizedValidityLocale="",this.localizedIntrinsicMessage="",this.localDescriptionIds="",this.onDocPointer=e=>{if(!e.composedPath().includes(this)){if(this.overlayHandle?.isActive()){this.overlayHandle.dismissBackdrop();return}this.hide()}},this.onTriggerClick=()=>{this.liveDisabled||(this.open?this.hide():this.show())},this.onTriggerBlur=event=>{this.liveDisabled||(this.touched=!0),this.syncCustomStates(),this.hide(),relayNativeEvent(this,event)},this.onTriggerFocus=event=>{if(this.liveDisabled){event.stopPropagation();return}relayNativeEvent(this,event)},this.onLabelSlotChange=e=>{this.hasLabelSlot=e.target.assignedElements({flatten:!0}).length>0},this.onHintSlotChange=e=>{this.hasHintSlot=e.target.assignedElements({flatten:!0}).length>0},this.onErrorSlotChange=e=>{this.hasErrorSlot=e.target.assignedElements({flatten:!0}).length>0},this.onKeyDown=e=>{if(this.liveDisabled)return;const rows=this.normalizedEntries;switch(e.key){case"ArrowDown":if(e.preventDefault(),!this.open)return this.show();this.setActiveIndex(Math.min(rows.length-1,this.activeIndex+1));break;case"ArrowUp":if(e.preventDefault(),!this.open)return this.show();this.setActiveIndex(Math.max(0,this.activeIndex-1));break;case"Enter":case" ":if(this.open){e.preventDefault();const activeRow=rows[this.activeIndex];this.activeIndex>=0&&activeRow?this.commit(activeRow.tag):this.hide()}break;case"Escape":this.open&&(!this.overlayHandle?.isActive()||this.overlayHandle.isTopmost())&&(e.preventDefault(),this.dismissFromEscape());break;case"Home":this.open&&(e.preventDefault(),this.setActiveIndex(0));break;case"End":this.open&&(e.preventDefault(),this.setActiveIndex(rows.length-1));break;default:e.key.length===1&&!e.altKey&&!e.ctrlKey&&!e.metaKey&&this.typeAhead(e.key);break}},this.onListboxMouseDown=e=>{e.target.closest('[part="option"]')&&e.preventDefault()},this.onListboxClick=e=>{if(this.liveDisabled)return;const tag=e.target.closest('[part="option"]')?.dataset.value;tag!==void 0&&this.commit(tag)},this.internals=attachInternalsSafely(this),this.validityController=new AnchoredValidityController(this,this.internals,()=>this[VALIDITY_ANCHOR]()),installCustomErrorProperty(this,()=>this.validityController.customValidityMessage),installInvalidEventAlias(this,init=>this.emit("lr-invalid",null,init)),this.internals.setFormValue("")}get liveDisabled(){return this.effectiveDisabled||this.matches(":disabled")}focus(options){this.liveDisabled||this.triggerElement?.focus(options)}blur(){this.triggerElement?.blur()}click(){this.liveDisabled||this.triggerElement?.click()}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('[part="trigger"]')??null}syncExternalDescription(){if(!this.isConnected)return;const target=this.triggerElement??null;target&&(this.externalDescriptionLease?this.externalDescriptionLease.update(target):this.externalDescriptionLease=acquireNativeControlDescription(this,target,()=>this.localDescriptionIds))}releaseExternalDescription(){this.externalDescriptionLease?.release(),this.externalDescriptionLease=void 0}connectedCallback(){super.connectedCallback(),this.hasUpdated&&this.syncExternalDescription(),this.syncLocaleAttributeForLocalization(),this.updateValidity(),this.stopRegistrySubscription=subscribeLyraLocaleRegistry(()=>{this.registryTick+=1}),this.hasUpdated&&this.open&&queueMicrotask(()=>this.syncPopup())}disconnectedCallback(){this.releaseExternalDescription(),super.disconnectedCallback(),this.cleanup?.(),this.cleanup=void 0,this.deactivatePopupOverlay(!1),this.stopRegistrySubscription?.(),this.stopRegistrySubscription=void 0,this.clearTypeAheadTimer(),this.activeScrollGeneration+=1,this.typeAheadBuffer="",this.open=!1}adoptedCallback(){super.adoptedCallback(),this.releaseExternalDescription(),this.hasUpdated&&this.syncExternalDescription(),this.cleanup?.(),this.cleanup=void 0,this.unbindDocumentPointer(),this.overlayHandle?.suspend(),this.clearTypeAheadTimer(),this.open&&queueMicrotask(()=>this.syncPopup())}willUpdate(changed){super.willUpdate(changed),changed.has("locale")&&this.syncLocaleAttributeForLocalization(),this.hasUpdated&&this.refreshLocalizedIntrinsicValidity(changed),this.open&&(changed.has("locales")||changed.has("registryTick"))&&this.activeIndex>=0&&(this.activeIndex=Math.min(this.activeIndex,this.normalizedEntries.length-1),this.queueActiveScroll()),this.hasUpdated||(this.hasHintSlot=Array.from(this.children??[]).some(el=>el.getAttribute("slot")==="hint"),this.hasErrorSlot=Array.from(this.children??[]).some(el=>el.getAttribute("slot")==="error"),this.hasLabelSlot=Array.from(this.children??[]).some(el=>el.getAttribute("slot")==="label"))}get value(){return this._value}set value(next){const old=this._value;this.settingDefaultValue||(this._valueDirty=!0),this._value=next??"",this.internals.setFormValue(this._value),this.updateValidity(),this.requestUpdate("value",old)}get defaultValue(){return this._defaultValue}set defaultValue(next){if(this.reflectingDefaultValue)return;const old=this._defaultValue;this._defaultValue=next??"",this.reflectingDefaultValue=!0;try{this._defaultValue?this.setAttribute("value",this._defaultValue):this.removeAttribute("value")}finally{this.reflectingDefaultValue=!1}this._valueDirty||this.restoreLiveValueFromDefault(),this.requestUpdate("defaultValue",old)}get name(){return this._name}set name(next){const old=this._name;this._name=next??"",this._name?this.setAttribute("name",this._name):this.removeAttribute("name"),this.requestUpdate("name",old)}get disabled(){return this._disabled}set disabled(next){const old=this._disabled;this._disabled=!!next,this.toggleAttribute("disabled",this._disabled),this._disabled&&this.hide(),this.updateValidity(),this.requestUpdate("disabled",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 effectiveDisabled(){return this.disabled||this._fieldsetDisabled}updateValidity(){this.localizedValidityLocale=this.effectiveMessageLocale;const valueMissing=this.hasMissingRequiredValue(),message=valueMissing?this.localize("localePickerRequired"):"";this.localizedIntrinsicMessage=message,valueMissing?this.validityController.setValidity({valueMissing:!0},message):this.validityController.setValidity({}),this.syncCustomStates()}refreshLocalizedIntrinsicValidity(changed){const locale=this.effectiveMessageLocale,message=this.hasMissingRequiredValue()?this.localize("localePickerRequired"):"";(changed.has("strings")||locale!==this.localizedValidityLocale||message!==this.localizedIntrinsicMessage)&&this.updateValidity()}hasMissingRequiredValue(){return!this.isBarred()&&this.required&&!this._value}syncLocaleAttributeForLocalization(){this.locale?this.getAttribute("locale")!==this.locale&&this.setAttribute("locale",this.locale):this.hasAttribute("locale")&&this.removeAttribute("locale")}isBarred(){return isBarredFromValidation(this,this.internals)}syncCustomStates(){syncValidityStates(this.internals,{required:this.required,hasInteracted:this.touched,barred:this.isBarred()})}formResetCallback(){this.touched=!1,this.restoreLiveValueFromDefault()}restoreLiveValueFromDefault(){this.settingDefaultValue=!0;try{this.value=this._defaultValue}finally{this.settingDefaultValue=!1}this._valueDirty=!1}formStateRestoreCallback(state2,_mode){this.value=typeof state2=="string"?state2:""}formDisabledCallback(disabled){this._fieldsetDisabled=disabled,disabled&&this.hide(),this.updateValidity(),this.requestUpdate()}checkValidity(){return this.internals.checkValidity()}reportValidity(){return this.touched=!0,this.syncCustomStates(),this.internals.reportValidity()}setCustomValidity(message){this.validityController.setCustomValidity(message??""),this.syncCustomStates(),this.toggleAttribute("data-invalid",this.touched&&!this.internals.validity.valid),this.requestUpdate()}get normalizedEntries(){const raw=this.locales;return raw!==void 0?raw.map(entry=>typeof entry=="string"?{tag:entry,label:localeNativeName(entry)}:{tag:entry.tag,label:entry.label??localeNativeName(entry.tag),country:entry.country}):getRegisteredLyraLocales().map(tag=>({tag,label:localeNativeName(tag)}))}get previewTag(){return this._value||this.effectiveLocale}entryFor(tag){return this.normalizedEntries.find(e=>e.tag===tag)}labelFor(tag){return this.entryFor(tag)?.label??localeNativeName(tag)}show(){this.open||this.liveDisabled||(this.open=!0)}hide(){this.open&&(this.open=!1,this.setActiveIndex(-1))}dismissFromEscape(){this.open&&(this.deactivatePopupOverlay(!0),this.hide())}bindDocumentPointer(){if(!this.isConnected)return;const ownerDocument=this.ownerDocument;if(this.pointerListenerDocument===ownerDocument&&this.pointerListener)return;this.unbindDocumentPointer();const listener=event=>{this.pointerListener!==listener||this.pointerListenerDocument!==ownerDocument||!this.isConnected||this.ownerDocument!==ownerDocument||this.onDocPointer(event)};this.pointerListenerDocument=ownerDocument,this.pointerListener=listener,ownerDocument.addEventListener("pointerdown",listener)}unbindDocumentPointer(){this.pointerListenerDocument&&this.pointerListener&&this.pointerListenerDocument.removeEventListener("pointerdown",this.pointerListener),this.pointerListenerDocument=void 0,this.pointerListener=void 0}activatePopupOverlay(){if(this.overlayHandle?.isActive()){this.overlayHandle.resume();return}this.overlayHandle=activateNonmodalOverlay({host:this,panel:()=>this.renderRoot.querySelector('[part="listbox"]'),onEscape:()=>this.dismissFromEscape(),onBackdrop:()=>this.hide(),restoreFocusTo:()=>this.renderRoot.querySelector('[part="trigger"]')})}deactivatePopupOverlay(restoreFocus){const overlay=this.overlayHandle;this.overlayHandle=void 0,overlay?.deactivate({restoreFocus}),this.unbindDocumentPointer()}syncPopup(){if(this.cleanup?.(),this.cleanup=void 0,!this.open||!this.isConnected){this.deactivatePopupOverlay(!1);return}this.activatePopupOverlay(),this.bindDocumentPointer();const anchor=this.renderRoot.querySelector('[part="trigger"]'),listbox=this.renderRoot.querySelector('[part="listbox"]');anchor&&listbox&&(this.cleanup=place(anchor,listbox))}updated(changed){super.updated(changed),this.syncExternalDescription(),(changed.has("open")||this.open&&(changed.has("locales")||changed.has("registryTick")||changed.has("locale")))&&this.syncPopup(),(changed.has("touched")||changed.has("required")||changed.has("value"))&&this.toggleAttribute("data-invalid",this.touched&&!this.internals.validity.valid)}commit(tag){const previousValue=this._value;this.value=tag,this.hide(),this.emit("lr-change",{value:tag,previousValue,direction:getLyraLocaleDirection(tag)},{cancelable:!0}).defaultPrevented||setLyraLocale(tag)}typeAhead(char){this.clearTypeAheadTimer(),this.typeAheadBuffer+=char.toLocaleLowerCase(this.effectiveLocale);const ownerWindow=this.ownerDocument.defaultView;if(this.isConnected&&ownerWindow){const generation=this.typeAheadTimerGeneration;this.typeAheadTimerWindow=ownerWindow,this.typeAheadTimer=ownerWindow.setTimeout(()=>{this.typeAheadTimerGeneration!==generation||!this.isConnected||this.ownerDocument.defaultView!==ownerWindow||(this.typeAheadTimer=void 0,this.typeAheadTimerWindow=void 0,this.typeAheadBuffer="")},500)}const rows=this.normalizedEntries;if(!rows.length)return;const currentTag=this.open?rows[this.activeIndex]?.tag:this.previewTag,currentIndex=rows.findIndex(r=>r.tag===currentTag),n=rows.length;for(let step=1;step<=n;step++){const idx=(currentIndex+step+n)%n,row=rows[idx];if(row&&row.label.toLocaleLowerCase(this.effectiveLocale).startsWith(this.typeAheadBuffer)){this.open?this.setActiveIndex(idx):this.commit(row.tag);return}}}clearTypeAheadTimer(){this.typeAheadTimerGeneration+=1,this.typeAheadTimer!==void 0&&this.typeAheadTimerWindow?.clearTimeout(this.typeAheadTimer),this.typeAheadTimer=void 0,this.typeAheadTimerWindow=void 0}setActiveIndex(index){const last=this.normalizedEntries.length-1,next=last<0||index<0?-1:Math.min(last,index);this.activeIndex=next,this.queueActiveScroll()}queueActiveScroll(){const generation=++this.activeScrollGeneration,index=this.activeIndex;index<0||!this.open||this.updateComplete.then(()=>{generation!==this.activeScrollGeneration||!this.isConnected||!this.open||this.activeIndex!==index||this.shadowRoot?.getElementById(`${this.listId}-opt-${index}`)?.scrollIntoView({block:"nearest"})})}renderRows(rows,activeId){return rows.map((entry,i)=>{const id=`${this.listId}-opt-${i}`,selected=entry.tag===this._value;return html`<div
         part="option"
         id=${id}
         role="option"
@@ -11,7 +11,7 @@ var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3
           <span>${entry.label}</span>
           <span part="option-tag">${entry.tag}</span>
         </span>
-      </div>`})}render(){const rows=this.normalizedEntries,activeId=this.activeIndex>=0&&rows[this.activeIndex]?`${this.listId}-opt-${this.activeIndex}`:"",previewTag=this.previewTag,previewEntry=this.entryFor(previewTag),hasLabel=this.hasLabelSlot||(this.label??"").length>0,hasHint=this.hasHintSlot||(this.hint??"").length>0,hasError=this.hasErrorSlot||(this.errorText??"").length>0,describedBy=this.localDescriptionIds=[hasError?"locale-picker-error":"",hasHint?"locale-picker-hint":""].filter(Boolean).join(" ");return html`
+      </div>`})}render(){const rows=this.normalizedEntries,activeId=this.activeIndex>=0&&rows[this.activeIndex]?`${this.listId}-opt-${this.activeIndex}`:"",previewTag=this.previewTag,previewEntry=this.entryFor(previewTag),flagOnly=this.triggerDisplay==="flag"&&this.showFlags,hasLabel=this.hasLabelSlot||(this.label??"").length>0,hasHint=this.hasHintSlot||(this.hint??"").length>0,hasError=this.hasErrorSlot||(this.errorText??"").length>0,describedBy=this.localDescriptionIds=[flagOnly?"locale-picker-value":"",hasError?"locale-picker-error":"",hasHint?"locale-picker-hint":""].filter(Boolean).join(" ");return html`
       <div part="form-control">
         <label part="form-control-label" for=${this.controlId} ?hidden=${!hasLabel}>
           ${this.label}<slot name="label" @slotchange=${this.onLabelSlotChange}></slot>
@@ -19,6 +19,7 @@ var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3
         <button
           id=${this.controlId}
           part="trigger"
+          class=${flagOnly?"flag-only":nothing}
           type="button"
           role="combobox"
           aria-haspopup="listbox"
@@ -35,9 +36,9 @@ var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3
           @focus=${this.onTriggerFocus}
           @blur=${this.onTriggerBlur}
         >
-          ${this.showFlags?previewEntry?.country?html`<lr-flag part="trigger-flag" country=${previewEntry.country} fidelity="compact" aria-hidden="true" inert></lr-flag>`:html`<lr-flag part="trigger-flag" language=${previewTag} fidelity="compact" aria-hidden="true" inert></lr-flag>`:""}
-          <span class="trigger-label">${this.labelFor(previewTag)}</span>
-          <span part="expand-icon" aria-hidden="true" inert>${chevronIcon()}</span>
+          ${this.showFlags&&this.triggerDisplay!=="label"?previewEntry?.country?html`<lr-flag part="trigger-flag" country=${previewEntry.country} fidelity="compact" aria-hidden="true" inert></lr-flag>`:html`<lr-flag part="trigger-flag" language=${previewTag} fidelity="compact" aria-hidden="true" inert></lr-flag>`:""}
+          <span id="locale-picker-value" part="trigger-label" class=${flagOnly?"trigger-label sr-only":"trigger-label"}>${this.labelFor(previewTag)}</span>
+          ${flagOnly?nothing:html`<span part="expand-icon" aria-hidden="true" inert>${chevronIcon()}</span>`}
         </button>
         <div
           part="listbox"
@@ -55,4 +56,4 @@ var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3
           ${this.hint}<slot name="hint" @slotchange=${this.onHintSlotChange}></slot>
         </div>
       </div>
-    `}}__decorate([property({attribute:!1})],LyraLocalePicker.prototype,"locales",null),__decorate([property({attribute:"show-flags",type:Boolean,converter:trueDefaultBooleanConverter})],LyraLocalePicker.prototype,"showFlags",void 0),__decorate([property()],LyraLocalePicker.prototype,"label",void 0),__decorate([property()],LyraLocalePicker.prototype,"hint",void 0),__decorate([property({attribute:"error-text"})],LyraLocalePicker.prototype,"errorText",void 0),__decorate([property({type:Boolean,reflect:!0})],LyraLocalePicker.prototype,"open",null),__decorate([property({reflect:!0,converter:declaredDefaultConverter("m")})],LyraLocalePicker.prototype,"size",void 0),__decorate([state()],LyraLocalePicker.prototype,"activeIndex",void 0),__decorate([state()],LyraLocalePicker.prototype,"touched",void 0),__decorate([state()],LyraLocalePicker.prototype,"hasHintSlot",void 0),__decorate([state()],LyraLocalePicker.prototype,"hasErrorSlot",void 0),__decorate([state()],LyraLocalePicker.prototype,"hasLabelSlot",void 0),__decorate([state()],LyraLocalePicker.prototype,"registryTick",void 0),__decorate([query('[part="trigger"]')],LyraLocalePicker.prototype,"triggerElement",void 0);export{LyraLocalePicker};
+    `}}__decorate([property({attribute:!1})],LyraLocalePicker.prototype,"locales",null),__decorate([property({attribute:"show-flags",type:Boolean,converter:trueDefaultBooleanConverter})],LyraLocalePicker.prototype,"showFlags",void 0),__decorate([property({attribute:"trigger-display",converter:declaredDefaultConverter("flag-label")})],LyraLocalePicker.prototype,"triggerDisplay",void 0),__decorate([property()],LyraLocalePicker.prototype,"label",void 0),__decorate([property()],LyraLocalePicker.prototype,"hint",void 0),__decorate([property({attribute:"error-text"})],LyraLocalePicker.prototype,"errorText",void 0),__decorate([property({type:Boolean,reflect:!0})],LyraLocalePicker.prototype,"open",null),__decorate([property({reflect:!0,converter:declaredDefaultConverter("m")})],LyraLocalePicker.prototype,"size",void 0),__decorate([state()],LyraLocalePicker.prototype,"activeIndex",void 0),__decorate([state()],LyraLocalePicker.prototype,"touched",void 0),__decorate([state()],LyraLocalePicker.prototype,"hasHintSlot",void 0),__decorate([state()],LyraLocalePicker.prototype,"hasErrorSlot",void 0),__decorate([state()],LyraLocalePicker.prototype,"hasLabelSlot",void 0),__decorate([state()],LyraLocalePicker.prototype,"registryTick",void 0),__decorate([query('[part="trigger"]')],LyraLocalePicker.prototype,"triggerElement",void 0);export{LyraLocalePicker};

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

@@ -1 +1 @@
-import{css}from"lit";import{formControlRequiredMarker}from"../../../internal/form-control.styles.js";const styles=css` :host { display: block; --_lr-locale-picker-trigger-padding-default: var(--lr-space-xs) var(--lr-space-s); --_lr-locale-picker-trigger-min-height-default: var(--lr-form-control-height); --_lr-locale-picker-font-size-default: var(--lr-form-control-font-size); --_lr-locale-picker-expand-size-default: var(--lr-size-1-75rem); --_lr-locale-picker-gap-default: var(--lr-space-xs); --_lr-locale-picker-radius-default: var(--lr-form-control-radius); } :host([size='2xs']) { --_lr-locale-picker-trigger-padding-default: var(--lr-size-0-0625rem) var(--lr-space-2xs); --_lr-locale-picker-expand-size-default: var(--lr-size-1rem); } :host([size='xs']) { --_lr-locale-picker-trigger-padding-default: var(--lr-size-0-125rem) var(--lr-space-xs); --_lr-locale-picker-expand-size-default: var(--lr-size-1rem); } :host([size='s']), :host([size='small']) { --_lr-locale-picker-trigger-padding-default: var(--lr-space-xs) var(--lr-space-xs); --_lr-locale-picker-expand-size-default: var(--lr-size-1-25rem); } :host([size='l']), :host([size='large']) { --_lr-locale-picker-trigger-padding-default: var(--lr-space-s) var(--lr-space-m); } :host([size='xl']) { --_lr-locale-picker-trigger-padding-default: var(--lr-space-m) var(--lr-space-l); } [part='form-control-label'] { display: block; margin-block-end: var(--lr-space-xs); font-size: var(--lr-font-size-md-sm); font-weight: var(--lr-font-weight-semibold); } [part='form-control-label'][hidden] { display: none; } ${formControlRequiredMarker} [part='trigger'] { display: flex; align-items: center; justify-content: space-between; gap: var(--lr-locale-picker-gap, var(--_lr-locale-picker-gap-default)); inline-size: 100%; min-block-size: var(--lr-locale-picker-trigger-height, var(--lr-locale-picker-trigger-min-height, var(--_lr-locale-picker-trigger-min-height-default))); box-sizing: border-box; block-size: var(--lr-locale-picker-trigger-height, auto); padding: var(--lr-locale-picker-trigger-padding, var(--_lr-locale-picker-trigger-padding-default)); border: var(--lr-border-width-thin) solid var(--lr-color-border); border-radius: var(--lr-locale-picker-radius, var(--_lr-locale-picker-radius-default)); background: var(--lr-color-surface); color: inherit; font: inherit; font-size: var(--lr-locale-picker-font-size, var(--_lr-locale-picker-font-size-default)); text-align: start; cursor: pointer; } [part='trigger']:focus-visible { outline: var(--lr-focus-ring-width) solid var(--lr-focus-ring-color); outline-offset: var(--lr-focus-ring-offset); } :where([part='trigger']):hover:where(:not(:disabled)) { background: var(--lr-locale-picker-trigger-hover-bg, var(--lr-color-brand-quiet)); } :where([part='trigger']):active:where(:not(:disabled)) { background: color-mix( in oklab, var(--lr-locale-picker-trigger-hover-bg, var(--lr-color-brand-quiet)), var(--lr-color-mix-partner) var(--lr-color-mix-active) ); } :host([open]) [part='trigger'] { border-color: var(--lr-locale-picker-open-border-color, var(--lr-color-brand)); } :host(:disabled) [part='trigger'] { opacity: var(--lr-opacity-disabled); cursor: not-allowed; } [part='trigger-flag'] { flex: 0 0 auto; } .trigger-label { flex: 1 1 auto; min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } [part='expand-icon'] { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; color: var(--lr-color-text-quiet); min-inline-size: min(var(--lr-icon-button-size), var(--lr-locale-picker-expand-size, var(--_lr-locale-picker-expand-size-default))); min-block-size: min(var(--lr-icon-button-size), var(--lr-locale-picker-expand-size, var(--_lr-locale-picker-expand-size-default))); line-height: var(--lr-line-height-none); } [part='expand-icon'] svg { transform: rotate(90deg); } [part='listbox'] { position: fixed; z-index: var(--lr-overlay-stack-index, var(--lr-layer-dropdown)); box-sizing: border-box; max-block-size: var(--lr-size-18rem); overflow-y: auto; overflow-x: hidden; inline-size: max-content; min-inline-size: var(--lr-size-12rem); max-inline-size: min(var(--lr-popover-viewport-clamp), var(--lr-size-28rem)); padding: var(--lr-space-xs); background: var(--lr-color-surface); border: var(--lr-border-width-thin) solid var(--lr-color-border); border-radius: var(--lr-locale-picker-radius, var(--_lr-locale-picker-radius-default)); box-shadow: var(--lr-shadow-m); visibility: hidden; opacity: 0; transform: translateY(var(--lr-size-neg-0-25rem)); transition: opacity var(--lr-transition-fast), transform var(--lr-transition-fast), visibility var(--lr-transition-fast); } :host([open]) [part='listbox'] { visibility: visible; opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { [part='listbox'] { transition: none !important; } } [part='option'] { display: flex; align-items: center; gap: var(--lr-locale-picker-gap, var(--_lr-locale-picker-gap-default)); inline-size: 100%; box-sizing: border-box; padding: var(--lr-space-xs) var(--lr-space-s); border: var(--lr-border-width-thin) solid transparent; border-radius: var(--lr-locale-picker-radius, var(--_lr-locale-picker-radius-default)); background: none; color: inherit; font: inherit; text-align: start; cursor: pointer; } [part='option']:hover { background: var( --lr-locale-picker-option-active-bg, var(--lr-color-brand-quiet) ); } [part='option'][data-active] { background: var(--lr-locale-picker-option-active-bg, var(--lr-color-brand-quiet)); } [part='option']:active { background: color-mix( in oklab, var(--lr-locale-picker-option-active-bg, var(--lr-color-brand-quiet)), var(--lr-color-mix-partner) var(--lr-color-mix-active) ); } [part='option'][aria-selected='true'] { border-color: var(--lr-locale-picker-option-selected-border-color, var(--lr-color-brand)); color: var(--lr-locale-picker-option-selected-color, var(--lr-color-brand)); font-weight: var(--lr-locale-picker-option-selected-font-weight, var(--lr-font-weight-semibold)); } @media (forced-colors: active) { :where([part='trigger']):hover:where(:not(:disabled)) { outline: var(--lr-border-width-thin) dashed Highlight; outline-offset: calc(-1 * var(--lr-border-width-thin)); } :where([part="trigger"]):active:where(:not(:disabled)) { outline-style: double; outline-width: var(--lr-border-width-medium); } [part="option"][data-active] { outline: var(--lr-border-width-thin) dashed Highlight; outline-offset: calc(-1 * var(--lr-border-width-thin)); } [part="option"][aria-selected="true"] { border-color: Highlight; border-style: double; } } [part='option-flag'] { flex: 0 0 auto; } [part='option-label'] { display: flex; flex-direction: column; min-inline-size: 0; overflow: hidden; } [part='option-label'] span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } [part='option-tag'] { font-size: var(--lr-font-size-xs); color: var(--lr-color-text-quiet); } [part='hint'] { margin-block-start: var(--lr-space-xs); font-size: var(--lr-font-size-sm); color: var(--lr-color-text-quiet); } [part='hint'][hidden] { display: none; } [part='error'] { margin-block-start: var(--lr-space-xs); font-size: var(--lr-font-size-sm); color: var(--lr-color-danger); } [part='error'][hidden] { display: none; } [part='form-control'], [part='form-control-label'], [part='hint'], [part='error'] { min-inline-size: 0; max-inline-size: 100%; overflow-wrap: anywhere; } `;export{styles};
+import{css}from"lit";import{formControlRequiredMarker}from"../../../internal/form-control.styles.js";const styles=css` :host { display: block; --_lr-locale-picker-trigger-padding-default: var(--lr-space-xs) var(--lr-space-s); --_lr-locale-picker-trigger-min-height-default: var(--lr-form-control-height); --_lr-locale-picker-font-size-default: var(--lr-form-control-font-size); --_lr-locale-picker-expand-size-default: var(--lr-size-1-75rem); --_lr-locale-picker-gap-default: var(--lr-space-xs); --_lr-locale-picker-radius-default: var(--lr-form-control-radius); } :host([size='2xs']) { --_lr-locale-picker-trigger-padding-default: var(--lr-size-0-0625rem) var(--lr-space-2xs); --_lr-locale-picker-expand-size-default: var(--lr-size-1rem); } :host([size='xs']) { --_lr-locale-picker-trigger-padding-default: var(--lr-size-0-125rem) var(--lr-space-xs); --_lr-locale-picker-expand-size-default: var(--lr-size-1rem); } :host([size='s']), :host([size='small']) { --_lr-locale-picker-trigger-padding-default: var(--lr-space-xs) var(--lr-space-xs); --_lr-locale-picker-expand-size-default: var(--lr-size-1-25rem); } :host([size='l']), :host([size='large']) { --_lr-locale-picker-trigger-padding-default: var(--lr-space-s) var(--lr-space-m); } :host([size='xl']) { --_lr-locale-picker-trigger-padding-default: var(--lr-space-m) var(--lr-space-l); } [part='form-control-label'] { display: block; margin-block-end: var(--lr-space-xs); font-size: var(--lr-font-size-md-sm); font-weight: var(--lr-font-weight-semibold); } [part='form-control-label'][hidden] { display: none; } ${formControlRequiredMarker} [part='trigger'] { display: flex; align-items: center; justify-content: space-between; gap: var(--lr-locale-picker-gap, var(--_lr-locale-picker-gap-default)); inline-size: 100%; min-block-size: var(--lr-locale-picker-trigger-height, var(--lr-locale-picker-trigger-min-height, var(--_lr-locale-picker-trigger-min-height-default))); box-sizing: border-box; block-size: var(--lr-locale-picker-trigger-height, auto); padding: var(--lr-locale-picker-trigger-padding, var(--_lr-locale-picker-trigger-padding-default)); border: var(--lr-border-width-thin) solid var(--lr-color-border); border-radius: var(--lr-locale-picker-radius, var(--_lr-locale-picker-radius-default)); background: var(--lr-color-surface); color: inherit; font: inherit; font-size: var(--lr-locale-picker-font-size, var(--_lr-locale-picker-font-size-default)); text-align: start; cursor: pointer; } [part='trigger']:focus-visible { outline: var(--lr-focus-ring-width) solid var(--lr-focus-ring-color); outline-offset: var(--lr-focus-ring-offset); } [part='trigger']:where(.flag-only) { --_lr-locale-picker-compact-size: max(var(--lr-size-24px), var(--lr-locale-picker-trigger-height, var(--lr-locale-picker-trigger-min-height, var(--_lr-locale-picker-trigger-min-height-default)))); inline-size: var(--_lr-locale-picker-compact-size); block-size: var(--_lr-locale-picker-compact-size); min-inline-size: min(var(--lr-icon-button-size), var(--_lr-locale-picker-compact-size)); min-block-size: min(var(--lr-icon-button-size), var(--_lr-locale-picker-compact-size)); justify-content: center; padding: var(--lr-locale-picker-trigger-padding, 0); } :where([part='trigger']):hover:where(:not(:disabled)) { background: var(--lr-locale-picker-trigger-hover-bg, var(--lr-color-brand-quiet)); } :where([part='trigger']):active:where(:not(:disabled)) { background: color-mix( in oklab, var(--lr-locale-picker-trigger-hover-bg, var(--lr-color-brand-quiet)), var(--lr-color-mix-partner) var(--lr-color-mix-active) ); } :host([open]) [part='trigger'] { border-color: var(--lr-locale-picker-open-border-color, var(--lr-color-brand)); } :host(:disabled) [part='trigger'] { opacity: var(--lr-opacity-disabled); cursor: not-allowed; } [part='trigger-flag'] { flex: 0 0 auto; } .trigger-label { flex: 1 1 auto; min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } [part='expand-icon'] { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; color: var(--lr-color-text-quiet); min-inline-size: min(var(--lr-icon-button-size), var(--lr-locale-picker-expand-size, var(--_lr-locale-picker-expand-size-default))); min-block-size: min(var(--lr-icon-button-size), var(--lr-locale-picker-expand-size, var(--_lr-locale-picker-expand-size-default))); line-height: var(--lr-line-height-none); } [part='expand-icon'] svg { transform: rotate(90deg); } [part='listbox'] { position: fixed; z-index: var(--lr-overlay-stack-index, var(--lr-layer-dropdown)); box-sizing: border-box; max-block-size: var(--lr-size-18rem); overflow-y: auto; overflow-x: hidden; inline-size: max-content; min-inline-size: var(--lr-size-12rem); max-inline-size: min(var(--lr-popover-viewport-clamp), var(--lr-size-28rem)); padding: var(--lr-space-xs); background: var(--lr-color-surface); border: var(--lr-border-width-thin) solid var(--lr-color-border); border-radius: var(--lr-locale-picker-radius, var(--_lr-locale-picker-radius-default)); box-shadow: var(--lr-shadow-m); visibility: hidden; opacity: 0; transform: translateY(var(--lr-size-neg-0-25rem)); transition: opacity var(--lr-transition-fast), transform var(--lr-transition-fast), visibility var(--lr-transition-fast); } :host([open]) [part='listbox'] { visibility: visible; opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { [part='listbox'] { transition: none !important; } } [part='option'] { display: flex; align-items: center; gap: var(--lr-locale-picker-gap, var(--_lr-locale-picker-gap-default)); inline-size: 100%; box-sizing: border-box; padding: var(--lr-space-xs) var(--lr-space-s); border: var(--lr-border-width-thin) solid transparent; border-radius: var(--lr-locale-picker-radius, var(--_lr-locale-picker-radius-default)); background: none; color: inherit; font: inherit; text-align: start; cursor: pointer; } [part='option']:hover { background: var( --lr-locale-picker-option-active-bg, var(--lr-color-brand-quiet) ); } [part='option'][data-active] { background: var(--lr-locale-picker-option-active-bg, var(--lr-color-brand-quiet)); } [part='option']:active { background: color-mix( in oklab, var(--lr-locale-picker-option-active-bg, var(--lr-color-brand-quiet)), var(--lr-color-mix-partner) var(--lr-color-mix-active) ); } [part='option'][aria-selected='true'] { border-color: var(--lr-locale-picker-option-selected-border-color, var(--lr-color-brand)); color: var(--lr-locale-picker-option-selected-color, var(--lr-color-brand)); font-weight: var(--lr-locale-picker-option-selected-font-weight, var(--lr-font-weight-semibold)); } @media (forced-colors: active) { :where([part='trigger']):hover:where(:not(:disabled)) { outline: var(--lr-border-width-thin) dashed Highlight; outline-offset: calc(-1 * var(--lr-border-width-thin)); } :where([part="trigger"]):active:where(:not(:disabled)) { outline-style: double; outline-width: var(--lr-border-width-medium); } [part="option"][data-active] { outline: var(--lr-border-width-thin) dashed Highlight; outline-offset: calc(-1 * var(--lr-border-width-thin)); } [part="option"][aria-selected="true"] { border-color: Highlight; border-style: double; } } [part='option-flag'] { flex: 0 0 auto; } [part='option-label'] { display: flex; flex-direction: column; min-inline-size: 0; overflow: hidden; } [part='option-label'] span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } [part='option-tag'] { font-size: var(--lr-font-size-xs); color: var(--lr-color-text-quiet); } [part='hint'] { margin-block-start: var(--lr-space-xs); font-size: var(--lr-font-size-sm); color: var(--lr-color-text-quiet); } [part='hint'][hidden] { display: none; } [part='error'] { margin-block-start: var(--lr-space-xs); font-size: var(--lr-font-size-sm); color: var(--lr-color-danger); } [part='error'][hidden] { display: none; } [part='form-control'], [part='form-control-label'], [part='hint'], [part='error'] { min-inline-size: 0; max-inline-size: 100%; overflow-wrap: anywhere; } `;export{styles};

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

@@ -8,6 +8,10 @@ export type SliderTooltipPlacement='top'|'right'|'bottom'|'left';
 /** Which handle a value belongs to: the single thumb of a plain slider, or
 *  one of the two handles of a `range` slider. */
 export type SliderHandle='value'|'min'|'max';
+/** Text used by the optional visible readout. */
+export type SliderValueDisplay='numeric'|'formatted';
+/** Places the optional readout beside the track or opposite the visible label. */
+export type SliderValuePlacement='inline'|'label';
 /** Formats a finite, clamped slider value for `aria-valuetext` (and for the
 *  `with-tooltip` bubble); return a nullish value to omit `aria-valuetext`
 *  for that handle. The second argument identifies which handle is being
@@ -93,7 +97,8 @@ export interface LyraSliderChangeDetail{value:number;minValue:number;maxValue:nu
 * @csspart tooltip__content - Tooltip text wrapper.
 * @csspart tooltip__arrow - Decorative tooltip arrow.
 * @csspart tooltip-visible - Added to `tooltip` while that handle is focused or being dragged.
-* @csspart value - The visible numeric readout, rendered when `show-value` is true.
+* @csspart value - The visible readout, rendered when `show-value` is true.
+* @csspart label-row - Label and readout row, rendered with showValue and valuePlacement="label".
 * @csspart error - The error region, hidden while neither `errorText` nor the `error` slot has content.
 * @csspart hint - The hint region, hidden while neither `hint` nor the `hint` slot has content.
 * @method focus - Focuses the first thumb, or the lower thumb in range mode.
@@ -170,9 +175,13 @@ static get validators():LyraFormValidator<LyraSlider>[];static formAssociated:bo
 size:LyraSize;private internals;private validityController;
 /** Caller-supplied constraint-validation message.
 * @default null */
-customError:string|null;private _value;private _defaultValue;private _valueDirty;private settingDefaultValue;private reflectingDefaultValue;private _name;private _required;private _disabled;private _fieldsetDisabled;private _hasInteracted;private _min;private _max;private _step;private _range;private _minValue;private _maxValue;private _minValueDirty;private _maxValueDirty;private applyingRangeValueAttribute;private _defaultMinValue;private _defaultMaxValue;constructor();
+customError:string|null;private _value;private _defaultValue;private _valueDirty;private settingDefaultValue;private reflectingDefaultValue;private _name;private _required;private _disabled;private _fieldsetDisabled;private _hasInteracted;private _min;private _max;private _step;private _range;private _minValue;private _maxValue;private _minValueDirty;private _maxValueDirty;private applyingRangeValueAttribute;private _defaultMinValue;private _defaultMaxValue;private pendingValueBatch?;
+/** Preserve pre-normalization inputs until the entire reactive batch has supplied its domain. */
+private captureValueBatch;constructor();
 /** Live numeric value. String writes remain accepted as a source-compatible input path, but
 * reads are always finite numbers; use `valueAsString` when a string round-trip is desired.
+* Assignments in one reactive batch settle against its final min/max/step at updateComplete,
+* so value-first Lit bindings retain fractions. Immediate reads use the current domain.
 * @default 0 */
 get value():number;set value(next:number|string);
 /** Reflected numeric reset default, sourced from the `value` content attribute.
@@ -270,7 +279,14 @@ tooltip:'top'|'bottom'|'none';
 *  `null`/`undefined` to omit the attribute. */
 valueFormatter?:SliderValueFormatter;
 /** Shoelace-compatible single-argument tooltip formatter. */
-tooltipFormatter?:(value:number)=>string;showValue:boolean;private hasHintSlot;private hasErrorSlot;private hasLabelSlot;private hasReferenceSlot;private drags;
+tooltipFormatter?:(value:number)=>string;showValue:boolean;
+/** Visible readout text. `formatted` reuses valueFormatter (then tooltipFormatter when absent)
+* for each handle, with localized numeric fallback for nullish results. The numeric default
+* preserves the existing showValue contract. Does not change ARIA, tooltip or event behavior. */
+valueDisplay:SliderValueDisplay;
+/** Position of the showValue readout. `label` places it at the inline end of a separate label
+* row without including its text in the control's accessible name. */
+valuePlacement:SliderValuePlacement;private hasHintSlot;private hasErrorSlot;private hasLabelSlot;private hasReferenceSlot;private drags;
 /** Exact realm carrying shared drag listeners, retained across adoption for symmetric cleanup. */
 private dragWindow?;
 /** The owner realm and handle of the pending autofocus frame, if any. */
@@ -355,8 +371,8 @@ private beginDrag;private trackRect;private onPointerDown;
 private onBasePointerDown;private onPointerMove;private onPointerUp;
 /** Stop the drag owned by `pointerId`, optionally committing a final lr-change. */
 private endDrag;private teardownDragWindow;private abortActiveDrags;private onHandleFocus;private onHandleBlur;private onSlotChange;private slotsHaveContent;private formatValue;
-/** The visible readout: one number, or both handle values joined by an en
-*  dash. Both sides are `Intl`-formatted data, never translated copy. */
+/** One value, or both handles joined by an en dash. Caller formatting is opt-in;
+* localized numeric data remains the default and nullish-result fallback. */
 private readoutText;
 /** The accessible name of the control as a whole — the single thumb's own
 *  name, or the `role="group"` name wrapping both range handles. */

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

@@ -1,4 +1,4 @@
-var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3?target:desc===null?desc=Object.getOwnPropertyDescriptor(target,key):desc,d;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")r=Reflect.decorate(decorators,target,key,desc);else for(var i=decorators.length-1;i>=0;i--)(d=decorators[i])&&(r=(c<3?d(r):c>3?d(target,key,r):d(target,key))||r);return c>3&&r&&Object.defineProperty(target,key,r),r};import{html,nothing}from"lit";import{property,state}from"lit/decorators.js";import{LyraElement}from"../../../internal/lyra-element.js";import{installFormControlLabelSupport}from"../../../internal/form-control-labels.js";installFormControlLabelSupport();import{attachInternalsSafely,getFormOwner,installCustomErrorProperty,isBarredFromValidation,setFormOwner}from"../../../internal/form-associated.js";import{AnchoredValidityController,VALIDITY_ANCHOR}from"../../../internal/anchored-validity.js";import{syncValidityStates}from"../../../internal/custom-states.js";import{installInvalidEventAlias}from"../../../internal/invalid-event-alias.js";import{sizes}from"../../../internal/sizes.styles.js";import{isRtl}from"../../../internal/rtl.js";import{finiteInterpolate,finiteNumber,finiteRange,finiteRatio,isSliderKey}from"../../../internal/numbers.js";import{clampSteppedValue}from"../../../internal/step-value.js";import{styles}from"./slider.styles.js";import{getNumberFormat}from"../../../internal/intl-cache.js";import{dispatchNativeEvent,dispatchNativeInputEvent,relayNativeEvent}from"../../../internal/native-event-relay.js";import{activeElementIn}from"../../../internal/active-element.js";import{acquireResolvedAriaRelationship}from"../../../internal/aria-controls.js";import{currentValidityValidator}from"../form-validator.js";import{LYRA_DEFAULT_fieldRequired,LYRA_DEFAULT_rangeEnd,LYRA_DEFAULT_rangeStart,LYRA_DEFAULT_sliderLabel}from"../../../internal/default-strings.generated.js";const PAGE_STEP_MULTIPLIER=10,MAX_MARKER_INTERVALS=100,falseDefaultBooleanConverter={fromAttribute:value=>value!==null&&value!=="false"},HINT_ID="slider-hint",ERROR_ID="slider-error",LABEL_ID="slider-label";class LyraSliderBase extends LyraElement{}class LyraSlider extends LyraSliderBase{static{this.defaultStrings={...super.defaultStrings,fieldRequired:LYRA_DEFAULT_fieldRequired,rangeEnd:LYRA_DEFAULT_rangeEnd,rangeStart:LYRA_DEFAULT_rangeStart,sliderLabel:LYRA_DEFAULT_sliderLabel}}static get validators(){return[currentValidityValidator("required","disabled","value","min","max","step")]}static{this.formAssociated=!0}static{this.styles=[LyraElement.styles,sizes,styles]}static{this.properties={customError:{attribute:"custom-error",reflect:!0,noAccessor:!0},value:{attribute:!1,noAccessor:!0},defaultValue:{attribute:"value",type:Number,reflect:!0,useDefault:!0,noAccessor:!0},name:{reflect:!0,noAccessor:!0},required:{type:Boolean,reflect:!0,noAccessor:!0},disabled:{type:Boolean,reflect:!0,noAccessor:!0},min:{type:Number,noAccessor:!0},max:{type:Number,noAccessor:!0},step:{type:Number,noAccessor:!0},range:{type:Boolean,reflect:!0,noAccessor:!0},minValue:{type:Number,attribute:"min-value",noAccessor:!0},maxValue:{type:Number,attribute:"max-value",noAccessor:!0},size:{reflect:!0}}}constructor(){super(),this.size="m",this._value=0,this._defaultValue=0,this._valueDirty=!1,this.settingDefaultValue=!1,this.reflectingDefaultValue=!1,this._name=null,this._required=!1,this._disabled=!1,this._fieldsetDisabled=!1,this._hasInteracted=!1,this._min=0,this._max=100,this._step=1,this._range=!1,this._minValue=0,this._maxValue=50,this._minValueDirty=!1,this._maxValueDirty=!1,this.applyingRangeValueAttribute=!1,this._defaultMinValue=0,this._defaultMaxValue=50,this.label="",this.hint="",this.helpText="",this.errorText="",this.withLabel=!1,this.withHint=!1,this.autofocus=!1,this.orientation="horizontal",this.readonly=!1,this.withMarkers=!1,this.withTooltip=!1,this.tooltipPlacement="top",this.tooltipDistance=8,this.tooltip="none",this.showValue=!1,this.hasHintSlot=!1,this.hasErrorSlot=!1,this.hasLabelSlot=!1,this.hasReferenceSlot=!1,this.drags=new Map,this.pendingKeyHandle=null,this.focusedHandle=null,this.rangeFocusGeneration=0,this.markInteracted=()=>{this._hasInteracted||(this._hasInteracted=!0,this.syncValidityStates())},this.markFocusoutInteracted=()=>{this.effectiveDisabled||this.markInteracted()},this.onKeyDown=(handle,e)=>{if(!this.interactive)return;const current=this.valueForHandle(handle),rtl=isRtl(this),forwardKey=rtl?"ArrowLeft":"ArrowRight",backwardKey=rtl?"ArrowRight":"ArrowLeft",bounds=this.reachableBounds(handle),move=next=>{e.preventDefault(),this.assignValueFor(handle,next)&&(this.pendingKeyHandle=handle,this.emitInput(handle))};e.key===forwardKey||e.key==="ArrowUp"?move(this.directionalStep(current,1)):e.key===backwardKey||e.key==="ArrowDown"?move(this.directionalStep(current,-1)):e.key==="PageUp"?move(this.directionalStep(current,PAGE_STEP_MULTIPLIER)):e.key==="PageDown"?move(this.directionalStep(current,-PAGE_STEP_MULTIPLIER)):e.key==="Home"?move(bounds.min):e.key==="End"&&move(bounds.max)},this.onKeyUp=e=>{if(!this.interactive||!isSliderKey(e.key))return;const handle=this.pendingKeyHandle;handle!==null&&(this.pendingKeyHandle=null,this.emitChange(handle))},this.onPointerDown=(handle,e)=>{!this.interactive||e.button!==0||this.beginDrag(e.pointerId,handle,e.target,this.trackRect(),isRtl(this))},this.onBasePointerDown=e=>{if(!this.interactive||e.button!==0)return;const thumbs=Array.from(this.renderRoot.querySelectorAll('[part~="thumb"]'));if(thumbs.length===0||thumbs.includes(e.target))return;const rect=this.trackRect();if(!rect)return;const rtl=isRtl(this),{lo,hi}=this.domain(),target=finiteInterpolate(lo,hi,this.ratioFromPointer(e,rect,rtl)),handle=this.range?this.nearestHandle(target):"value",thumb=this.handleElement(handle)??thumbs[0];if(!thumb)return;const drag=this.beginDrag(e.pointerId,handle,thumb,rect,rtl);drag&&(this.setValueFor(handle,target,!1)&&(drag.changed=!0),thumb.focus())},this.onPointerMove=e=>{const drag=this.drags.get(e.pointerId);if(drag===void 0)return;if(!this.interactive){this.endDrag(e.pointerId,!1);return}if(!drag.rect)return;const{lo,hi}=this.domain(),value=finiteInterpolate(lo,hi,this.ratioFromPointer(e,drag.rect,drag.rtl));this.setValueFor(drag.handle,value,!1)&&(drag.changed=!0)},this.onPointerUp=e=>{this.endDrag(e.pointerId,e.type==="pointerup"&&this.interactive)},this.onSlotChange=event=>{const slot=event.target;(slot.name==="hint"||slot.name==="help-text")&&(this.hasHintSlot=this.slotsHaveContent(["hint","help-text"])),slot.name==="error"&&(this.hasErrorSlot=this.slotsHaveContent(["error"])),slot.name==="label"&&(this.hasLabelSlot=this.slotsHaveContent(["label"])),slot.name==="reference"&&(this.hasReferenceSlot=this.slotsHaveContent(["reference"]))},this.internals=attachInternalsSafely(this),this.validityController=new AnchoredValidityController(this,this.internals,()=>this[VALIDITY_ANCHOR]()),installCustomErrorProperty(this,()=>this.validityController.customValidityMessage),installInvalidEventAlias(this,init=>this.emit("lr-invalid",null,init)),this.internals.setFormValue("0","0"),this.addEventListener("input",this.markInteracted),this.addEventListener("change",this.markInteracted),this.addEventListener("focusout",this.markFocusoutInteracted),this.syncValidityStates()}get value(){return this._value}set value(next){const old=this._value;this.settingDefaultValue||(this._valueDirty=!0),this._value=this.clampValue(finiteNumber(Number(next),this.defaultNumericValue())),this.syncFormValue(),this.requestUpdate("value",old)}get defaultValue(){return this._defaultValue}set defaultValue(next){if(this.reflectingDefaultValue)return;const old=this._defaultValue;this._defaultValue=next==null?0:finiteNumber(Number(next),0),this.reflectingDefaultValue=!0;try{next==null?this.removeAttribute("value"):this.setAttribute("value",String(this._defaultValue))}finally{this.reflectingDefaultValue=!1}this._valueDirty||this.restoreLiveValueFromDefault(),this.requestUpdate("defaultValue",old)}get valueAsNumber(){return this.value}set valueAsNumber(next){this.value=next}get valueAsString(){return String(this.value)}set valueAsString(next){this.value=next}get name(){return this._name}set name(next){const old=this._name;this._name=next||null,this._name?this.setAttribute("name",this._name):this.removeAttribute("name"),this.syncFormValue(),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 disabled(){return this._disabled}set disabled(next){const old=this._disabled;this._disabled=!!next,this.toggleAttribute("disabled",this._disabled),this._disabled&&(this.pendingKeyHandle=null,this.abortActiveDrags()),this.syncInteractionStates(),this.syncValidityStates(),this.requestUpdate("disabled",old)}get effectiveDisabled(){return this.disabled||this._fieldsetDisabled}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}get min(){return this._min}set min(next){const old=this._min;this._min=finiteNumber(next,0),this.requestUpdate("min",old),this.sanitizeCurrentValue()}get max(){return this._max}set max(next){const old=this._max;this._max=finiteNumber(next,100),this.requestUpdate("max",old),this.sanitizeCurrentValue()}get step(){return this._step}set step(next){const old=this._step;this._step=next==null?1:finiteRange(next,0,0),this.requestUpdate("step",old),this.sanitizeCurrentValue()}get range(){return this._range}set range(next){const old=this._range;this._range=!!next,this.requestUpdate("range",old),this.syncFormValue()}get isRange(){return this.range}get minValue(){return this._minValue}set minValue(next){const old=this._minValue;if(this.applyingRangeValueAttribute||(this._minValueDirty=!0),this._minValue=this.clampValue(finiteNumber(next,0)),this._minValue>this._maxValue){const oldMax=this._maxValue;this._maxValue=this._minValue,this.applyingRangeValueAttribute||(this._maxValueDirty=!0),this.requestUpdate("maxValue",oldMax)}this.syncFormValue(),this.requestUpdate("minValue",old)}get maxValue(){return this._maxValue}set maxValue(next){const old=this._maxValue;if(this.applyingRangeValueAttribute||(this._maxValueDirty=!0),this._maxValue=this.clampValue(finiteNumber(next,50)),this._maxValue<this._minValue){const oldMin=this._minValue;this._minValue=this._maxValue,this.applyingRangeValueAttribute||(this._minValueDirty=!0),this.requestUpdate("minValue",oldMin)}this.syncFormValue(),this.requestUpdate("maxValue",old)}requestUpdate(name,oldValue,options){name==="readonly"&&this.readonly&&(this.pendingKeyHandle=null,this.abortActiveDrags()),super.requestUpdate(name,oldValue,options)}syncExternalDescription(){const target=this.isConnected&&!this.range?this.firstThumb():null;if(!target){this.releaseExternalDescription();return}this.externalDescriptionLease?this.externalDescriptionLease.update(target):this.externalDescriptionLease=acquireResolvedAriaRelationship(this,target,"aria-describedby")}releaseExternalDescription(){this.externalDescriptionLease?.release(),this.externalDescriptionLease=void 0}connectedCallback(){super.connectedCallback(),this.hasUpdated&&this.syncExternalDescription(),this._valueDirty?this.sanitizeCurrentValue():this.restoreLiveValueFromDefault(),this._minValueDirty||(this._minValue=this.clampValue(this._defaultMinValue)),this._maxValueDirty||(this._maxValue=this.clampValue(this._defaultMaxValue)),this.sanitizeHandles();const slots=Array.from(this.children??[],child=>child.getAttribute("slot"));this.hasHintSlot=slots.some(slot=>slot==="hint"||slot==="help-text"),this.hasErrorSlot=slots.includes("error"),this.hasLabelSlot=slots.includes("label"),this.hasReferenceSlot=slots.includes("reference"),this.syncFormValue(),this.updateValidity(),this.syncInteractionStates()}willUpdate(changed){if(super.willUpdate(changed),!changed.has("range")||!this.hasUpdated)return;const active=activeElementIn(this.shadowRoot);if(active?.matches('[part~="thumb"]')){const target=this.range?"min":"value";this.rangeFocusTransfer={origin:active,target},this.focusedHandle=target,this.syncInteractionStates(),this.rangeFocusGeneration++}this.pendingKeyHandle=null,this.abortActiveDrags()}updated(changed){if(super.updated(changed),this.syncExternalDescription(),changed.has("readonly")&&this.syncValidityStates(),!changed.has("range"))return;const transfer=this.rangeFocusTransfer;if(this.rangeFocusTransfer=void 0,!transfer)return;const generation=this.rangeFocusGeneration;this.scheduleAfterUpdate(()=>{if(generation!==this.rangeFocusGeneration||!this.isConnected||this.effectiveDisabled)return;const internalActive=activeElementIn(this.shadowRoot),documentActive=activeElementIn(this.ownerDocument),focusStayedAtOrigin=internalActive===transfer.origin,originWasRemovedWithoutReplacement=internalActive===null&&(documentActive===null||documentActive===this||documentActive===this.ownerDocument.body);if(!focusStayedAtOrigin&&!originWasRemovedWithoutReplacement)return;this.handleElement(transfer.target)?.focus()},"slider-range-focus")}firstUpdated(changed){if(super.firstUpdated(changed),!this.autofocus)return;const owner=this.ownerDocument.defaultView;if(!owner)return;const handle=owner.requestAnimationFrame(()=>{this.autofocusFrame?.owner!==owner||this.autofocusFrame.handle!==handle||(this.autofocusFrame=void 0,this.isConnected&&this.ownerDocument.defaultView===owner&&this.autofocus&&this.focus())});this.autofocusFrame={owner,handle}}disconnectedCallback(){this.releaseExternalDescription(),super.disconnectedCallback(),this.rangeFocusGeneration++,this.rangeFocusTransfer=void 0,this.abortActiveDrags(),this.pendingKeyHandle=null,this.focusedHandle=null,this.syncInteractionStates(),this.teardownDragWindow(),this.cancelAutofocusFrame()}adoptedCallback(){super.adoptedCallback(),this.releaseExternalDescription(),this.isConnected&&this.hasUpdated&&this.syncExternalDescription(),this.rangeFocusGeneration++,this.rangeFocusTransfer=void 0,this.abortActiveDrags(),this.pendingKeyHandle=null,this.focusedHandle=null,this.syncInteractionStates(),this.teardownDragWindow(),this.cancelAutofocusFrame()}cancelAutofocusFrame(){const autofocusFrame=this.autofocusFrame;this.autofocusFrame=void 0,autofocusFrame&&autofocusFrame.owner.cancelAnimationFrame(autofocusFrame.handle)}attributeChangedCallback(name,old,value){const isRangeValue=name==="min-value"||name==="max-value";isRangeValue&&(this.applyingRangeValueAttribute=!0);try{super.attributeChangedCallback(name,old,value)}finally{isRangeValue&&(this.applyingRangeValueAttribute=!1)}name==="min-value"&&(this._defaultMinValue=value===null?0:finiteNumber(Number(value),0)),name==="max-value"&&(this._defaultMaxValue=value===null?50:finiteNumber(Number(value),50))}formDisabledCallback(fieldsetDisabled){this._fieldsetDisabled=fieldsetDisabled,fieldsetDisabled&&(this.pendingKeyHandle=null,this.abortActiveDrags()),this.syncInteractionStates(),this.syncValidityStates(),this.requestUpdate()}[VALIDITY_ANCHOR](){return this.firstThumb()}checkValidity(){return this.internals.checkValidity()}reportValidity(){return this.markInteracted(),this.internals.reportValidity()}setCustomValidity(message){this.validityController.setCustomValidity(message??""),this.syncValidityStates(),this.requestUpdate()}resetValidity(){this.setCustomValidity("")}formResetCallback(){this.restoreLiveValueFromDefault(),this._minValue=this._defaultMinValue,this._maxValue=this._defaultMaxValue,this._minValueDirty=!1,this._maxValueDirty=!1,this.sanitizeHandles(),this._hasInteracted=!1,this.syncFormValue(),this.syncValidityStates(),this.requestUpdate()}formStateRestoreCallback(state2,reason){const values=this.readFormDataStrings(state2);if(values){values.length>=2&&(this.minValue=finiteNumber(Number(values[0]),this._defaultMinValue),this.maxValue=finiteNumber(Number(values[1]),this._defaultMaxValue));return}this.value=typeof state2=="string"?state2:this._defaultValue}readFormDataStrings(value){if(value===null||typeof value!="object")return null;const FormDataCtor=this.ownerDocument.defaultView?.FormData;if(!FormDataCtor)return null;try{const iterator=FormDataCtor.prototype.values.call(value),strings=[];for(const entry of iterator)typeof entry=="string"&&strings.push(entry);return strings}catch{return null}}restoreLiveValueFromDefault(){this.settingDefaultValue=!0;try{this.value=this._defaultValue}finally{this.settingDefaultValue=!1}this._valueDirty=!1}updateValidity(){this.validityController.setValidity({}),this.syncValidityStates()}get barredFromValidation(){return isBarredFromValidation(this,this.internals)}syncValidityStates(){syncValidityStates(this.internals,{required:this.required,hasInteracted:this._hasInteracted,barred:this.barredFromValidation})}syncInteractionStates(){const states=this.internals.states,set=(name,active)=>{active?states.add(name):states.delete(name)};set("disabled",this.effectiveDisabled),set("dragging",this.drags.size>0),set("focused",this.focusedHandle!==null)}click(){this.effectiveDisabled||this.firstThumb()?.click()}focus(options){this.effectiveDisabled||this.firstThumb()?.focus(options)}blur(){const active=activeElementIn(this.shadowRoot);active?.nodeType===1&&typeof active.matches=="function"&&typeof active.blur=="function"&&active.matches('[part~="thumb"]')?active.blur():this.firstThumb()?.blur()}stepUp(steps=1){this.stepBy(steps)}stepDown(steps=1){this.stepBy(-steps)}stepBy(steps){if(!this.interactive||finiteRange(this.step,0,0)<=0)return;const count=Math.trunc(finiteNumber(steps,1));if(count===0)return;const handle=this.range&&this.focusedHandle!=="max"?"min":this.focusedHandle??"value";this.assignValueFor(handle,this.directionalStep(this.valueForHandle(handle),count))}directionalStep(current,count){const{lo,hi}=this.domain();if(count===0)return current;const direction=Math.sign(count),magnitude=this.step*Math.abs(count);if(!Number.isFinite(magnitude))return direction>0?hi:lo;const candidate=current+direction*magnitude;return Number.isFinite(candidate)?candidate:direction>0?hi:lo}firstThumb(){return this.renderRoot?.querySelector('[part~="thumb"]')??null}handleElement(handle){const selector={value:'[part~="thumb"]',min:'[part~="thumb-min"]',max:'[part~="thumb-max"]'}[handle];return this.renderRoot?.querySelector(selector)??null}get interactive(){return!this.effectiveDisabled&&!this.matches(":disabled")&&!this.readonly}sanitizeCurrentValue(){this.sanitizeHandles();const old=this._value;this._value=this.clampValue(this._value),this._value!==old&&this.requestUpdate("value",old),this.syncFormValue()}sanitizeHandles(){this._minValue=this.clampValue(this._minValue),this._maxValue=this.clampValue(this._maxValue),this._minValue>this._maxValue&&(this._maxValue=this._minValue)}syncFormValue(){if(!this.internals)return;if(!this.range){const serialized=String(this.value);this.internals.setFormValue(serialized,serialized),this.updateValidity();return}const FormDataCtor=this.ownerDocument?.defaultView?.FormData;if(!FormDataCtor){this.internals.setFormValue(null),this.updateValidity();return}const state2=new FormDataCtor,stateKey=this.name||"value";if(state2.append(stateKey,String(this.minValue)),state2.append(stateKey,String(this.maxValue)),!this.name)this.internals.setFormValue(null,state2);else{const submission=new FormDataCtor;submission.append(this.name,String(this.minValue)),submission.append(this.name,String(this.maxValue)),this.internals.setFormValue(submission,state2)}this.updateValidity()}domain(){const min=finiteNumber(this.min,0),max=finiteNumber(this.max,100);return{lo:Math.min(min,max),hi:Math.max(min,max)}}defaultNumericValue(){return this.clampValue(0)}percentOf(value){const{lo,hi}=this.domain(),safeValue=finiteRange(value,lo,lo,hi);return finiteRatio(safeValue,lo,hi)*100}clampValue(raw){const{lo,hi}=this.domain();return clampSteppedValue(raw,lo,hi,this.step)}valueForHandle(handle){return handle==="min"?this.minValue:handle==="max"?this.maxValue:this.valueAsNumber}reachableBounds(handle){const{lo,hi}=this.domain();return{min:lo,max:hi}}detailFor(handle){return{value:this.valueForHandle(handle),minValue:this.minValue,maxValue:this.maxValue,handle}}emitInput(handle){dispatchNativeInputEvent(this),this.emit("lr-input",this.detailFor(handle))}emitChange(handle){dispatchNativeEvent(this,"change"),this.emit("lr-change",this.detailFor(handle))}assignValueFor(handle,raw){const previous=this.valueForHandle(handle),stepped=this.clampValue(raw);if(stepped===previous)return!1;if(handle==="min"){if(this._minValueDirty=!0,this._minValue=stepped,this.requestUpdate("minValue",previous),this._minValue>this._maxValue){const previousMax=this._maxValue;this._maxValueDirty=!0,this._maxValue=this._minValue,this.requestUpdate("maxValue",previousMax)}}else if(handle==="max"){if(this._maxValueDirty=!0,this._maxValue=stepped,this.requestUpdate("maxValue",previous),this._maxValue<this._minValue){const previousMin=this._minValue;this._minValueDirty=!0,this._minValue=this._maxValue,this.requestUpdate("minValue",previousMin)}}else this.value=stepped;return handle!=="value"&&this.syncFormValue(),!0}setValueFor(handle,raw,commit){return this.assignValueFor(handle,raw)?(this.emitInput(handle),commit&&this.emitChange(handle),!0):!1}ratioFromPointer(e,rect,rtl){if(this.orientation==="vertical"){const raw2=rect.height===0?0:(e.clientY-rect.top)/rect.height;return Math.min(1,Math.max(0,1-raw2))}const raw=rect.width===0?0:(e.clientX-rect.left)/rect.width;return Math.min(1,Math.max(0,rtl?1-raw:raw))}nearestHandle(target){const toMin=Math.abs(target-this.minValue),toMax=Math.abs(target-this.maxValue);return toMin<toMax?"min":toMax<toMin?"max":target<this.minValue?"min":"max"}beginDrag(pointerId,handle,captureTarget,rect,rtl){const dragWindow=captureTarget.ownerDocument.defaultView;if(!this.isConnected||!dragWindow)return;const firstDrag=this.drags.size===0;if(!firstDrag&&this.dragWindow!==dragWindow)return;captureTarget.setPointerCapture(pointerId);const drag={handle,changed:!1,captureTarget,rect,rtl};return this.drags.set(pointerId,drag),firstDrag&&(this.dragWindow=dragWindow,dragWindow.addEventListener("pointermove",this.onPointerMove),dragWindow.addEventListener("pointerup",this.onPointerUp),dragWindow.addEventListener("pointercancel",this.onPointerUp),dragWindow.addEventListener("lostpointercapture",this.onPointerUp)),this.syncInteractionStates(),this.requestUpdate(),drag}trackRect(){return this.renderRoot.querySelector('[part="track"]')?.getBoundingClientRect()??null}endDrag(pointerId,commit){const drag=this.drags.get(pointerId);drag!==void 0&&(this.drags.delete(pointerId),commit&&drag.changed&&this.emitChange(drag.handle),this.drags.size===0&&this.teardownDragWindow(),this.syncInteractionStates(),this.requestUpdate())}teardownDragWindow(){const dragWindow=this.dragWindow;this.dragWindow=void 0,dragWindow?.removeEventListener("pointermove",this.onPointerMove),dragWindow?.removeEventListener("pointerup",this.onPointerUp),dragWindow?.removeEventListener("pointercancel",this.onPointerUp),dragWindow?.removeEventListener("lostpointercapture",this.onPointerUp)}abortActiveDrags(){const activeDrags=[...this.drags.entries()];if(activeDrags.length!==0){this.drags.clear(),this.teardownDragWindow();for(const[pointerId,drag]of activeDrags)try{drag.captureTarget.hasPointerCapture(pointerId)&&drag.captureTarget.releasePointerCapture(pointerId)}catch{}this.syncInteractionStates()}}onHandleFocus(handle,event){this.focusedHandle!==handle&&(this.focusedHandle=handle,this.syncInteractionStates(),this.requestUpdate()),relayNativeEvent(this,event)}onHandleBlur(handle,event){this.pendingKeyHandle===handle&&(this.pendingKeyHandle=null,this.interactive&&this.isConnected&&this.emitChange(handle)),this.focusedHandle===handle&&(this.focusedHandle=null,this.syncInteractionStates(),this.requestUpdate()),relayNativeEvent(this,event)}slotsHaveContent(names){return names.some(name=>this.renderRoot.querySelector(`slot[name="${name}"]`)?.assignedNodes({flatten:!0}).some(node=>node.nodeType===1||!!node.textContent?.trim())??!1)}formatValue(value){return getNumberFormat(this.effectiveLocale,{maximumFractionDigits:20}).format(value)}readoutText(){return this.range?`${this.formatValue(this.minValue)}–${this.formatValue(this.maxValue)}`:this.formatValue(this.valueAsNumber)}resolvedLabel(){const hostLabel=this.getAttribute("aria-label");return hostLabel!==null?hostLabel:this.label||this.localize("sliderLabel")}offsetStyle(percent){return this.orientation==="vertical"?`inset-block-end:${percent}%`:`inset-inline-start:${percent}%`}markerPercents(){if(!this.withMarkers)return[];const step=finiteRange(this.step,0,0);if(step<=0)return[];const{lo,hi}=this.domain(),span=hi-lo;if(!Number.isFinite(span)||span<=0)return[];const ratio=span/step,intervals=Math.floor(ratio+Number.EPSILON*Math.max(1,Math.abs(ratio))*4);return!Number.isFinite(intervals)||intervals<1||intervals>MAX_MARKER_INTERVALS?[]:Array.from({length:intervals+1},(_unused,index)=>{const value=lo+index*step;return finiteRatio(value,lo,hi)*100})}renderHandle(handle,describedBy,labelledBy){const value=this.valueForHandle(handle),bounds=this.reachableBounds(handle),percent=this.percentOf(value),numeric=this.formatValue(value),valueText=this.valueFormatter?this.valueFormatter(value,handle):this.tooltipFormatter?this.tooltipFormatter(value):numeric,partName={value:"thumb",min:"thumb thumb-min",max:"thumb thumb-max"}[handle],handleLabel={value:this.resolvedLabel(),min:this.localize("rangeStart"),max:this.localize("rangeEnd")}[handle],tooltipPart=this.focusedHandle===handle||Array.from(this.drags.values()).some(drag=>drag.handle===handle)?"tooltip tooltip__tooltip tooltip-visible":"tooltip tooltip__tooltip",showTooltip=this.withTooltip||this.tooltip!=="none",placement=this.tooltip==="none"?this.tooltipPlacement:this.tooltip,tooltipStyle=`${this.offsetStyle(percent)};--lr-slider-tooltip-distance:${finiteRange(this.tooltipDistance,8,0)}`;return html`
+var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3?target:desc===null?desc=Object.getOwnPropertyDescriptor(target,key):desc,d;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")r=Reflect.decorate(decorators,target,key,desc);else for(var i=decorators.length-1;i>=0;i--)(d=decorators[i])&&(r=(c<3?d(r):c>3?d(target,key,r):d(target,key))||r);return c>3&&r&&Object.defineProperty(target,key,r),r};import{html,nothing}from"lit";import{property,state}from"lit/decorators.js";import{LyraElement}from"../../../internal/lyra-element.js";import{installFormControlLabelSupport}from"../../../internal/form-control-labels.js";installFormControlLabelSupport();import{attachInternalsSafely,getFormOwner,installCustomErrorProperty,isBarredFromValidation,setFormOwner}from"../../../internal/form-associated.js";import{AnchoredValidityController,VALIDITY_ANCHOR}from"../../../internal/anchored-validity.js";import{syncValidityStates}from"../../../internal/custom-states.js";import{installInvalidEventAlias}from"../../../internal/invalid-event-alias.js";import{sizes}from"../../../internal/sizes.styles.js";import{isRtl}from"../../../internal/rtl.js";import{finiteInterpolate,finiteNumber,finiteRange,finiteRatio,isSliderKey}from"../../../internal/numbers.js";import{clampSteppedValue}from"../../../internal/step-value.js";import{styles}from"./slider.styles.js";import{getNumberFormat}from"../../../internal/intl-cache.js";import{dispatchNativeEvent,dispatchNativeInputEvent,relayNativeEvent}from"../../../internal/native-event-relay.js";import{activeElementIn}from"../../../internal/active-element.js";import{acquireResolvedAriaRelationship}from"../../../internal/aria-controls.js";import{currentValidityValidator}from"../form-validator.js";import{LYRA_DEFAULT_fieldRequired,LYRA_DEFAULT_rangeEnd,LYRA_DEFAULT_rangeStart,LYRA_DEFAULT_sliderLabel}from"../../../internal/default-strings.generated.js";const PAGE_STEP_MULTIPLIER=10,MAX_MARKER_INTERVALS=100,falseDefaultBooleanConverter={fromAttribute:value=>value!==null&&value!=="false"},HINT_ID="slider-hint",ERROR_ID="slider-error",LABEL_ID="slider-label";class LyraSliderBase extends LyraElement{}class LyraSlider extends LyraSliderBase{static{this.defaultStrings={...super.defaultStrings,fieldRequired:LYRA_DEFAULT_fieldRequired,rangeEnd:LYRA_DEFAULT_rangeEnd,rangeStart:LYRA_DEFAULT_rangeStart,sliderLabel:LYRA_DEFAULT_sliderLabel}}static get validators(){return[currentValidityValidator("required","disabled","value","min","max","step")]}static{this.formAssociated=!0}static{this.styles=[LyraElement.styles,sizes,styles]}static{this.properties={customError:{attribute:"custom-error",reflect:!0,noAccessor:!0},value:{attribute:!1,noAccessor:!0},defaultValue:{attribute:"value",type:Number,reflect:!0,useDefault:!0,noAccessor:!0},name:{reflect:!0,noAccessor:!0},required:{type:Boolean,reflect:!0,noAccessor:!0},disabled:{type:Boolean,reflect:!0,noAccessor:!0},min:{type:Number,noAccessor:!0},max:{type:Number,noAccessor:!0},step:{type:Number,noAccessor:!0},range:{type:Boolean,reflect:!0,noAccessor:!0},minValue:{type:Number,attribute:"min-value",noAccessor:!0},maxValue:{type:Number,attribute:"max-value",noAccessor:!0},size:{reflect:!0}}}captureValueBatch(){return this.pendingValueBatch||(this.pendingValueBatch={value:this._value,min:this._minValue,max:this._maxValue},this.requestUpdate()),this.pendingValueBatch}constructor(){super(),this.size="m",this._value=0,this._defaultValue=0,this._valueDirty=!1,this.settingDefaultValue=!1,this.reflectingDefaultValue=!1,this._name=null,this._required=!1,this._disabled=!1,this._fieldsetDisabled=!1,this._hasInteracted=!1,this._min=0,this._max=100,this._step=1,this._range=!1,this._minValue=0,this._maxValue=50,this._minValueDirty=!1,this._maxValueDirty=!1,this.applyingRangeValueAttribute=!1,this._defaultMinValue=0,this._defaultMaxValue=50,this.label="",this.hint="",this.helpText="",this.errorText="",this.withLabel=!1,this.withHint=!1,this.autofocus=!1,this.orientation="horizontal",this.readonly=!1,this.withMarkers=!1,this.withTooltip=!1,this.tooltipPlacement="top",this.tooltipDistance=8,this.tooltip="none",this.showValue=!1,this.valueDisplay="numeric",this.valuePlacement="inline",this.hasHintSlot=!1,this.hasErrorSlot=!1,this.hasLabelSlot=!1,this.hasReferenceSlot=!1,this.drags=new Map,this.pendingKeyHandle=null,this.focusedHandle=null,this.rangeFocusGeneration=0,this.markInteracted=()=>{this._hasInteracted||(this._hasInteracted=!0,this.syncValidityStates())},this.markFocusoutInteracted=()=>{this.effectiveDisabled||this.markInteracted()},this.onKeyDown=(handle,e)=>{if(!this.interactive)return;const current=this.valueForHandle(handle),rtl=isRtl(this),forwardKey=rtl?"ArrowLeft":"ArrowRight",backwardKey=rtl?"ArrowRight":"ArrowLeft",bounds=this.reachableBounds(handle),move=next=>{e.preventDefault(),this.assignValueFor(handle,next)&&(this.pendingKeyHandle=handle,this.emitInput(handle))};e.key===forwardKey||e.key==="ArrowUp"?move(this.directionalStep(current,1)):e.key===backwardKey||e.key==="ArrowDown"?move(this.directionalStep(current,-1)):e.key==="PageUp"?move(this.directionalStep(current,PAGE_STEP_MULTIPLIER)):e.key==="PageDown"?move(this.directionalStep(current,-PAGE_STEP_MULTIPLIER)):e.key==="Home"?move(bounds.min):e.key==="End"&&move(bounds.max)},this.onKeyUp=e=>{if(!this.interactive||!isSliderKey(e.key))return;const handle=this.pendingKeyHandle;handle!==null&&(this.pendingKeyHandle=null,this.emitChange(handle))},this.onPointerDown=(handle,e)=>{!this.interactive||e.button!==0||this.beginDrag(e.pointerId,handle,e.target,this.trackRect(),isRtl(this))},this.onBasePointerDown=e=>{if(!this.interactive||e.button!==0)return;const thumbs=Array.from(this.renderRoot.querySelectorAll('[part~="thumb"]'));if(thumbs.length===0||thumbs.includes(e.target))return;const rect=this.trackRect();if(!rect)return;const rtl=isRtl(this),{lo,hi}=this.domain(),target=finiteInterpolate(lo,hi,this.ratioFromPointer(e,rect,rtl)),handle=this.range?this.nearestHandle(target):"value",thumb=this.handleElement(handle)??thumbs[0];if(!thumb)return;const drag=this.beginDrag(e.pointerId,handle,thumb,rect,rtl);drag&&(this.setValueFor(handle,target,!1)&&(drag.changed=!0),thumb.focus())},this.onPointerMove=e=>{const drag=this.drags.get(e.pointerId);if(drag===void 0)return;if(!this.interactive){this.endDrag(e.pointerId,!1);return}if(!drag.rect)return;const{lo,hi}=this.domain(),value=finiteInterpolate(lo,hi,this.ratioFromPointer(e,drag.rect,drag.rtl));this.setValueFor(drag.handle,value,!1)&&(drag.changed=!0)},this.onPointerUp=e=>{this.endDrag(e.pointerId,e.type==="pointerup"&&this.interactive)},this.onSlotChange=event=>{const slot=event.target;(slot.name==="hint"||slot.name==="help-text")&&(this.hasHintSlot=this.slotsHaveContent(["hint","help-text"])),slot.name==="error"&&(this.hasErrorSlot=this.slotsHaveContent(["error"])),slot.name==="label"&&(this.hasLabelSlot=this.slotsHaveContent(["label"])),slot.name==="reference"&&(this.hasReferenceSlot=this.slotsHaveContent(["reference"]))},this.internals=attachInternalsSafely(this),this.validityController=new AnchoredValidityController(this,this.internals,()=>this[VALIDITY_ANCHOR]()),installCustomErrorProperty(this,()=>this.validityController.customValidityMessage),installInvalidEventAlias(this,init=>this.emit("lr-invalid",null,init)),this.internals.setFormValue("0","0"),this.addEventListener("input",this.markInteracted),this.addEventListener("change",this.markInteracted),this.addEventListener("focusout",this.markFocusoutInteracted),this.syncValidityStates()}get value(){return this._value}set value(next){const old=this._value;this.settingDefaultValue||(this._valueDirty=!0);const raw=finiteNumber(Number(next),this.defaultNumericValue());this.captureValueBatch().value=raw,this._value=this.clampValue(raw),this.syncFormValue(),this.requestUpdate("value",old)}get defaultValue(){return this._defaultValue}set defaultValue(next){if(this.reflectingDefaultValue)return;const old=this._defaultValue;this._defaultValue=next==null?0:finiteNumber(Number(next),0),this.reflectingDefaultValue=!0;try{next==null?this.removeAttribute("value"):this.setAttribute("value",String(this._defaultValue))}finally{this.reflectingDefaultValue=!1}this._valueDirty||this.restoreLiveValueFromDefault(),this.requestUpdate("defaultValue",old)}get valueAsNumber(){return this.value}set valueAsNumber(next){this.value=next}get valueAsString(){return String(this.value)}set valueAsString(next){this.value=next}get name(){return this._name}set name(next){const old=this._name;this._name=next||null,this._name?this.setAttribute("name",this._name):this.removeAttribute("name"),this.syncFormValue(),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 disabled(){return this._disabled}set disabled(next){const old=this._disabled;this._disabled=!!next,this.toggleAttribute("disabled",this._disabled),this._disabled&&(this.pendingKeyHandle=null,this.abortActiveDrags()),this.syncInteractionStates(),this.syncValidityStates(),this.requestUpdate("disabled",old)}get effectiveDisabled(){return this.disabled||this._fieldsetDisabled}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}get min(){return this._min}set min(next){this.captureValueBatch();const old=this._min;this._min=finiteNumber(next,0),this.requestUpdate("min",old),this.sanitizeCurrentValue()}get max(){return this._max}set max(next){this.captureValueBatch();const old=this._max;this._max=finiteNumber(next,100),this.requestUpdate("max",old),this.sanitizeCurrentValue()}get step(){return this._step}set step(next){this.captureValueBatch();const old=this._step;this._step=next==null?1:finiteRange(next,0,0),this.requestUpdate("step",old),this.sanitizeCurrentValue()}get range(){return this._range}set range(next){const old=this._range;this._range=!!next,this.requestUpdate("range",old),this.syncFormValue()}get isRange(){return this.range}get minValue(){return this._minValue}set minValue(next){const batch=this.captureValueBatch();batch.min=finiteNumber(next,0),batch.lastRange="min";const old=this._minValue;if(this.applyingRangeValueAttribute||(this._minValueDirty=!0),this._minValue=this.clampValue(finiteNumber(next,0)),this._minValue>this._maxValue){const oldMax=this._maxValue;this._maxValue=this._minValue,this.applyingRangeValueAttribute||(this._maxValueDirty=!0),this.requestUpdate("maxValue",oldMax)}this.syncFormValue(),this.requestUpdate("minValue",old)}get maxValue(){return this._maxValue}set maxValue(next){const batch=this.captureValueBatch();batch.max=finiteNumber(next,50),batch.lastRange="max";const old=this._maxValue;if(this.applyingRangeValueAttribute||(this._maxValueDirty=!0),this._maxValue=this.clampValue(finiteNumber(next,50)),this._maxValue<this._minValue){const oldMin=this._minValue;this._minValue=this._maxValue,this.applyingRangeValueAttribute||(this._minValueDirty=!0),this.requestUpdate("minValue",oldMin)}this.syncFormValue(),this.requestUpdate("maxValue",old)}requestUpdate(name,oldValue,options){name==="readonly"&&this.readonly&&(this.pendingKeyHandle=null,this.abortActiveDrags()),super.requestUpdate(name,oldValue,options)}syncExternalDescription(){const target=this.isConnected&&!this.range?this.firstThumb():null;if(!target){this.releaseExternalDescription();return}this.externalDescriptionLease?this.externalDescriptionLease.update(target):this.externalDescriptionLease=acquireResolvedAriaRelationship(this,target,"aria-describedby")}releaseExternalDescription(){this.externalDescriptionLease?.release(),this.externalDescriptionLease=void 0}connectedCallback(){super.connectedCallback(),this.hasUpdated&&this.syncExternalDescription(),this._valueDirty?this.sanitizeCurrentValue():this.restoreLiveValueFromDefault(),this._minValueDirty||(this._minValue=this.clampValue(this._defaultMinValue)),this._maxValueDirty||(this._maxValue=this.clampValue(this._defaultMaxValue)),this.sanitizeHandles();const slots=Array.from(this.children??[],child=>child.getAttribute("slot"));this.hasHintSlot=slots.some(slot=>slot==="hint"||slot==="help-text"),this.hasErrorSlot=slots.includes("error"),this.hasLabelSlot=slots.includes("label"),this.hasReferenceSlot=slots.includes("reference"),this.syncFormValue(),this.updateValidity(),this.syncInteractionStates()}willUpdate(changed){if(super.willUpdate(changed),this.pendingValueBatch&&(this.sanitizeCurrentValue(),this.pendingValueBatch=void 0),!changed.has("range")||!this.hasUpdated)return;const active=activeElementIn(this.shadowRoot);if(active?.matches('[part~="thumb"]')){const target=this.range?"min":"value";this.rangeFocusTransfer={origin:active,target},this.focusedHandle=target,this.syncInteractionStates(),this.rangeFocusGeneration++}this.pendingKeyHandle=null,this.abortActiveDrags()}updated(changed){if(super.updated(changed),this.syncExternalDescription(),changed.has("readonly")&&this.syncValidityStates(),!changed.has("range"))return;const transfer=this.rangeFocusTransfer;if(this.rangeFocusTransfer=void 0,!transfer)return;const generation=this.rangeFocusGeneration;this.scheduleAfterUpdate(()=>{if(generation!==this.rangeFocusGeneration||!this.isConnected||this.effectiveDisabled)return;const internalActive=activeElementIn(this.shadowRoot),documentActive=activeElementIn(this.ownerDocument),focusStayedAtOrigin=internalActive===transfer.origin,originWasRemovedWithoutReplacement=internalActive===null&&(documentActive===null||documentActive===this||documentActive===this.ownerDocument.body);if(!focusStayedAtOrigin&&!originWasRemovedWithoutReplacement)return;this.handleElement(transfer.target)?.focus()},"slider-range-focus")}firstUpdated(changed){if(super.firstUpdated(changed),!this.autofocus)return;const owner=this.ownerDocument.defaultView;if(!owner)return;const handle=owner.requestAnimationFrame(()=>{this.autofocusFrame?.owner!==owner||this.autofocusFrame.handle!==handle||(this.autofocusFrame=void 0,this.isConnected&&this.ownerDocument.defaultView===owner&&this.autofocus&&this.focus())});this.autofocusFrame={owner,handle}}disconnectedCallback(){this.releaseExternalDescription(),super.disconnectedCallback(),this.rangeFocusGeneration++,this.rangeFocusTransfer=void 0,this.abortActiveDrags(),this.pendingKeyHandle=null,this.focusedHandle=null,this.syncInteractionStates(),this.teardownDragWindow(),this.cancelAutofocusFrame()}adoptedCallback(){super.adoptedCallback(),this.releaseExternalDescription(),this.isConnected&&this.hasUpdated&&this.syncExternalDescription(),this.rangeFocusGeneration++,this.rangeFocusTransfer=void 0,this.abortActiveDrags(),this.pendingKeyHandle=null,this.focusedHandle=null,this.syncInteractionStates(),this.teardownDragWindow(),this.cancelAutofocusFrame()}cancelAutofocusFrame(){const autofocusFrame=this.autofocusFrame;this.autofocusFrame=void 0,autofocusFrame&&autofocusFrame.owner.cancelAnimationFrame(autofocusFrame.handle)}attributeChangedCallback(name,old,value){const isRangeValue=name==="min-value"||name==="max-value";isRangeValue&&(this.applyingRangeValueAttribute=!0);try{super.attributeChangedCallback(name,old,value)}finally{isRangeValue&&(this.applyingRangeValueAttribute=!1)}name==="min-value"&&(this._defaultMinValue=value===null?0:finiteNumber(Number(value),0)),name==="max-value"&&(this._defaultMaxValue=value===null?50:finiteNumber(Number(value),50))}formDisabledCallback(fieldsetDisabled){this._fieldsetDisabled=fieldsetDisabled,fieldsetDisabled&&(this.pendingKeyHandle=null,this.abortActiveDrags()),this.syncInteractionStates(),this.syncValidityStates(),this.requestUpdate()}[VALIDITY_ANCHOR](){return this.firstThumb()}checkValidity(){return this.internals.checkValidity()}reportValidity(){return this.markInteracted(),this.internals.reportValidity()}setCustomValidity(message){this.validityController.setCustomValidity(message??""),this.syncValidityStates(),this.requestUpdate()}resetValidity(){this.setCustomValidity("")}formResetCallback(){this.pendingValueBatch={value:this._defaultValue,min:this._defaultMinValue,max:this._defaultMaxValue},this.restoreLiveValueFromDefault(),this._minValue=this._defaultMinValue,this._maxValue=this._defaultMaxValue,this._minValueDirty=!1,this._maxValueDirty=!1,this.sanitizeHandles(),this._hasInteracted=!1,this.syncFormValue(),this.syncValidityStates(),this.requestUpdate()}formStateRestoreCallback(state2,reason){const values=this.readFormDataStrings(state2);if(values){values.length>=2&&(this.minValue=finiteNumber(Number(values[0]),this._defaultMinValue),this.maxValue=finiteNumber(Number(values[1]),this._defaultMaxValue));return}this.value=typeof state2=="string"?state2:this._defaultValue}readFormDataStrings(value){if(value===null||typeof value!="object")return null;const FormDataCtor=this.ownerDocument.defaultView?.FormData;if(!FormDataCtor)return null;try{const iterator=FormDataCtor.prototype.values.call(value),strings=[];for(const entry of iterator)typeof entry=="string"&&strings.push(entry);return strings}catch{return null}}restoreLiveValueFromDefault(){this.settingDefaultValue=!0;try{this.value=this._defaultValue}finally{this.settingDefaultValue=!1}this._valueDirty=!1}updateValidity(){this.validityController.setValidity({}),this.syncValidityStates()}get barredFromValidation(){return isBarredFromValidation(this,this.internals)}syncValidityStates(){syncValidityStates(this.internals,{required:this.required,hasInteracted:this._hasInteracted,barred:this.barredFromValidation})}syncInteractionStates(){const states=this.internals.states,set=(name,active)=>{active?states.add(name):states.delete(name)};set("disabled",this.effectiveDisabled),set("dragging",this.drags.size>0),set("focused",this.focusedHandle!==null)}click(){this.effectiveDisabled||this.firstThumb()?.click()}focus(options){this.effectiveDisabled||this.firstThumb()?.focus(options)}blur(){const active=activeElementIn(this.shadowRoot);active?.nodeType===1&&typeof active.matches=="function"&&typeof active.blur=="function"&&active.matches('[part~="thumb"]')?active.blur():this.firstThumb()?.blur()}stepUp(steps=1){this.stepBy(steps)}stepDown(steps=1){this.stepBy(-steps)}stepBy(steps){if(!this.interactive||finiteRange(this.step,0,0)<=0)return;const count=Math.trunc(finiteNumber(steps,1));if(count===0)return;const handle=this.range&&this.focusedHandle!=="max"?"min":this.focusedHandle??"value";this.assignValueFor(handle,this.directionalStep(this.valueForHandle(handle),count))}directionalStep(current,count){const{lo,hi}=this.domain();if(count===0)return current;const direction=Math.sign(count),magnitude=this.step*Math.abs(count);if(!Number.isFinite(magnitude))return direction>0?hi:lo;const candidate=current+direction*magnitude;return Number.isFinite(candidate)?candidate:direction>0?hi:lo}firstThumb(){return this.renderRoot?.querySelector('[part~="thumb"]')??null}handleElement(handle){const selector={value:'[part~="thumb"]',min:'[part~="thumb-min"]',max:'[part~="thumb-max"]'}[handle];return this.renderRoot?.querySelector(selector)??null}get interactive(){return!this.effectiveDisabled&&!this.matches(":disabled")&&!this.readonly}sanitizeCurrentValue(){this.sanitizeHandles();const old=this._value;this._value=this.clampValue(this.pendingValueBatch?.value??this._value),this._value!==old&&this.requestUpdate("value",old),this.syncFormValue()}sanitizeHandles(){this._minValue=this.clampValue(this.pendingValueBatch?.min??this._minValue),this._maxValue=this.clampValue(this.pendingValueBatch?.max??this._maxValue),this._minValue>this._maxValue&&(this.pendingValueBatch?.lastRange==="max"?this._minValue=this._maxValue:this._maxValue=this._minValue)}syncFormValue(){if(!this.internals)return;if(!this.range){const serialized=String(this.value);this.internals.setFormValue(serialized,serialized),this.updateValidity();return}const FormDataCtor=this.ownerDocument?.defaultView?.FormData;if(!FormDataCtor){this.internals.setFormValue(null),this.updateValidity();return}const state2=new FormDataCtor,stateKey=this.name||"value";if(state2.append(stateKey,String(this.minValue)),state2.append(stateKey,String(this.maxValue)),!this.name)this.internals.setFormValue(null,state2);else{const submission=new FormDataCtor;submission.append(this.name,String(this.minValue)),submission.append(this.name,String(this.maxValue)),this.internals.setFormValue(submission,state2)}this.updateValidity()}domain(){const min=finiteNumber(this.min,0),max=finiteNumber(this.max,100);return{lo:Math.min(min,max),hi:Math.max(min,max)}}defaultNumericValue(){return this.clampValue(0)}percentOf(value){const{lo,hi}=this.domain(),safeValue=finiteRange(value,lo,lo,hi);return finiteRatio(safeValue,lo,hi)*100}clampValue(raw){const{lo,hi}=this.domain();return clampSteppedValue(raw,lo,hi,this.step)}valueForHandle(handle){return handle==="min"?this.minValue:handle==="max"?this.maxValue:this.valueAsNumber}reachableBounds(handle){const{lo,hi}=this.domain();return{min:lo,max:hi}}detailFor(handle){return{value:this.valueForHandle(handle),minValue:this.minValue,maxValue:this.maxValue,handle}}emitInput(handle){dispatchNativeInputEvent(this),this.emit("lr-input",this.detailFor(handle))}emitChange(handle){dispatchNativeEvent(this,"change"),this.emit("lr-change",this.detailFor(handle))}assignValueFor(handle,raw){const previous=this.valueForHandle(handle),stepped=this.clampValue(raw);if(stepped===previous)return!1;if(handle==="min"){if(this._minValueDirty=!0,this._minValue=stepped,this.requestUpdate("minValue",previous),this._minValue>this._maxValue){const previousMax=this._maxValue;this._maxValueDirty=!0,this._maxValue=this._minValue,this.requestUpdate("maxValue",previousMax)}}else if(handle==="max"){if(this._maxValueDirty=!0,this._maxValue=stepped,this.requestUpdate("maxValue",previous),this._maxValue<this._minValue){const previousMin=this._minValue;this._minValueDirty=!0,this._minValue=this._maxValue,this.requestUpdate("minValue",previousMin)}}else this.value=stepped;return handle!=="value"&&this.syncFormValue(),!0}setValueFor(handle,raw,commit){return this.assignValueFor(handle,raw)?(this.emitInput(handle),commit&&this.emitChange(handle),!0):!1}ratioFromPointer(e,rect,rtl){if(this.orientation==="vertical"){const raw2=rect.height===0?0:(e.clientY-rect.top)/rect.height;return Math.min(1,Math.max(0,1-raw2))}const raw=rect.width===0?0:(e.clientX-rect.left)/rect.width;return Math.min(1,Math.max(0,rtl?1-raw:raw))}nearestHandle(target){const toMin=Math.abs(target-this.minValue),toMax=Math.abs(target-this.maxValue);return toMin<toMax?"min":toMax<toMin?"max":target<this.minValue?"min":"max"}beginDrag(pointerId,handle,captureTarget,rect,rtl){const dragWindow=captureTarget.ownerDocument.defaultView;if(!this.isConnected||!dragWindow)return;const firstDrag=this.drags.size===0;if(!firstDrag&&this.dragWindow!==dragWindow)return;captureTarget.setPointerCapture(pointerId);const drag={handle,changed:!1,captureTarget,rect,rtl};return this.drags.set(pointerId,drag),firstDrag&&(this.dragWindow=dragWindow,dragWindow.addEventListener("pointermove",this.onPointerMove),dragWindow.addEventListener("pointerup",this.onPointerUp),dragWindow.addEventListener("pointercancel",this.onPointerUp),dragWindow.addEventListener("lostpointercapture",this.onPointerUp)),this.syncInteractionStates(),this.requestUpdate(),drag}trackRect(){return this.renderRoot.querySelector('[part="track"]')?.getBoundingClientRect()??null}endDrag(pointerId,commit){const drag=this.drags.get(pointerId);drag!==void 0&&(this.drags.delete(pointerId),commit&&drag.changed&&this.emitChange(drag.handle),this.drags.size===0&&this.teardownDragWindow(),this.syncInteractionStates(),this.requestUpdate())}teardownDragWindow(){const dragWindow=this.dragWindow;this.dragWindow=void 0,dragWindow?.removeEventListener("pointermove",this.onPointerMove),dragWindow?.removeEventListener("pointerup",this.onPointerUp),dragWindow?.removeEventListener("pointercancel",this.onPointerUp),dragWindow?.removeEventListener("lostpointercapture",this.onPointerUp)}abortActiveDrags(){const activeDrags=[...this.drags.entries()];if(activeDrags.length!==0){this.drags.clear(),this.teardownDragWindow();for(const[pointerId,drag]of activeDrags)try{drag.captureTarget.hasPointerCapture(pointerId)&&drag.captureTarget.releasePointerCapture(pointerId)}catch{}this.syncInteractionStates()}}onHandleFocus(handle,event){this.focusedHandle!==handle&&(this.focusedHandle=handle,this.syncInteractionStates(),this.requestUpdate()),relayNativeEvent(this,event)}onHandleBlur(handle,event){this.pendingKeyHandle===handle&&(this.pendingKeyHandle=null,this.interactive&&this.isConnected&&this.emitChange(handle)),this.focusedHandle===handle&&(this.focusedHandle=null,this.syncInteractionStates(),this.requestUpdate()),relayNativeEvent(this,event)}slotsHaveContent(names){return names.some(name=>this.renderRoot.querySelector(`slot[name="${name}"]`)?.assignedNodes({flatten:!0}).some(node=>node.nodeType===1||!!node.textContent?.trim())??!1)}formatValue(value){return getNumberFormat(this.effectiveLocale,{maximumFractionDigits:20}).format(value)}readoutText(){const format=(value,handle)=>{if(this.valueDisplay==="formatted"){const text=this.valueFormatter?this.valueFormatter(value,handle):this.tooltipFormatter?.(value);if(text!=null)return text}return this.formatValue(value)};return this.range?`${format(this.minValue,"min")}–${format(this.maxValue,"max")}`:format(this.valueAsNumber,"value")}resolvedLabel(){const hostLabel=this.getAttribute("aria-label");return hostLabel!==null?hostLabel:this.label||this.localize("sliderLabel")}offsetStyle(percent){return this.orientation==="vertical"?`inset-block-end:${percent}%`:`inset-inline-start:${percent}%`}markerPercents(){if(!this.withMarkers)return[];const step=finiteRange(this.step,0,0);if(step<=0)return[];const{lo,hi}=this.domain(),span=hi-lo;if(!Number.isFinite(span)||span<=0)return[];const ratio=span/step,intervals=Math.floor(ratio+Number.EPSILON*Math.max(1,Math.abs(ratio))*4);return!Number.isFinite(intervals)||intervals<1||intervals>MAX_MARKER_INTERVALS?[]:Array.from({length:intervals+1},(_unused,index)=>{const value=lo+index*step;return finiteRatio(value,lo,hi)*100})}renderHandle(handle,describedBy,labelledBy){const value=this.valueForHandle(handle),bounds=this.reachableBounds(handle),percent=this.percentOf(value),numeric=this.formatValue(value),valueText=this.valueFormatter?this.valueFormatter(value,handle):this.tooltipFormatter?this.tooltipFormatter(value):numeric,partName={value:"thumb",min:"thumb thumb-min",max:"thumb thumb-max"}[handle],handleLabel={value:this.resolvedLabel(),min:this.localize("rangeStart"),max:this.localize("rangeEnd")}[handle],tooltipPart=this.focusedHandle===handle||Array.from(this.drags.values()).some(drag=>drag.handle===handle)?"tooltip tooltip__tooltip tooltip-visible":"tooltip tooltip__tooltip",showTooltip=this.withTooltip||this.tooltip!=="none",placement=this.tooltip==="none"?this.tooltipPlacement:this.tooltip,tooltipStyle=`${this.offsetStyle(percent)};--lr-slider-tooltip-distance:${finiteRange(this.tooltipDistance,8,0)}`;return html`
       <div
         part=${partName}
         role="slider"
@@ -30,10 +30,11 @@ var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3
             <span part="tooltip__content">${valueText??numeric}</span>
             <span part="tooltip__arrow"></span>
           </span>`:nothing}
-    `}render(){const vertical=this.orientation==="vertical",hasHint=this.withHint||this.hasHintSlot||(this.hint??"").length>0||(this.helpText??"").length>0,hasError=this.hasErrorSlot||(this.errorText??"").length>0,hasLabel=this.withLabel||this.hasLabelSlot||(this.label??"").length>0,hasReference=this.hasReferenceSlot,describedBy=[hasError?ERROR_ID:"",hasHint?HINT_ID:""].filter(Boolean).join(" ")||void 0,labelledBy=hasLabel&&!this.hasAttribute("aria-label")?LABEL_ID:void 0,valuePercent=this.percentOf(this.value),offsetPercent=this.percentOf(this.indicatorOffset===void 0?this.domain().lo:finiteNumber(this.indicatorOffset,this.domain().lo)),startPercent=this.range?this.percentOf(this.minValue):Math.min(valuePercent,offsetPercent),endPercent=this.range?this.percentOf(this.maxValue):Math.max(valuePercent,offsetPercent),span=Math.max(0,endPercent-startPercent),indicatorStyle=vertical?`inset-block-end:${startPercent}%;block-size:${span}%`:`inset-inline-start:${startPercent}%;inline-size:${span}%`,markers=this.markerPercents();return html`
+    `}render(){const vertical=this.orientation==="vertical",hasHint=this.withHint||this.hasHintSlot||(this.hint??"").length>0||(this.helpText??"").length>0,hasError=this.hasErrorSlot||(this.errorText??"").length>0,hasLabel=this.withLabel||this.hasLabelSlot||(this.label??"").length>0,hasReference=this.hasReferenceSlot,describedBy=[hasError?ERROR_ID:"",hasHint?HINT_ID:""].filter(Boolean).join(" ")||void 0,labelledBy=hasLabel&&!this.hasAttribute("aria-label")?LABEL_ID:void 0,valuePercent=this.percentOf(this.value),offsetPercent=this.percentOf(this.indicatorOffset===void 0?this.domain().lo:finiteNumber(this.indicatorOffset,this.domain().lo)),startPercent=this.range?this.percentOf(this.minValue):Math.min(valuePercent,offsetPercent),endPercent=this.range?this.percentOf(this.maxValue):Math.max(valuePercent,offsetPercent),span=Math.max(0,endPercent-startPercent),indicatorStyle=vertical?`inset-block-end:${startPercent}%;block-size:${span}%`:`inset-inline-start:${startPercent}%;inline-size:${span}%`,markers=this.markerPercents(),label=html`
       <div id=${LABEL_ID} part="label form-control-label" ?hidden=${!hasLabel}>
         ${this.label}<slot name="label" @slotchange=${this.onSlotChange}></slot>
-      </div>
+      </div>`,value=this.showValue?html`<span part="value" aria-hidden="true">${this.readoutText()}</span>`:nothing,labelValue=this.showValue&&this.valuePlacement==="label";return html`
+      ${labelValue?html`<div part="label-row">${label}${value}</div>`:label}
       <div part="references" ?hidden=${!hasReference}>
         <slot name="reference" @slotchange=${this.onSlotChange}></slot>
       </div>
@@ -51,7 +52,7 @@ var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3
             </div>`:nothing}
         ${this.range?html`${this.renderHandle("min",describedBy,void 0)}${this.renderHandle("max",describedBy,void 0)}`:this.renderHandle("value",describedBy,labelledBy)}
       </div>
-      ${this.showValue?html`<span part="value" aria-hidden="true">${this.readoutText()}</span>`:nothing}
+      ${labelValue?nothing:value}
       <div id=${ERROR_ID} part="error" ?hidden=${!hasError}>
         ${this.hasErrorSlot?nothing:this.errorText}<slot name="error" @slotchange=${this.onSlotChange}></slot>
       </div>
@@ -59,4 +60,4 @@ var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3
         ${this.hint||this.helpText}<slot name="hint" @slotchange=${this.onSlotChange}></slot
         ><slot name="help-text" @slotchange=${this.onSlotChange}></slot>
       </div>
-    `}}__decorate([property()],LyraSlider.prototype,"label",void 0),__decorate([property()],LyraSlider.prototype,"hint",void 0),__decorate([property({attribute:"help-text"})],LyraSlider.prototype,"helpText",void 0),__decorate([property({attribute:"error-text"})],LyraSlider.prototype,"errorText",void 0),__decorate([property({type:Boolean,attribute:"with-label"})],LyraSlider.prototype,"withLabel",void 0),__decorate([property({type:Boolean,attribute:"with-hint"})],LyraSlider.prototype,"withHint",void 0),__decorate([property({type:Boolean})],LyraSlider.prototype,"autofocus",void 0),__decorate([property({type:Number,attribute:"indicator-offset"})],LyraSlider.prototype,"indicatorOffset",void 0),__decorate([property({reflect:!0})],LyraSlider.prototype,"orientation",void 0),__decorate([property({type:Boolean,reflect:!0})],LyraSlider.prototype,"readonly",void 0),__decorate([property({type:Boolean,attribute:"with-markers"})],LyraSlider.prototype,"withMarkers",void 0),__decorate([property({type:Boolean,attribute:"with-tooltip"})],LyraSlider.prototype,"withTooltip",void 0),__decorate([property({reflect:!0,attribute:"tooltip-placement"})],LyraSlider.prototype,"tooltipPlacement",void 0),__decorate([property({type:Number,attribute:"tooltip-distance"})],LyraSlider.prototype,"tooltipDistance",void 0),__decorate([property()],LyraSlider.prototype,"tooltip",void 0),__decorate([property({attribute:!1})],LyraSlider.prototype,"valueFormatter",void 0),__decorate([property({attribute:!1})],LyraSlider.prototype,"tooltipFormatter",void 0),__decorate([property({type:Boolean,attribute:"show-value",converter:falseDefaultBooleanConverter})],LyraSlider.prototype,"showValue",void 0),__decorate([state()],LyraSlider.prototype,"hasHintSlot",void 0),__decorate([state()],LyraSlider.prototype,"hasErrorSlot",void 0),__decorate([state()],LyraSlider.prototype,"hasLabelSlot",void 0),__decorate([state()],LyraSlider.prototype,"hasReferenceSlot",void 0);export{LyraSlider};
+    `}}__decorate([property()],LyraSlider.prototype,"label",void 0),__decorate([property()],LyraSlider.prototype,"hint",void 0),__decorate([property({attribute:"help-text"})],LyraSlider.prototype,"helpText",void 0),__decorate([property({attribute:"error-text"})],LyraSlider.prototype,"errorText",void 0),__decorate([property({type:Boolean,attribute:"with-label"})],LyraSlider.prototype,"withLabel",void 0),__decorate([property({type:Boolean,attribute:"with-hint"})],LyraSlider.prototype,"withHint",void 0),__decorate([property({type:Boolean})],LyraSlider.prototype,"autofocus",void 0),__decorate([property({type:Number,attribute:"indicator-offset"})],LyraSlider.prototype,"indicatorOffset",void 0),__decorate([property({reflect:!0})],LyraSlider.prototype,"orientation",void 0),__decorate([property({type:Boolean,reflect:!0})],LyraSlider.prototype,"readonly",void 0),__decorate([property({type:Boolean,attribute:"with-markers"})],LyraSlider.prototype,"withMarkers",void 0),__decorate([property({type:Boolean,attribute:"with-tooltip"})],LyraSlider.prototype,"withTooltip",void 0),__decorate([property({reflect:!0,attribute:"tooltip-placement"})],LyraSlider.prototype,"tooltipPlacement",void 0),__decorate([property({type:Number,attribute:"tooltip-distance"})],LyraSlider.prototype,"tooltipDistance",void 0),__decorate([property()],LyraSlider.prototype,"tooltip",void 0),__decorate([property({attribute:!1})],LyraSlider.prototype,"valueFormatter",void 0),__decorate([property({attribute:!1})],LyraSlider.prototype,"tooltipFormatter",void 0),__decorate([property({type:Boolean,attribute:"show-value",converter:falseDefaultBooleanConverter})],LyraSlider.prototype,"showValue",void 0),__decorate([property({attribute:"value-display"})],LyraSlider.prototype,"valueDisplay",void 0),__decorate([property({attribute:"value-placement"})],LyraSlider.prototype,"valuePlacement",void 0),__decorate([state()],LyraSlider.prototype,"hasHintSlot",void 0),__decorate([state()],LyraSlider.prototype,"hasErrorSlot",void 0),__decorate([state()],LyraSlider.prototype,"hasLabelSlot",void 0),__decorate([state()],LyraSlider.prototype,"hasReferenceSlot",void 0);export{LyraSlider};

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

@@ -1 +1 @@
-import{css}from"lit";import{formControlRequiredMarker}from"../../../internal/form-control.styles.js";const styles=css` :host { --_lr-slider-thumb-size: calc(var(--lr-form-control-height) * 0.4); --_lr-slider-track-thickness: calc( var(--lr-slider-thumb-size, var(--_lr-slider-thumb-size)) * 0.25 ); --_lr-slider-row-size: calc(var(--lr-form-control-height) * 0.6); display: flex; align-items: center; flex-wrap: wrap; gap: var(--lr-slider-gap, var(--lr-space-s)); inline-size: 100%; min-inline-size: 0; max-inline-size: 100%; } [part~="base"] { position: relative; flex: 1 1 auto; min-inline-size: 0; block-size: var(--lr-slider-row-size, var(--_lr-slider-row-size)); } [part="track"] { position: absolute; inset-inline: 0; inset-block-start: 50%; block-size: var( --track-size, var( --track-height, var(--lr-slider-track-thickness, var(--_lr-slider-track-thickness)) ) ); transform: translateY(-50%); border-radius: calc( var( --track-size, var( --track-height, var(--lr-slider-track-thickness, var(--_lr-slider-track-thickness)) ) ) * 0.5 ); background: var(--track-color-inactive, var(--lr-color-border)); } [part="indicator"] { position: absolute; inset-block-start: 50%; block-size: var( --track-size, var( --track-height, var(--lr-slider-track-thickness, var(--_lr-slider-track-thickness)) ) ); transform: translateY(-50%); border-radius: calc( var( --track-size, var( --track-height, var(--lr-slider-track-thickness, var(--_lr-slider-track-thickness)) ) ) * 0.5 ); background: var(--track-color-active, var(--lr-color-brand)); translate: var(--track-active-offset, 0) 0; } [part="markers"] { position: absolute; inset: 0; pointer-events: none; } [part="marker"] { position: absolute; inset-block-start: 50%; inline-size: var( --marker-width, calc( var(--lr-slider-track-thickness, var(--_lr-slider-track-thickness)) * 0.5 ) ); block-size: var( --marker-height, calc( var(--lr-slider-track-thickness, var(--_lr-slider-track-thickness)) * 1.5 ) ); transform: translate(-50%, -50%); border-radius: var(--lr-radius-xs); background: var(--lr-color-surface); } [part~="thumb"] { position: absolute; inset-block-start: 50%; inline-size: var( --thumb-width, var( --thumb-size, var(--lr-slider-thumb-size, var(--_lr-slider-thumb-size)) ) ); block-size: var( --thumb-height, var( --thumb-size, var(--lr-slider-thumb-size, var(--_lr-slider-thumb-size)) ) ); border-radius: 50%; background: var(--lr-slider-thumb-bg, var(--lr-color-brand)); border: var(--lr-border-width-medium) solid var(--lr-slider-thumb-border-color, var(--lr-color-surface)); box-shadow: var(--lr-shadow-s); transform: translate(-50%, -50%); cursor: grab; touch-action: none; } :host(:dir(rtl)) [part~="thumb"], :host(:dir(rtl)) [part="marker"] { transform: translate(50%, -50%); } [part~="thumb"]::before { content: ""; position: absolute; inset-block-start: 50%; inset-inline-start: 50%; inline-size: max( var(--lr-size-28px), calc(var(--lr-slider-thumb-size, var(--_lr-slider-thumb-size)) * 1.75) ); block-size: max( var(--lr-size-28px), calc(var(--lr-slider-thumb-size, var(--_lr-slider-thumb-size)) * 1.75) ); transform: translate(-50%, -50%); border-radius: 50%; } :host(:dir(rtl)) [part~="thumb"]::before { transform: translate(50%, -50%); } [part~="thumb"]:focus-visible { outline: var(--lr-focus-ring-width) solid var(--lr-focus-ring-color); outline-offset: var(--lr-focus-ring-offset); } :host(:not(:disabled):not([readonly])) [part~="thumb"]:hover { box-shadow: var(--lr-shadow-s), 0 0 0 var(--lr-slider-track-thickness, var(--_lr-slider-track-thickness)) var(--lr-slider-thumb-hover-ring-color, var(--lr-color-brand-quiet)); } :host(:not(:disabled):not([readonly])) [part~="thumb"]:active { box-shadow: var(--lr-shadow-s), 0 0 0 var(--lr-slider-track-thickness, var(--_lr-slider-track-thickness)) var( --lr-slider-thumb-active-ring-color, var(--lr-slider-thumb-hover-ring-color, var(--lr-color-brand-quiet)) ); cursor: grabbing; } [part~="tooltip"] { position: absolute; inset-block-start: 50%; padding-block: var(--lr-space-2xs); padding-inline: var(--lr-space-xs); border-radius: var(--lr-radius); background: var(--lr-color-neutral); color: var(--lr-color-on-neutral); font-size: var(--lr-font-size-sm); font-variant-numeric: tabular-nums; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity var(--lr-transition-fast); } [part~="tooltip"][data-placement="top"] { transform: translate( -50%, calc( -100% - var( --thumb-height, var( --thumb-size, var(--lr-slider-thumb-size, var(--_lr-slider-thumb-size)) ) ) * 0.5 - var(--tooltip-offset, calc(var( --lr-slider-tooltip-distance, 8 ) * var(--lr-size-1px))) ) ); } [part~="tooltip"][data-placement="bottom"] { transform: translate( -50%, calc( var( --thumb-height, var( --thumb-size, var(--lr-slider-thumb-size, var(--_lr-slider-thumb-size)) ) ) * 0.5 + var( --tooltip-offset, calc(var(--lr-slider-tooltip-distance, 8) * var(--lr-size-1px)) ) ) ); } [part~="tooltip"][data-placement="left"] { transform: translate( calc( -100% - var( --thumb-width, var( --thumb-size, var(--lr-slider-thumb-size, var(--_lr-slider-thumb-size)) ) ) * 0.5 - var(--tooltip-offset, calc(var( --lr-slider-tooltip-distance, 8 ) * var(--lr-size-1px))) ), -50% ); } [part~="tooltip"][data-placement="right"] { transform: translate( calc( var( --thumb-width, var( --thumb-size, var(--lr-slider-thumb-size, var(--_lr-slider-thumb-size)) ) ) * 0.5 + var( --tooltip-offset, calc(var(--lr-slider-tooltip-distance, 8) * var(--lr-size-1px)) ) ), -50% ); } :host(:dir(rtl)) [part~="tooltip"][data-placement="top"], :host(:dir(rtl)) [part~="tooltip"][data-placement="bottom"] { transform: translate( 50%, calc( -100% - var( --thumb-height, var( --thumb-size, var(--lr-slider-thumb-size, var(--_lr-slider-thumb-size)) ) ) * 0.5 - var(--tooltip-offset, calc(var( --lr-slider-tooltip-distance, 8 ) * var(--lr-size-1px))) ) ); } :host(:dir(rtl)) [part~="tooltip"][data-placement="bottom"] { transform: translate( 50%, calc( var( --thumb-height, var( --thumb-size, var(--lr-slider-thumb-size, var(--_lr-slider-thumb-size)) ) ) * 0.5 + var( --tooltip-offset, calc(var(--lr-slider-tooltip-distance, 8) * var(--lr-size-1px)) ) ) ); } [part~="tooltip-visible"] { opacity: 1; } [part="tooltip__arrow"] { position: absolute; inline-size: var(--lr-space-xs); block-size: var(--lr-space-xs); background: inherit; transform: rotate(45deg); } [data-placement="top"] [part="tooltip__arrow"] { inset-block-end: calc(var(--lr-space-xs) * -0.5); inset-inline-start: calc(50% - var(--lr-space-xs) * 0.5); } [data-placement="bottom"] [part="tooltip__arrow"] { inset-block-start: calc(var(--lr-space-xs) * -0.5); inset-inline-start: calc(50% - var(--lr-space-xs) * 0.5); } [data-placement="left"] [part="tooltip__arrow"] { inset-inline-end: calc(var(--lr-space-xs) * -0.5); inset-block-start: calc(50% - var(--lr-space-xs) * 0.5); } [data-placement="right"] [part="tooltip__arrow"] { inset-inline-start: calc(var(--lr-space-xs) * -0.5); inset-block-start: calc(50% - var(--lr-space-xs) * 0.5); } [part~="label"], [part="references"] { flex: 1 0 100%; min-inline-size: 0; max-inline-size: 100%; overflow-wrap: anywhere; } [part~="label"] { font-weight: var(--lr-font-weight-semibold); color: var(--lr-color-text); } [part="references"] { font-size: var(--lr-font-size-sm); color: var(--lr-color-text-quiet); } [part~="label"][hidden], [part="references"][hidden] { display: none; } ${formControlRequiredMarker} [part='value'] { flex: 0 0 auto; font-size: var(--lr-font-size-sm); color: var(--lr-color-text-quiet); font-variant-numeric: tabular-nums; min-inline-size: var(--lr-size-2-5ch); text-align: end; } [part="error"], [part~="hint"] { flex: 1 0 100%; min-inline-size: 0; max-inline-size: 100%; overflow-wrap: anywhere; font-size: var(--lr-font-size-sm); color: var(--lr-color-text-quiet); } [part="error"] { color: var(--lr-color-danger); } [part="error"][hidden], [part~="hint"][hidden] { display: none; } :host([orientation="vertical"]) { display: inline-flex; flex-direction: column; inline-size: auto; } :host([orientation="vertical"]) [part~="base"] { flex: 0 0 auto; inline-size: var(--lr-slider-row-size, var(--_lr-slider-row-size)); block-size: var(--lr-slider-track-length, var(--lr-size-10rem)); } :host([orientation="vertical"]) [part="track"] { inset-inline: auto; inset-inline-start: 50%; inset-block: 0; inline-size: var( --track-size, var( --track-height, var(--lr-slider-track-thickness, var(--_lr-slider-track-thickness)) ) ); block-size: auto; transform: translateX(-50%); } :host([orientation="vertical"]) [part="indicator"] { inset-block-start: auto; inset-inline-start: 50%; inline-size: var( --track-size, var( --track-height, var(--lr-slider-track-thickness, var(--_lr-slider-track-thickness)) ) ); transform: translateX(-50%); } :host([orientation="vertical"]) [part~="thumb"] { inset-block-start: auto; inset-inline-start: 50%; transform: translate(-50%, 50%); } :host([orientation="vertical"]) [part="marker"] { inset-block-start: auto; inset-inline-start: 50%; inline-size: var( --marker-width, calc( var(--lr-slider-track-thickness, var(--_lr-slider-track-thickness)) * 1.5 ) ); block-size: var( --marker-height, calc( var(--lr-slider-track-thickness, var(--_lr-slider-track-thickness)) * 0.5 ) ); transform: translate(-50%, 50%); } :host([orientation="vertical"]) [part~="tooltip"] { inset-block-start: auto; inset-inline-start: 50%; } :host([orientation="vertical"]) [part="error"], :host([orientation="vertical"]) [part~="hint"] { flex: 0 0 auto; } :host([orientation="vertical"]:dir(rtl)) [part="track"], :host([orientation="vertical"]:dir(rtl)) [part="indicator"] { transform: translateX(50%); } :host([orientation="vertical"]:dir(rtl)) [part~="thumb"], :host([orientation="vertical"]:dir(rtl)) [part="marker"] { transform: translate(50%, 50%); } :host(:disabled) { opacity: var(--lr-opacity-disabled); cursor: not-allowed; } :host(:disabled) [part~="thumb"] { cursor: not-allowed; } :host([readonly]) [part~="thumb"] { cursor: default; } @media (prefers-reduced-motion: reduce) { [part~="tooltip"] { transition: none; } } `;export{styles};
+import{css}from"lit";import{formControlRequiredMarker}from"../../../internal/form-control.styles.js";const styles=css` :host { --_lr-slider-thumb-size: calc(var(--lr-form-control-height) * 0.4); --_lr-slider-track-thickness: calc( var(--lr-slider-thumb-size, var(--_lr-slider-thumb-size)) * 0.25 ); --_lr-slider-row-size: calc(var(--lr-form-control-height) * 0.6); display: flex; align-items: center; flex-wrap: wrap; gap: var(--lr-slider-gap, var(--lr-space-s)); inline-size: 100%; min-inline-size: 0; max-inline-size: 100%; } [part~="base"] { position: relative; flex: 1 1 auto; min-inline-size: 0; block-size: var(--lr-slider-row-size, var(--_lr-slider-row-size)); } [part="track"] { position: absolute; inset-inline: 0; inset-block-start: 50%; block-size: var( --track-size, var( --track-height, var(--lr-slider-track-thickness, var(--_lr-slider-track-thickness)) ) ); transform: translateY(-50%); border-radius: calc( var( --track-size, var( --track-height, var(--lr-slider-track-thickness, var(--_lr-slider-track-thickness)) ) ) * 0.5 ); background: var(--track-color-inactive, var(--lr-color-border)); } [part="indicator"] { position: absolute; inset-block-start: 50%; block-size: var( --track-size, var( --track-height, var(--lr-slider-track-thickness, var(--_lr-slider-track-thickness)) ) ); transform: translateY(-50%); border-radius: calc( var( --track-size, var( --track-height, var(--lr-slider-track-thickness, var(--_lr-slider-track-thickness)) ) ) * 0.5 ); background: var(--track-color-active, var(--lr-color-brand)); translate: var(--track-active-offset, 0) 0; } [part="markers"] { position: absolute; inset: 0; pointer-events: none; } [part="marker"] { position: absolute; inset-block-start: 50%; inline-size: var( --marker-width, calc( var(--lr-slider-track-thickness, var(--_lr-slider-track-thickness)) * 0.5 ) ); block-size: var( --marker-height, calc( var(--lr-slider-track-thickness, var(--_lr-slider-track-thickness)) * 1.5 ) ); transform: translate(-50%, -50%); border-radius: var(--lr-radius-xs); background: var(--lr-color-surface); } [part~="thumb"] { position: absolute; inset-block-start: 50%; inline-size: var( --thumb-width, var( --thumb-size, var(--lr-slider-thumb-size, var(--_lr-slider-thumb-size)) ) ); block-size: var( --thumb-height, var( --thumb-size, var(--lr-slider-thumb-size, var(--_lr-slider-thumb-size)) ) ); border-radius: 50%; background: var(--lr-slider-thumb-bg, var(--lr-color-brand)); border: var(--lr-border-width-medium) solid var(--lr-slider-thumb-border-color, var(--lr-color-surface)); box-shadow: var(--lr-shadow-s); transform: translate(-50%, -50%); cursor: grab; touch-action: none; } :host(:dir(rtl)) [part~="thumb"], :host(:dir(rtl)) [part="marker"] { transform: translate(50%, -50%); } [part~="thumb"]::before { content: ""; position: absolute; inset-block-start: 50%; inset-inline-start: 50%; inline-size: max( var(--lr-size-28px), calc(var(--lr-slider-thumb-size, var(--_lr-slider-thumb-size)) * 1.75) ); block-size: max( var(--lr-size-28px), calc(var(--lr-slider-thumb-size, var(--_lr-slider-thumb-size)) * 1.75) ); transform: translate(-50%, -50%); border-radius: 50%; } :host(:dir(rtl)) [part~="thumb"]::before { transform: translate(50%, -50%); } [part~="thumb"]:focus-visible { outline: var(--lr-focus-ring-width) solid var(--lr-focus-ring-color); outline-offset: var(--lr-focus-ring-offset); } :host(:not(:disabled):not([readonly])) [part~="thumb"]:hover { box-shadow: var(--lr-shadow-s), 0 0 0 var(--lr-slider-track-thickness, var(--_lr-slider-track-thickness)) var(--lr-slider-thumb-hover-ring-color, var(--lr-color-brand-quiet)); } :host(:not(:disabled):not([readonly])) [part~="thumb"]:active { box-shadow: var(--lr-shadow-s), 0 0 0 var(--lr-slider-track-thickness, var(--_lr-slider-track-thickness)) var( --lr-slider-thumb-active-ring-color, var(--lr-slider-thumb-hover-ring-color, var(--lr-color-brand-quiet)) ); cursor: grabbing; } [part~="tooltip"] { position: absolute; inset-block-start: 50%; padding-block: var(--lr-space-2xs); padding-inline: var(--lr-space-xs); border-radius: var(--lr-radius); background: var(--lr-color-neutral); color: var(--lr-color-on-neutral); font-size: var(--lr-font-size-sm); font-variant-numeric: tabular-nums; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity var(--lr-transition-fast); } [part~="tooltip"][data-placement="top"] { transform: translate( -50%, calc( -100% - var( --thumb-height, var( --thumb-size, var(--lr-slider-thumb-size, var(--_lr-slider-thumb-size)) ) ) * 0.5 - var(--tooltip-offset, calc(var( --lr-slider-tooltip-distance, 8 ) * var(--lr-size-1px))) ) ); } [part~="tooltip"][data-placement="bottom"] { transform: translate( -50%, calc( var( --thumb-height, var( --thumb-size, var(--lr-slider-thumb-size, var(--_lr-slider-thumb-size)) ) ) * 0.5 + var( --tooltip-offset, calc(var(--lr-slider-tooltip-distance, 8) * var(--lr-size-1px)) ) ) ); } [part~="tooltip"][data-placement="left"] { transform: translate( calc( -100% - var( --thumb-width, var( --thumb-size, var(--lr-slider-thumb-size, var(--_lr-slider-thumb-size)) ) ) * 0.5 - var(--tooltip-offset, calc(var( --lr-slider-tooltip-distance, 8 ) * var(--lr-size-1px))) ), -50% ); } [part~="tooltip"][data-placement="right"] { transform: translate( calc( var( --thumb-width, var( --thumb-size, var(--lr-slider-thumb-size, var(--_lr-slider-thumb-size)) ) ) * 0.5 + var( --tooltip-offset, calc(var(--lr-slider-tooltip-distance, 8) * var(--lr-size-1px)) ) ), -50% ); } :host(:dir(rtl)) [part~="tooltip"][data-placement="top"], :host(:dir(rtl)) [part~="tooltip"][data-placement="bottom"] { transform: translate( 50%, calc( -100% - var( --thumb-height, var( --thumb-size, var(--lr-slider-thumb-size, var(--_lr-slider-thumb-size)) ) ) * 0.5 - var(--tooltip-offset, calc(var( --lr-slider-tooltip-distance, 8 ) * var(--lr-size-1px))) ) ); } :host(:dir(rtl)) [part~="tooltip"][data-placement="bottom"] { transform: translate( 50%, calc( var( --thumb-height, var( --thumb-size, var(--lr-slider-thumb-size, var(--_lr-slider-thumb-size)) ) ) * 0.5 + var( --tooltip-offset, calc(var(--lr-slider-tooltip-distance, 8) * var(--lr-size-1px)) ) ) ); } [part~="tooltip-visible"] { opacity: 1; } [part="tooltip__arrow"] { position: absolute; inline-size: var(--lr-space-xs); block-size: var(--lr-space-xs); background: inherit; transform: rotate(45deg); } [data-placement="top"] [part="tooltip__arrow"] { inset-block-end: calc(var(--lr-space-xs) * -0.5); inset-inline-start: calc(50% - var(--lr-space-xs) * 0.5); } [data-placement="bottom"] [part="tooltip__arrow"] { inset-block-start: calc(var(--lr-space-xs) * -0.5); inset-inline-start: calc(50% - var(--lr-space-xs) * 0.5); } [data-placement="left"] [part="tooltip__arrow"] { inset-inline-end: calc(var(--lr-space-xs) * -0.5); inset-block-start: calc(50% - var(--lr-space-xs) * 0.5); } [data-placement="right"] [part="tooltip__arrow"] { inset-inline-start: calc(var(--lr-space-xs) * -0.5); inset-block-start: calc(50% - var(--lr-space-xs) * 0.5); } [part~="label"], [part="references"] { flex: 1 0 100%; min-inline-size: 0; max-inline-size: 100%; overflow-wrap: anywhere; } [part~="label"] { font-weight: var(--lr-font-weight-semibold); color: var(--lr-color-text); } [part="references"] { font-size: var(--lr-font-size-sm); color: var(--lr-color-text-quiet); } [part~="label"][hidden], [part="references"][hidden] { display: none; } ${formControlRequiredMarker} [part='value'] { flex: 0 0 auto; font-size: var(--lr-font-size-sm); color: var(--lr-color-text-quiet); font-variant-numeric: tabular-nums; min-inline-size: var(--lr-size-2-5ch); text-align: end; } [part='label-row'] { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--lr-slider-gap, var(--lr-space-s)); flex: 1 0 100%; min-inline-size: 0; max-inline-size: 100%; } [part='label-row'] [part~='label'] { flex: 1 1 0; } [part='label-row'] [part='value'] { flex: 0 1 auto; margin-inline-start: auto; max-inline-size: 100%; overflow-wrap: anywhere; } [part="error"], [part~="hint"] { flex: 1 0 100%; min-inline-size: 0; max-inline-size: 100%; overflow-wrap: anywhere; font-size: var(--lr-font-size-sm); color: var(--lr-color-text-quiet); } [part="error"] { color: var(--lr-color-danger); } [part="error"][hidden], [part~="hint"][hidden] { display: none; } :host([orientation="vertical"]) { display: inline-flex; flex-direction: column; inline-size: auto; } :host([orientation="vertical"]) [part~="base"] { flex: 0 0 auto; inline-size: var(--lr-slider-row-size, var(--_lr-slider-row-size)); block-size: var(--lr-slider-track-length, var(--lr-size-10rem)); } :host([orientation="vertical"]) [part="track"] { inset-inline: auto; inset-inline-start: 50%; inset-block: 0; inline-size: var( --track-size, var( --track-height, var(--lr-slider-track-thickness, var(--_lr-slider-track-thickness)) ) ); block-size: auto; transform: translateX(-50%); } :host([orientation="vertical"]) [part="indicator"] { inset-block-start: auto; inset-inline-start: 50%; inline-size: var( --track-size, var( --track-height, var(--lr-slider-track-thickness, var(--_lr-slider-track-thickness)) ) ); transform: translateX(-50%); } :host([orientation="vertical"]) [part~="thumb"] { inset-block-start: auto; inset-inline-start: 50%; transform: translate(-50%, 50%); } :host([orientation="vertical"]) [part="marker"] { inset-block-start: auto; inset-inline-start: 50%; inline-size: var( --marker-width, calc( var(--lr-slider-track-thickness, var(--_lr-slider-track-thickness)) * 1.5 ) ); block-size: var( --marker-height, calc( var(--lr-slider-track-thickness, var(--_lr-slider-track-thickness)) * 0.5 ) ); transform: translate(-50%, 50%); } :host([orientation="vertical"]) [part~="tooltip"] { inset-block-start: auto; inset-inline-start: 50%; } :host([orientation="vertical"]) [part="error"], :host([orientation="vertical"]) [part~="hint"] { flex: 0 0 auto; } :host([orientation="vertical"]:dir(rtl)) [part="track"], :host([orientation="vertical"]:dir(rtl)) [part="indicator"] { transform: translateX(50%); } :host([orientation="vertical"]:dir(rtl)) [part~="thumb"], :host([orientation="vertical"]:dir(rtl)) [part="marker"] { transform: translate(50%, 50%); } :host(:disabled) { opacity: var(--lr-opacity-disabled); cursor: not-allowed; } :host(:disabled) [part~="thumb"] { cursor: not-allowed; } :host([readonly]) [part~="thumb"] { cursor: default; } @media (prefers-reduced-motion: reduce) { [part~="tooltip"] { transition: none; } } `;export{styles};

package/dist/components/media/map/map-loader.d.ts

@@ -8,7 +8,9 @@ export interface MapLibreGeoJsonDiff{readonly remove?:readonly(string|number)[];
 *  guard with `?.()` against a peer that satisfies the shape check and then lies at runtime. */
 getCanvas():HTMLCanvasElement;getCenter():{lng:number;lat:number;};getZoom():number;setCenter(center:[number,number]):unknown;setZoom(zoom:number):unknown;resize():unknown;
 /** Optional: absent on peers predating it, and the caller feature-detects before use. */
-setMaxBounds?(bounds:readonly[readonly[number,number],readonly[number,number]]|null):unknown;remove():void;on(type:'error',listener:(event:{error?:unknown;})=>void):this;on(type:'load',listener:()=>void):this;on(type:'click',listener:(event:{point:unknown;lngLat:{lng:number;lat:number;};})=>void):this;once(type:'style.load',listener:()=>void):this;setStyle(style:unknown):this;getSource(id:string):MapLibreGeoJsonSource|undefined;addSource(id:string,source:unknown):this;removeSource(id:string):this;getLayer(id:string):unknown;addLayer(layer:unknown):this;removeLayer(id:string):this;setPaintProperty(layerId:string,name:string,value:unknown):this;queryRenderedFeatures(point:unknown,options?:{layers?:string[];}):unknown[];}
+setMaxBounds?(bounds:readonly[readonly[number,number],readonly[number,number]]|null):unknown;remove():void;on(type:'error',listener:(event:{error?:unknown;})=>void):this;on(type:'load',listener:()=>void):this;on(type:'click',listener:(event:{point:unknown;lngLat:{lng:number;lat:number;};})=>void):this;once(type:'style.load',listener:()=>void):this;setStyle(style:unknown):this;getSource(id:string):MapLibreGeoJsonSource|undefined;addSource(id:string,source:unknown):this;removeSource(id:string):this;getLayer(id:string):unknown;addLayer(layer:unknown):this;removeLayer(id:string):this;setPaintProperty(layerId:string,name:string,value:unknown):this;
+/** Optional image-atlas capabilities; point circles remain usable when a partial peer lacks these. */
+hasImage?(id:string):boolean;addImage?(id:string,image:ImageData,options:{pixelRatio:number;}):unknown;updateImage?(id:string,image:ImageData):unknown;removeImage?(id:string):unknown;queryRenderedFeatures(point:unknown,options?:{layers?:string[];}):unknown[];}
 /** The MapLibre constructors Lyra consumes, structurally owned so the optional peer never leaks. */
 export interface MaplibreModule{Map:new(options:Record<string,unknown>)=>MapLibreMapCapability;Marker:new(options?:{color?:string;})=>MapLibreMarkerCapability;Popup:new(options?:{offset?:number;})=>MapLibrePopupCapability;}
 /**