@aceshooting/lyra-ui 14.1.1 → 14.3.0

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;}
 /**

package/dist/components/media/map/map.class.d.ts

@@ -138,6 +138,74 @@ readonly radius?:LyraMapHeatmapZoomValue;
 readonly intensity?:LyraMapHeatmapZoomValue;
 /** Whole-layer opacity in `[0, 1]`. Omitted, MapLibre's own default remains in force. */
 readonly opacity?:number;}
+/** Continuous feature-driven color and constant width for an auto data layer's lines/outlines. */
+export interface LyraMapLineOptions{
+/** Numeric feature property to color by. Missing/non-numeric values use strokeColor/color/tone. */
+readonly field?:string;
+/** Linear [value, color] stops. First 64 entries are inspected, sorted and deduplicated
+* first-wins. Two usable stops are required; otherwise the flat stroke color remains.
+* CSS variables resolve on the host. Share these stops with legendGradient for a matching key. */
+readonly stops?:readonly(readonly[number,string])[];
+/** Stroke width in CSS pixels, clamped to [0, 200]. Unset/non-finite restores 2. */
+readonly width?:number;
+/** Whole-line opacity, clamped to [0, 1]. Unset/non-finite restores 1. */
+readonly opacity?:number;}
+/** Numeric radius interpolation: inclusive threshold bands or a continuous linear ramp. */
+export type LyraMapPointRadiusInterpolation='step'|'linear';
+/** A numeric feature field mapped to an individual point's radius, independently of clustering. */
+export interface LyraMapPointRadiusOptions{
+/** Numeric feature property. Missing, non-numeric and non-finite values use fallback. */
+readonly field:string;
+/** First 32 pairs are inspected; finite [value, radius] pairs are sorted and deduplicated first-wins. Radii clamp
+* to [0, 200] CSS pixels. One usable stop is constant; no usable stops use fallback. */
+readonly stops:readonly(readonly[number,number])[];
+/** Defaults to step. Step uses the first radius below the first threshold; linear clamps
+* outside the domain. An unrepresentable linear domain uses fallback. */
+readonly interpolation?:LyraMapPointRadiusInterpolation;
+/** Radius for invalid feature values or unusable scales. Defaults to 5; clamped to [0, 200]. */
+readonly fallback?:number;}
+/** How a point icon's path is painted. The existing filled-path behavior remains the default. */
+export type LyraMapPointIconMode='fill'|'stroke'|'fill-stroke';
+/** Shape of an open point-icon stroke's endpoints. */
+export type LyraMapPointIconLineCap='butt'|'round'|'square';
+/** Shape where point-icon stroke segments meet. */
+export type LyraMapPointIconLineJoin='miter'|'round'|'bevel';
+/** A category's SVG path, rasterized locally without parsing markup or fetching resources. */
+export interface LyraMapPointIcon{
+/** Exact string category matched against point.iconField, or point.field when omitted. */
+readonly value:string;
+/** SVG path data only, at most 8192 characters. Markup, URLs and non-path commands are rejected. */
+readonly path:string;
+/** SVG [minX, minY, width, height]. Defaults to [0, 0, 24, 24]; dimensions must be positive. */
+readonly viewBox?:readonly[number,number,number,number];
+/** Fill, stroke, or both using point.iconColor. Defaults to fill. */
+readonly mode?:LyraMapPointIconMode;
+/** Stroke width in viewBox units, clamped to [0, 200]. Defaults to 2. Zero paints no stroke. */
+readonly strokeWidth?:number;
+/** Open-path endpoint shape. Defaults to round. */
+readonly lineCap?:LyraMapPointIconLineCap;
+/** Segment join shape. Defaults to round; miter joins retain the canvas miter limit of 10. */
+readonly lineJoin?:LyraMapPointIconLineJoin;}
+/** Category colors and optional symbols for points, including unclustered points in a cluster source. */
+export interface LyraMapPointOptions{
+/** String feature property to match. Unknown, missing and non-string values use the flat layer color. */
+readonly field?:string;
+/** [category, CSS color] pairs; first 32 inspected, duplicate categories first-wins. */
+readonly colors?:readonly(readonly[string,string])[];
+/** Point radius in CSS pixels, clamped to [0, 200], or a numeric feature-field scale. Defaults to 5. */
+readonly radius?:number|LyraMapPointRadiusOptions;
+/** Point outline width in CSS pixels, clamped to [0, 200]. Defaults to 0. */
+readonly strokeWidth?:number;
+/** Outline color; defaults to the layer's strokeColor/color/tone. CSS variables resolve on the host. */
+readonly strokeColor?:string;
+/** String feature property used for icon matching; defaults to field. */
+readonly iconField?:string;
+/** First 32 icons inspected, duplicate values first-wins. Unknown categories keep their circle. */
+readonly icons?:readonly LyraMapPointIcon[];
+/** Icon fill/stroke ink; defaults to the layer tone's contrasting foreground. CSS variables supported. */
+readonly iconColor?:string;
+/** Icon bounding square in CSS pixels, clamped to [1, 200]. Defaults to 16. */
+readonly iconSize?:number;}
 /** One GeoJSON source rendered as three layers (`${sourceId}-fill` for polygons, `${sourceId}-line`
 *  for lines/outlines, `${sourceId}-circle` for points), or — under `cluster`/`kind` — as the
 *  cluster or heatmap layers those describe. Colors resolve from `--lr-*` tokens at apply time,
@@ -164,6 +232,12 @@ readonly color?:string;
 * to `color`, then to `tone`. See `color` for why these are separable.
 */
 readonly strokeColor?:string;
