import{type PropertyDeclaration,type PropertyValues,type TemplateResult}from'lit';import{LyraElement}from'../../../internal/lyra-element.js';import{type FormOwnerValue}from'../../../internal/form-associated.js';import type{LyraSize}from'../../../internal/variants.js';import type{LyraOrientation}from'../../../internal/shared-unions.js';import{type LyraFormValidator}from'../form-validator.js'; /** The value axis. `'horizontal'` maps values to the inline axis (mirroring * under RTL), `'vertical'` to the block axis with the domain minimum at the * block end. */ export type SliderOrientation=LyraOrientation; /** Side of a handle used for its focus/drag tooltip. */ 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 * formatted — `'value'` for a single-handle slider. */ export type SliderValueFormatter=(value:number,handle:SliderHandle)=>string|null|undefined; /** Payload of `lr-input`/`lr-change`. `value` is the value of the handle that * moved and `handle` says which one that was; `minValue`/`maxValue` always * carry both range-handle positions. */ export interface LyraSliderChangeDetail{value:number;minValue:number;maxValue:number;handle:SliderHandle;}export interface LyraSliderEventMap{input:InputEvent;change:Event;'lr-input':CustomEvent;'lr-change':CustomEvent;focus:FocusEvent;blur:FocusEvent;'lr-invalid':CustomEvent;}declare class LyraSliderBase extends LyraElement{} /** * `` — a numeric range control (e.g. an LLM "temperature" * setting), form-associated. Its live `value` and reflected/reset `defaultValue` are numbers; * `valueAsNumber` remains a numeric alias and `valueAsString` preserves the library's former * string round-trip explicitly. A bare slider starts at `0`, matching the mapped contract rather * than silently choosing the domain midpoint. * * A primary-button press anywhere on the track (not just the thumb) jumps the thumb * to that point and continues the same gesture as a drag, matching native * `` click-to-seek. In `range` mode the click moves * whichever handle is nearer the clicked position. * * `range` turns the control into a two-handle selection between `minValue` and `maxValue`, which * default to `0` and `50`. When one handle crosses the other it pushes its sibling instead of * stopping, so the active thumb always follows the user's pointer/key. A named range submits two * same-name `FormData` entries in lower/upper order; a single slider submits one numeric string. * * `label`/`hint`/`errorText` plus their slots render visible form context. `with-label`/`with-hint` * are SSR presence hints only: hydrated instances also detect populated content automatically. * Every handle references visible error content before hint content through `aria-describedby`. * In single mode, host-root external descriptions precede that local guidance and follow live * source replacement, removal and reconnection. Removing label, hint, help-text or error-text * safely removes the corresponding copy while preserving native attribute-removal readback. * The `reference` slot supplies endpoint/unit context in the `references` part. All four text * regions wrap unbroken content within the slider's allocation in LTR and RTL instead of widening * it. * * @customElement lr-slider * @event input - Native event fired continuously while a user moves a handle. * @event change - Native event fired when a handle interaction commits. * @event lr-input - Fired continuously during an active drag or a * keyboard step (including OS key-repeat while a key is held), mirroring * native ``'s own `input` event. * `detail: { value, minValue, maxValue, handle }`. * @event lr-change - Fired once an interaction commits: on pointerup for a * drag, or on keyup or ordinary blur for a keyboard step — so a single Arrow/Home/End/ * PageUp/PageDown press fires both `lr-input` and `lr-change`, * mirroring how native `` fires `change` on every * committed step too. `detail: { value, minValue, maxValue, handle }`. * Disablement or readonly cancels an unfinished gesture without reverting its live value. * @event focus - Native focus relayed once from the focused thumb. * @event blur - Native blur relayed once from the thumb losing focus. * @event lr-invalid - The slider failed a validity check. Cancelable: calling `preventDefault()` * also cancels the native `invalid` event behind it, suppressing the browser's own validation * bubble so an app can present the failure its own way. * @slot label - Rich visible label content, appended after the plain `label` property. * @slot hint - Rich hint content, replacing the plain-text `hint` attribute. * @slot help-text - Shoelace-compatible alias for the `hint` slot. * @slot error - Rich error content, replacing the plain-text `errorText` property. * @slot reference - Endpoint or unit references rendered beside the track. * @csspart base - Compatibility name on the interactive track row; use `slider`. * @csspart slider - Interactive track row. It is the same node as `base`. * @csspart form-control - Shoelace-compatible name on the same interactive row. * @csspart form-control-label - Shoelace-compatible name on the visible label. * @csspart form-control-input - Shoelace-compatible name on the interactive track row. * @csspart form-control-help-text - Shoelace-compatible name on the hint region. * @csspart input - Shoelace-compatible name on the interactive track row. * @csspart label - Visible label content. * @csspart references - Wrapper for the `reference` slot. * @csspart control - The row wrapping the track and the optional value readout. Carries * `role="group"` (named from `label`/`aria-label`) in `range` mode, so the two handles are * announced as one control. * @csspart track - The full-length background line. * @csspart indicator - The filled portion of the track: from `min` up to the current value, or * between the two handles in `range` mode. * @csspart markers - The tick-mark container rendered when `with-markers` is set. * @csspart marker - One `step`-grid tick mark. * @csspart thumb - A draggable handle (`role="slider"`). Present on every handle, including * both range handles. * @csspart thumb-min - The lower handle in `range` mode (also carries `thumb`). * @csspart thumb-max - The upper handle in `range` mode (also carries `thumb`). * @csspart tooltip - The live value bubble rendered per handle when `with-tooltip` is set. * @csspart tooltip__tooltip - Upstream alias on the tooltip bubble. * @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 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. * @method blur - Blurs whichever thumb currently owns focus. * @method click - Activates the first thumb. * @method stepUp - Silently increments the focused thumb (or the single/lower thumb) by `step`. * @method stepDown - Silently decrements the focused thumb (or the single/lower thumb) by `step`. * @method getForm - Returns the resolved form owner. * @method checkValidity - Returns whether custom constraint validation currently passes. * @method reportValidity - Reports validity through the browser's validation UI. * @method setCustomValidity - Sets or clears a caller-supplied validation message. * @cssprop [--lr-slider-gap=var(--lr-space-s)] - Gap between the track row, value, label, * references, and hint as they wrap. * @cssprop [--lr-slider-track-length=var(--lr-size-10rem)] - Length of the track in * `orientation="vertical"`; the horizontal track fills its container instead. Declared as an * inline `var()` fallback (never on `:host`), so a consumer override at any ancestor wins. * @cssprop [--lr-slider-row-size=calc(var(--lr-form-control-height) * 0.6)] - Cross-axis extent of * the control's interactive row: its block size when horizontal, its inline size when vertical. * Scales off the shared form-control ladder, so a size tier moves it without a per-tier rule. * @cssprop [--lr-slider-thumb-size=calc(var(--lr-form-control-height) * 0.4)] - Diameter of each * draggable handle, derived from the `size` tier's shared control height. The transparent drag * area around it never drops below 1.75rem/28px, whatever this is set to. * @cssprop [--lr-slider-track-thickness=calc(var(--lr-slider-thumb-size) * 0.25)] - Thickness of * the track, the filled indicator and (scaled from it) the `with-markers` ticks. * @cssprop [--lr-slider-thumb-bg=var(--lr-color-brand)] - Resting thumb background. * @cssprop [--lr-slider-thumb-border-color=var(--lr-color-surface)] - Resting thumb border. * @cssprop [--lr-slider-thumb-hover-ring-color=var(--lr-color-brand-quiet)] - Thumb ring while * hovered. * @cssprop [--lr-slider-thumb-active-ring-color=var(--lr-slider-thumb-hover-ring-color)] - Thumb * ring while pressed. * @cssprop --thumb-size - Shoelace alias setting both thumb dimensions. * @cssprop --thumb-width - Upstream thumb inline size. * @cssprop --thumb-height - Upstream thumb block size. * @cssprop --track-height - Shoelace alias for track thickness. * @cssprop --track-size - Web Awesome alias for track thickness. * @cssprop --track-color-active - Filled indicator color. * @cssprop --track-color-inactive - Resting track color. * @cssprop --track-active-offset - Additional indicator offset. * @cssprop --tooltip-offset - Shoelace tooltip distance alias. * @cssprop [--lr-slider-tooltip-distance=8] - Numeric CSS-pixel distance written by the * `tooltipDistance` property for the internal tooltip-placement calculation. * @cssprop --marker-width - Marker inline size. * @cssprop --marker-height - Marker block size. * @cssprop [--lr-form-control-required-content=' *'] - The required marker appended to * `form-control-label` while `required` is set. Set it to `''` to suppress the marker, or to any * other quoted string (`' (required)'`, a localized word) to replace it. * @cssprop [--lr-form-control-required-color=var(--lr-color-danger)] - Required-marker color, * themeable independently of error text and invalid borders. * @cssprop [--lr-form-control-required-offset=0] - Inline space between the label text and the * required marker. * @cssstate disabled - The control is disabled directly or by a fieldset. * @cssstate dragging - At least one pointer drag is active. * @cssstate focused - One of the thumbs owns focus. * @cssstate required - The `required` form flag is set. * @cssstate optional - The `required` form flag is not set. * @cssstate valid - The slider has no custom validity error. * @cssstate invalid - The slider has a custom validity error. * @cssstate user-valid - Valid after user interaction (dragging, keying, blurring a thumb), * `reportValidity()`, or a submission attempt. Not after a silent `checkValidity()` alone. * @cssstate user-invalid - Invalid after that same interaction or interactive validation. Not * after a silent `checkValidity()` alone. * @status stable * @since 4.0.0 */ export declare class LyraSlider extends LyraSliderBase{ /** Public WA-compatible intrinsic validator catalog. */ static get validators():LyraFormValidator[];static formAssociated:boolean;static styles:import("lit").CSSResultGroup[];static properties:{customError:{attribute:string;reflect:boolean;noAccessor:boolean;};value:{attribute:boolean;noAccessor:boolean;};defaultValue:{attribute:string;type:NumberConstructor;reflect:boolean;useDefault:boolean;noAccessor:boolean;};name:{reflect:boolean;noAccessor:boolean;};required:{type:BooleanConstructor;reflect:boolean;noAccessor:boolean;};disabled:{type:BooleanConstructor;reflect:boolean;noAccessor:boolean;};min:{type:NumberConstructor;noAccessor:boolean;};max:{type:NumberConstructor;noAccessor:boolean;};step:{type:NumberConstructor;noAccessor:boolean;};range:{type:BooleanConstructor;reflect:boolean;noAccessor:boolean;};minValue:{type:NumberConstructor;attribute:string;noAccessor:boolean;};maxValue:{type:NumberConstructor;attribute:string;noAccessor:boolean;};size:{reflect:boolean;};}; /** * Control size, on the library's shared ladder. Accepts both spellings of every tier — * `2xs`/`xs`/`s`/`m`/`l`/`xl` and Web Awesome's `small`/`medium`/`large` — so migrating either way * is a tag rename. Scales the track, the filled indicator, the tick marks and the handles off the * same `--lr-form-control-*` values ``/``/`` use, so controls of * one `size` line up in a row. The handle's transparent drag area keeps its own 1.75rem/28px * floor at every tier, so a small slider is still a conformant pointer target. */ 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;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. * @default 0 */ get defaultValue():number;set defaultValue(next:number|string|null); /** Numeric compatibility alias for `value`. * @default 0 */ get valueAsNumber():number;set valueAsNumber(next:number); /** Explicit string compatibility accessor retained for integrations that serialize eagerly. * @default '0' */ get valueAsString():string;set valueAsString(next:string); /** Submitted form-data key. A null/empty name omits the control from submission. * @default null */ get name():string|null;set name(next:string|null); /** Whether the control participates in the required form-state vocabulary. A slider always * has a numeric value, so this flag does not by itself make the control invalid. * @default false */ get required():boolean;set required(next:boolean); /** Prevents focus, user edits, and form submission. * @default false */ get disabled():boolean;set disabled(next:boolean);get effectiveDisabled():boolean;get form():HTMLFormElement|null;set form(owner:FormOwnerValue);getForm():HTMLFormElement|null;get labels():NodeList;get validity():ValidityState;get validationMessage():string;get willValidate():boolean; /** Lower domain bound. * @default 0 */ get min():number;set min(next:number); /** Upper domain bound. * @default 100 */ get max():number;set max(next:number); /** Step-grid interval; non-positive values select the unstepped mode. * @default 1 */ get step():number;set step(next:number); /** Two-handle mode: the control selects the span between `minValue` and * `maxValue` instead of a single number. See the class doc for what this * means for form submission. * @default false */ get range():boolean;set range(next:boolean); /** Read-only upstream alias indicating whether two handles are active. * @default false */ get isRange():boolean; /** The lower handle's value in `range` mode. Crossing pushes the upper handle. * @default 0 */ get minValue():number;set minValue(next:number); /** The upper handle's value in `range` mode. Crossing pushes the lower handle. * @default 50 */ get maxValue():number;set maxValue(next:number); /** Accessible-name fallback for the slider when the host has no `aria-label`, used when no * visible label context exists around it (e.g. no wrapping `