+/** Line/outline paint in the default geometry split. Ignored by cluster and heatmap entries.
+* Does not change point colors or polygon fills. Updates repaint existing layers in place. */
+readonly line?:LyraMapLineOptions;
+/** Category point paint and safe path icons. Works with auto and clustered entries; ignored by heatmaps.
+* Categories share this source and therefore cluster together. No DOM marker is allocated per point. */
+readonly point?:LyraMapPointOptions;
 /** What this entry renders. Defaults to `'auto'` — today's geometry split, unchanged. */
 readonly kind?:LyraMapDataLayerKind;
 /**
@@ -300,7 +374,12 @@ readonly sourceId:string|undefined;}>;}
 * @csspart popup-content - The content container inside a MapLibre-generated marker popup.
 * @csspart popup-close-button - The MapLibre-generated button that closes an open marker popup.
 * @csspart attribution - MapLibre-generated map attribution.
-* @csspart attribution-toggle - MapLibre's compact-attribution disclosure control.
+* @csspart attribution-toggle - MapLibre's compact-attribution disclosure control with a decorative information glyph.
+* @csspart navigation - Standard peer NavigationControl group, when added through the map getter.
+* @csspart zoom-in - Peer zoom-in button with a localized accessible name and tokenized target.
+* @csspart zoom-out - Peer zoom-out button.
+* @csspart compass - Peer compass/reset-north button; its glyph retains the peer's bearing rotation.
+* @csspart scale - Standard peer ScaleControl bar. Units and updates remain owned by MapLibre.
 * @csspart error - Visible localized message shown instead of `container` when `mapStyle` is
 *   missing, the optional peer is unavailable, WebGL2 cannot be created, or map initialization
 *   fails; the transition is announced through the shared light-DOM assertive region.
@@ -387,7 +466,7 @@ private probeLegendSlot;private _legendGradient;
 get legendGradient():readonly(readonly[number,string])[];set legendGradient(value:readonly(readonly[number,string])[]);
 /** Dev-mode-only: catches a gradient key whose value/color stops disagree with the layer it
 * claims to describe. Warning preserves explicit override behavior while making drift visible. */
-private warnOnLegendChoroplethMismatch;
+private warnOnLegendChoroplethMismatch;private legendDescribesLine;
 /** Overrides the low endpoint's caption; defaults to the lowest stop value, locale-formatted. */
 legendGradientLoLabel:string|null;
 /** Overrides the high endpoint's caption; defaults to the highest stop value, locale-formatted. */
@@ -410,7 +489,8 @@ markers:readonly LyraMapMarker[];
 * source into a natively clustered one (aggregate circle, count label, unclustered points), which
 * is what thousands of points need and what `markers` -- one real DOM element per entry -- cannot
 * be; `kind: 'heatmap'` replaces the geometry split with MapLibre's own `heatmap` layer. Neither
-* changes an entry that sets neither.
+* changes an entry that sets neither. `point` adds categorical circle paint and bounded SVG path
+* icons to ordinary or clustered points on the same source; `line` adds numeric route paint.
 */
 dataLayers:readonly LyraMapGeoJsonDataLayer[];private _canonicalChoroplethSource;private _canonicalChoropleth;private _canonicalDataLayersSource;private _canonicalDataLayers;private _canonicalMarkersSource;private _canonicalMarkers;
 /** A property assignment gets one descriptor projection; every subsequent map path uses it. */
@@ -437,7 +517,7 @@ private failure?;private errorAnnouncementSink?;private loadLibrary;private visi
 private _appliedDataLayerShapes;
 /** Last GeoJSON applied per resolved source id, so an update can be diffed against it rather
 *  than replacing the whole source. Holds a reference, not a copy -- it is only ever compared. */
-private _appliedGeoJson;private _nextDataLayerId;private _maplibreModule?;
+private _appliedGeoJson;private _nextDataLayerId;private nextPointIconId;private appliedPointPaint;private appliedPointIcons;private _maplibreModule?;
 /** True only after WebGL2 has been proved in the current owner-document realm. */
 private _webglReady;private _markerInstances;private _markerLabels;private _markerPopupIds;private readonly markerActivationDetails;private _configuredPopups;private _nextPopupId;private peerChromeObserver?;private observedPeerContainer?;private mapResizeObserver?;private observedMapContainer?;private _markerColors;private _connectGeneration;
 /** The underlying runtime `maplibregl.Map`, declared through Lyra's peer-neutral common-method
@@ -524,7 +604,7 @@ private paintDataLayer;
 /** The pre-existing geometry split: polygons filled, lines/outlines stroked, points circled. */
 private applyGeometryLayers;
 /** Paint-only half of `applyGeometryLayers`. See `paintDataLayer` for why the halves are split. */
-private paintGeometryLayers;
+private paintGeometryLayers;private lineColor;private paintPoints;private pointIconColor;private removePointIcons;private applyPointIcons;private paintPointIcons;
 /**
 * `['step', ['get', 'point_count'], …]` over the authored cluster color breaks, or the layer's
 * own flat color when none were supplied.
@@ -572,7 +652,7 @@ private resolveDataLayerSourceId;
 /** Removes one previously-applied `dataLayers` entry's source/layers, if present. */
 private removeDataLayer;private applyMarkers;private readonly configuredMarkerElements;private configureMarkerInteraction;private emitMarkerActivation;private get effectiveMapLabel();private popupId;private configurePopupSemantics;private stopObservingMapAllocation;
 /** Keeps MapLibre's canvas allocation synchronized with this component's live container. */
-private observeMapAllocation;private stopObservingPeerChrome;
+private observeMapAllocation;private stopObservingPeerChrome;private peerControlsResizeObserver?;private measurePeerControlInsets;
 /** Projects stable Lyra parts onto peer-owned nodes without erasing existing part tokens. */
 private syncPeerChromeParts;private observePeerChrome;private syncPopupSemantics;private syncMapSemantics;private formatCount;private legendLimitText;private onLegendSlotChange;
 /**