@antadesign/anta 0.3.33 → 0.3.35

package/dist/elements/a-slider.js

@@ -1,5 +1,7 @@
 import { finiteNumber, HTMLElementBase, isModifiedNavigationKey } from "../anta_helpers";
 import "./a-slider.css";
+import { referencedElements } from "./shadow-aria";
+import { upgradeValueProperties } from "./value-input";
 const precisionOf = (value) => {
   const exponent = value.toString().match(/(?:\.(\d+))?(?:e([+-]?\d+))?$/i);
   return Math.max(0, (exponent?.[1]?.length ?? 0) - Number(exponent?.[2] ?? 0));
@@ -30,7 +32,9 @@ class ASliderElement extends HTMLElementBase {
     "inverted",
     "name",
     "aria-label",
-    "aria-labelledby"
+    "aria-labelledby",
+    "aria-describedby",
+    "aria-description"
   ];
   internals;
   #control;
@@ -61,186 +65,45 @@ class ASliderElement extends HTMLElementBase {
   #lastActiveThumb = 0;
   #seeded = false;
   #dirty = false;
+  // Match an accepted range request to the physical thumb that produced it.
+  #pendingRequest;
+  #endpointLabels = [];
+  #accessibilityDirty = true;
+  #accessibilityState;
+  #accessibilityReferences = [];
+  #accessibilityUnresolved = false;
   #drag;
+  #onPointerDown = (event) => {
+    if (event.composedPath().includes(this.#control)) this.#beginDrag(event);
+  };
+  #onPointerMove = (event) => this.#moveDrag(event);
+  #onPointerEnd = (event) => this.#finishDrag(event);
+  #onKeyDown = (event) => this.#handleKeydown(event);
+  // Run the default action after consumer listeners on this host, including
+  // listeners added after connection. Ancestors may stop propagation.
+  #orderDefaultAction = (event) => {
+    const handler = event.type === "keydown" ? this.#onKeyDown : event.type === "pointerdown" ? this.#onPointerDown : this.#onPointerMove;
+    this.removeEventListener(event.type, handler);
+    this.addEventListener(event.type, handler);
+  };
   get value() {
     return Array.isArray(this.#value) ? [...this.#value] : this.#value;
   }
   set value(value) {
-    this.setAttribute("value", Array.isArray(value) ? value.join(" ") : String(value));
+    if (value == null || value === "") this.removeAttribute("value");
+    else this.setAttribute("value", serializeSliderValue(value));
   }
   get defaultValue() {
     return parseSliderValue(this.getAttribute("defaultvalue"), this.#fallbackValue());
   }
   set defaultValue(value) {
-    this.setAttribute("defaultvalue", Array.isArray(value) ? value.join(" ") : String(value));
+    if (value == null) this.removeAttribute("defaultvalue");
+    else this.setAttribute("defaultvalue", serializeSliderValue(value));
   }
   constructor() {
     super();
     this.internals = this.attachInternals?.();
     const shadow = this.attachShadow({ mode: "open" });
-    const style = document.createElement("style");
-    style.textContent = `
-      :host {
-        display: grid;
-        grid-template-columns: minmax(0, 1fr);
-        gap: 1px;
-        outline: none;
-      }
-      [hidden] { display: none !important; }
-      .header {
-        display: flex;
-        align-items: baseline;
-        gap: 1px;
-        min-width: 0;
-      }
-      slot[name="label"] {
-        display: block;
-        min-width: 0;
-        color: var(--slider-label);
-        font-family: var(--sans-serif);
-        font-size: var(--slider-label-size);
-        font-weight: 500;
-        line-height: var(--slider-label-line-height);
-      }
-      .inline-value,
-      .end-value {
-        color: var(--slider-value);
-        font-family: var(--sans-serif);
-        font-size: var(--slider-value-size);
-        font-variant-numeric: tabular-nums;
-        line-height: var(--slider-value-line-height);
-      }
-      .value-affix { color: var(--slider-value-affix); }
-      .inline-separator,
-      .inline-value { display: none; }
-      .inline-value { margin-inline-start: 0.5ch; }
-      .end-value {
-        display: block;
-        flex: 0 0 auto;
-        margin-inline-start: auto;
-        padding-inline-start: 1ch;
-      }
-      :host([value-display="inline"]) .inline-separator,
-      :host([value-display="inline"]) .inline-value { display: block; }
-      :host([value-display="inline"]) .end-value,
-      :host([value-display="thumb"]) .end-value,
-      :host([value-display="none"]) .end-value { display: none; }
-      .control {
-        position: relative;
-        block-size: var(--anta-slider-control-size);
-        border-radius: 4px;
-        cursor: grab;
-        touch-action: none;
-        user-select: none;
-      }
-      :host([track-click="jump"]) .control { cursor: pointer; }
-      .control[data-dragging] { cursor: grabbing; }
-      .control[data-dragging] .thumb[data-active] { background: var(--slider-thumb-active); }
-      :host(:focus-visible) .control:not([data-pointer-focus]) {
-        outline: 1px solid var(--focus-ring);
-        outline-offset: 0;
-      }
-      .rail-area {
-        position: absolute;
-        inset-block-start: 50%;
-        inset-inline: calc(var(--anta-slider-thumb-size) / 2);
-        block-size: var(--anta-slider-track-size);
-        transform: translateY(-50%);
-      }
-      .rail,
-      .fill {
-        position: absolute;
-        inset: 0;
-        border-radius: var(--slider-track-radius);
-        transition: background-color 75ms ease-out;
-      }
-      .rail {
-        inset-inline: calc(var(--slider-track-inset) - var(--anta-slider-thumb-size) / 2);
-        background: var(--slider-track);
-      }
-      .fill {
-        inset-inline-start: calc(var(--_fill-start, 0%) + var(--_fill-start-edge, 0px));
-        inset-inline-end: auto;
-        inline-size: calc(var(--_fill-end, 0%) - var(--_fill-start, 0%) + var(--_fill-end-edge, 0px) - var(--_fill-start-edge, 0px));
-        background: var(--slider-fill);
-      }
-      .thumb {
-        position: absolute;
-        inset-block-start: 50%;
-        inset-inline-start: var(--_percent, 0%);
-        box-sizing: border-box;
-        inline-size: var(--anta-slider-thumb-size);
-        block-size: var(--anta-slider-thumb-size);
-        border: var(--anta-slider-thumb-border-width) solid var(--slider-thumb-border);
-        border-radius: var(--slider-thumb-radius);
-        background: var(--slider-thumb);
-        transition: background-color 75ms ease-out, border-color 75ms ease-out;
-        transform: translate(-50%, -50%);
-      }
-      .thumb[data-last-active] { z-index: 1; }
-      .thumb:focus-visible {
-        outline: 1px solid var(--focus-ring);
-        outline-offset: 2px;
-        z-index: 2;
-      }
-      .thumb-value {
-        display: none;
-        position: absolute;
-        inset-inline-start: var(--_percent, 0%);
-        inset-block-start: 50%;
-        min-inline-size: max-content;
-        color: var(--slider-value);
-        font-family: var(--sans-serif);
-        font-size: var(--slider-value-size);
-        font-variant-numeric: tabular-nums;
-        line-height: var(--slider-value-line-height);
-        padding-inline: 6px;
-        background: var(--bg-2);
-        border: 1px solid var(--border-3);
-        border-radius: 4px;
-        text-align: center;
-        transform: translate(-50%, calc(
-          -50% - var(--anta-slider-control-size) / 2 - 1px - var(--slider-value-line-height) / 2
-        ));
-      }
-      :host([value-display="thumb"]) .thumb-value { display: block; }
-      :host([value-display="thumb"]) .thumb-value[hidden] { display: none !important; }
-      slot[name="markers"] {
-        display: block;
-        position: relative;
-        min-block-size: var(--slider-marker-line-height);
-      }
-      slot[name="markers"]::slotted(*) {
-        position: absolute;
-        inset-inline-start: var(--slider-marker-position);
-        max-inline-size: min(12rem, 50vw);
-        color: var(--slider-marker);
-        font-family: var(--sans-serif);
-        font-size: var(--slider-marker-size);
-        font-variant-numeric: tabular-nums;
-        line-height: var(--slider-marker-line-height);
-        text-align: center;
-        transform: translateX(-50%);
-        white-space: nowrap;
-      }
-      slot[name="markers"]::slotted([data-slider-marker-start]) { text-align: start; transform: translateX(0); }
-      slot[name="markers"]::slotted([data-slider-marker-end]) { text-align: end; transform: translateX(-100%); }
-      slot:not([name]) { display: block; }
-      :host([disabled]) .control,
-      :host(:disabled) .control { cursor: not-allowed; }
-      @media (forced-colors: active) {
-        .rail { background: Canvas; border: 1px solid CanvasText; }
-        .fill { background: Highlight; }
-        .thumb { background: Canvas; border-color: CanvasText; }
-        :host(:focus-visible) .control { outline: 2px solid Highlight; }
-        .thumb:focus-visible { outline: 2px solid Highlight; }
-      }
-      @media (prefers-reduced-motion: reduce) {
-        .rail,
-        .fill,
-        .thumb { transition: none; }
-      }
-    `;
     this.#header = document.createElement("div");
     this.#header.className = "header";
     this.#header.part.add("header");
@@ -249,22 +112,27 @@ class ASliderElement extends HTMLElementBase {
     this.#label.part.add("label");
     const separator = document.createElement("span");
     separator.className = "inline-separator";
+    separator.part.add("value-separator");
     separator.textContent = ":";
     this.#inlineValue = document.createElement("span");
     this.#inlineValue.className = "inline-value";
-    this.#inlineValue.part.add("value");
+    this.#inlineValue.part.add("value", "inline-value");
     this.#inlineValuePrefix = document.createElement("span");
     this.#inlineValuePrefix.className = "value-affix";
+    this.#inlineValuePrefix.part.add("value-affix");
     this.#inlineValueSuffix = document.createElement("span");
     this.#inlineValueSuffix.className = "value-affix";
+    this.#inlineValueSuffix.part.add("value-affix");
     this.#inlineValue.append(this.#inlineValuePrefix, this.#inlineValueSuffix);
     this.#endValue = document.createElement("span");
     this.#endValue.className = "end-value";
-    this.#endValue.part.add("value");
+    this.#endValue.part.add("value", "end-value");
     this.#endValuePrefix = document.createElement("span");
     this.#endValuePrefix.className = "value-affix";
+    this.#endValuePrefix.part.add("value-affix");
     this.#endValueSuffix = document.createElement("span");
     this.#endValueSuffix.className = "value-affix";
+    this.#endValueSuffix.part.add("value-affix");
     this.#endValue.append(this.#endValuePrefix, this.#endValueSuffix);
     this.#header.append(this.#label, separator, this.#inlineValue, this.#endValue);
     this.#control = document.createElement("div");
@@ -272,12 +140,13 @@ class ASliderElement extends HTMLElementBase {
     this.#control.part.add("control");
     this.#railArea = document.createElement("div");
     this.#railArea.className = "rail-area";
+    this.#railArea.part.add("rail-area");
     const rail = document.createElement("div");
     rail.className = "rail";
     rail.part.add("track");
     this.#fill = document.createElement("div");
     this.#fill.className = "fill";
-    this.#fill.part.add("fill");
+    this.#fill.part.add("fill", "fill-start");
     this.#fillEnd = document.createElement("div");
     this.#fillEnd.className = "fill";
     this.#fillEnd.part.add("fill", "fill-end");
@@ -289,19 +158,23 @@ class ASliderElement extends HTMLElementBase {
     this.#thumbEnd.part.add("thumb", "thumb-2");
     this.#thumbValue = document.createElement("span");
     this.#thumbValue.className = "thumb-value";
-    this.#thumbValue.part.add("thumb-value");
+    this.#thumbValue.part.add("thumb-value", "thumb-value-1");
     this.#thumbValuePrefix = document.createElement("span");
     this.#thumbValuePrefix.className = "value-affix";
+    this.#thumbValuePrefix.part.add("value-affix");
     this.#thumbValueSuffix = document.createElement("span");
     this.#thumbValueSuffix.className = "value-affix";
+    this.#thumbValueSuffix.part.add("value-affix");
     this.#thumbValue.append(this.#thumbValuePrefix, this.#thumbValueSuffix);
     this.#thumbValueEnd = document.createElement("span");
     this.#thumbValueEnd.className = "thumb-value";
     this.#thumbValueEnd.part.add("thumb-value", "thumb-value-2");
     this.#thumbValueEndPrefix = document.createElement("span");
     this.#thumbValueEndPrefix.className = "value-affix";
+    this.#thumbValueEndPrefix.part.add("value-affix");
     this.#thumbValueEndSuffix = document.createElement("span");
     this.#thumbValueEndSuffix.className = "value-affix";
+    this.#thumbValueEndSuffix.part.add("value-affix");
     this.#thumbValueEnd.append(this.#thumbValueEndPrefix, this.#thumbValueEndSuffix);
     this.#railArea.append(rail, this.#fill, this.#fillEnd, this.#thumb, this.#thumbEnd, this.#thumbValue, this.#thumbValueEnd);
     this.#control.append(this.#railArea);
@@ -313,7 +186,10 @@ class ASliderElement extends HTMLElementBase {
     for (const slot of [this.#label, this.#markers, this.#extras]) {
       slot.addEventListener("slotchange", () => {
         this.#syncSlotVisibility();
-        if (slot === this.#label) this.#paintAccessibility();
+        if (slot === this.#label) {
+          this.#accessibilityDirty = true;
+          this.#paintAccessibility();
+        }
       });
     }
     for (const [index, thumb] of [this.#thumb, this.#thumbEnd].entries()) {
@@ -323,16 +199,25 @@ class ASliderElement extends HTMLElementBase {
         this.#paint();
       });
     }
-    this.#control.addEventListener("pointerdown", (event) => this.#beginDrag(event));
-    this.#control.addEventListener("pointermove", (event) => this.#moveDrag(event));
-    this.#control.addEventListener("pointerup", (event) => this.#finishDrag(event));
-    this.#control.addEventListener("pointercancel", (event) => this.#finishDrag(event));
-    this.#control.addEventListener("lostpointercapture", (event) => this.#finishDrag(event));
-    this.addEventListener("keydown", (event) => this.#handleKeydown(event));
-    this.addEventListener("blur", () => delete this.#control.dataset.pointerFocus);
-    shadow.append(style, this.#header, this.#control, this.#markers, this.#extras);
+    this.#control.addEventListener("pointerup", this.#onPointerEnd);
+    this.#control.addEventListener("pointercancel", this.#onPointerEnd);
+    this.#control.addEventListener("lostpointercapture", this.#onPointerEnd);
+    this.addEventListener("blur", () => {
+      delete this.#control.dataset.pointerFocus;
+      this.#paintStates();
+    });
+    for (const thumb of [this.#thumb, this.#thumbEnd]) {
+      const endpoint = document.createElement("span");
+      endpoint.hidden = true;
+      thumb.append(endpoint);
+      this.#endpointLabels.push(endpoint);
+    }
+    shadow.append(this.#header, this.#control, this.#markers, this.#extras);
+    upgradeValueProperties(this);
   }
   connectedCallback() {
+    this.#accessibilityDirty = true;
+    for (const type of ["pointerdown", "keydown", "pointermove"]) this.addEventListener(type, this.#orderDefaultAction, true);
     if (!this.#seeded) {
       this.#applyValue(this.#initialValue());
       this.#seeded = true;
@@ -340,24 +225,54 @@ class ASliderElement extends HTMLElementBase {
     this.#paint();
     this.#syncSlotVisibility();
   }
-  attributeChangedCallback(name) {
+  disconnectedCallback() {
+    this.#endDrag(false);
+    for (const type of ["pointerdown", "keydown", "pointermove"]) this.removeEventListener(type, this.#orderDefaultAction, true);
+    this.removeEventListener("pointerdown", this.#onPointerDown);
+    this.removeEventListener("keydown", this.#onKeyDown);
+    this.removeEventListener("pointermove", this.#onPointerMove);
+    this.#pendingRequest = void 0;
+    delete this.#control.dataset.pointerFocus;
+    this.#paintStates();
+  }
+  adoptedCallback() {
+    this.disconnectedCallback();
+  }
+  attributeChangedCallback(name, previous, next) {
     if (!this.#seeded) return;
+    if (name.startsWith("aria-")) this.#accessibilityDirty = true;
     if (name === "value") {
-      if (this.hasAttribute("value")) {
-        this.#applyValue(parseSliderValue(this.getAttribute("value"), this.#fallbackValue()));
-        this.#dirty = false;
-      } else if (!this.#dirty) {
-        this.#applyValue(this.#initialValue());
-      }
-    } else if (name === "defaultvalue" && !this.hasAttribute("value") && !this.#dirty) {
-      this.#applyValue(this.#initialValue());
+      if (next === null && previous !== null) {
+        this.#dirty = true;
+        this.#pendingRequest = void 0;
+        this.#rebaseDrag();
+      } else this.#syncInput();
+    } else if (name === "defaultvalue") {
+      if (!this.#controlled && !this.#dirty) this.#syncInput();
     } else if (name === "min" || name === "max" || name === "step") {
-      this.#applyValue(this.#value);
+      if (this.#controlled) this.#syncInput();
+      else {
+        this.#applyValue(this.#value);
+        this.#rebaseDrag();
+      }
     }
+    if (this.#isDisabled) this.#endDrag(true);
     this.#paint();
     if (name === "value-display") this.#syncSlotVisibility();
   }
+  #syncInput() {
+    const next = this.#normalizeValue(this.#initialValue());
+    const pending = this.#pendingRequest;
+    if (pending && sameSliderValue(pending.value, next)) this.#orderReversed = pending.reversed;
+    else this.#rebaseDrag(next);
+    this.#pendingRequest = void 0;
+    this.#applyValue(next);
+    this.#paint();
+  }
   formResetCallback() {
+    this.#endDrag(false);
+    this.#pendingRequest = void 0;
+    if (this.#controlled) return;
     const previous = this.#value;
     this.#applyValue(this.defaultValue);
     this.#dirty = false;
@@ -366,11 +281,15 @@ class ASliderElement extends HTMLElementBase {
   }
   formStateRestoreCallback(state) {
     if (typeof state !== "string") return;
+    if (this.#controlled) return;
+    this.#endDrag(false);
+    this.#pendingRequest = void 0;
     this.#applyValue(parseSliderValue(state, this.#fallbackValue()));
     this.#dirty = true;
     this.#paint();
   }
   formDisabledCallback() {
+    if (this.#isDisabled) this.#endDrag(true);
     this.#paint();
   }
   get #min() {
@@ -386,21 +305,25 @@ class ASliderElement extends HTMLElementBase {
   get #isDisabled() {
     return this.hasAttribute("disabled") || this.matches(":disabled");
   }
+  get #controlled() {
+    return this.hasAttribute("value");
+  }
   #fallbackValue() {
     const range = Array.isArray(this.#value) || Array.isArray(parseSliderValue(this.getAttribute("value"), this.#min));
     return range ? [this.#min, this.#max] : this.#min;
   }
   #initialValue() {
-    const source = this.getAttribute("value") ?? this.getAttribute("defaultvalue");
-    return parseSliderValue(source, this.#fallbackValue());
+    if (this.#controlled) return parseSliderValue(this.getAttribute("value"), this.#fallbackValue());
+    return this.defaultValue;
   }
   #normalize(value) {
     const min = this.#min;
     const max = this.#max;
     const step = this.#step;
     const stepped = min + Math.round((Math.min(max, Math.max(min, value)) - min) / step) * step;
-    const precision = Math.min(12, Math.max(precisionOf(min), precisionOf(max), precisionOf(step)));
-    return Number(Math.min(max, Math.max(min, stepped)).toFixed(precision));
+    const precision = Math.max(precisionOf(min), precisionOf(max), precisionOf(step));
+    const rounded = precision <= 100 ? Number(stepped.toFixed(precision)) : Number(stepped.toPrecision(15));
+    return Math.min(max, Math.max(min, rounded));
   }
   #normalizeValue(value) {
     if (!Array.isArray(value)) return this.#normalize(value);
@@ -464,6 +387,7 @@ class ASliderElement extends HTMLElementBase {
     this.#renderValue(this.#endValue, this.#endValuePrefix, this.#endValueSuffix, range ? low : high, range ? high : void 0);
     this.#renderValue(this.#thumbValue, this.#thumbValuePrefix, this.#thumbValueSuffix, first);
     if (range) this.#renderValue(this.#thumbValueEnd, this.#thumbValueEndPrefix, this.#thumbValueEndSuffix, second);
+    this.#paintStates();
     this.#paintAccessibility();
     this.#paintFormValue();
   }
@@ -485,43 +409,82 @@ class ASliderElement extends HTMLElementBase {
     const suffix = this.getAttribute("value-suffix") ?? "";
     return `${prefix}${value}${suffix}`;
   }
+  #paintStates() {
+    const states = this.internals?.states;
+    if (!states) return;
+    const set = (name, enabled) => enabled ? states.add(name) : states.delete(name);
+    set("dragging", !!this.#drag);
+    set("pointer-focus", this.#control.hasAttribute("data-pointer-focus"));
+    set("thumb-1-active", this.#lastActiveThumb === 0);
+    set("thumb-2-active", this.#lastActiveThumb === 1);
+    for (const [name, element] of [
+      ["has-header", this.#header],
+      ["has-markers", this.#markers],
+      ["has-extras", this.#extras],
+      ["has-fill", this.#fill],
+      ["has-fill-end", this.#fillEnd],
+      ["has-thumb-value", this.#thumbValue],
+      ["has-thumb-value-end", this.#thumbValueEnd]
+    ]) set(name, !element.hidden);
+    set("range", Array.isArray(this.#value));
+  }
   #paintAccessibility() {
     const range = Array.isArray(this.#value);
-    const slottedLabel = this.#label.assignedNodes({ flatten: true }).map((node) => node.textContent ?? "").join("").trim();
+    const disabled = this.#isDisabled;
+    const previous = this.#accessibilityState;
     const root = this.getRootNode();
-    const referencedLabel = (this.getAttribute("aria-labelledby") ?? "").split(/\s+/).map((id) => root.getElementById(id)?.textContent?.trim() ?? "").filter(Boolean).join(" ");
-    const base = (this.getAttribute("aria-label") ?? referencedLabel ?? slottedLabel).trim() || slottedLabel;
+    const referencesChanged = this.#accessibilityReferences.some(({ id, element }) => element.id !== id || element.getRootNode() !== root);
+    if (this.#accessibilityDirty || this.#accessibilityUnresolved || referencesChanged || !previous || previous.range !== range || previous.disabled !== disabled || range && previous.reversed !== this.#orderReversed) {
+      this.#syncAccessibility(range, disabled);
+      this.#accessibilityDirty = false;
+      this.#accessibilityState = { range, reversed: this.#orderReversed, disabled };
+    }
     const internals = this.internals;
     if (internals) {
-      internals.role = range ? "group" : "slider";
-      internals.ariaLabel = !this.hasAttribute("aria-label") && !this.hasAttribute("aria-labelledby") ? slottedLabel || null : null;
       internals.ariaValueMin = range ? null : String(this.#min);
       internals.ariaValueMax = range ? null : String(this.#max);
       internals.ariaValueNow = range ? null : String(this.#value);
       internals.ariaValueText = range ? null : this.#formatValue(this.#value);
     }
+    if (!range) return;
+    for (const [index, thumb] of [this.#thumb, this.#thumbEnd].entries()) {
+      thumb.ariaValueMin = String(this.#min);
+      thumb.ariaValueMax = String(this.#max);
+      thumb.ariaValueNow = String(this.#physicalValues[index]);
+      thumb.ariaValueText = this.#formatValue(this.#physicalValues[index]);
+    }
+  }
+  #syncAccessibility(range, disabled) {
+    const referenced = referencedElements(this, this.getAttribute("aria-labelledby") ?? "");
+    const labels = referenced.length ? referenced : this.#label.assignedElements({ flatten: true });
+    const explicit = referenced.length ? null : this.getAttribute("aria-label");
+    const descriptions = range ? referencedElements(this, this.getAttribute("aria-describedby") ?? "") : [];
+    this.#accessibilityReferences = [...referenced, ...descriptions].map((element) => ({ id: element.id, element }));
+    const ids = [this.getAttribute("aria-labelledby"), range ? this.getAttribute("aria-describedby") : null].flatMap((value) => value?.match(/\S+/g) ?? []);
+    this.#accessibilityUnresolved = ids.length !== this.#accessibilityReferences.length;
+    const internals = this.internals;
+    if (internals) {
+      internals.role = range ? "group" : "slider";
+      internals.ariaLabelledByElements = explicit == null && !this.hasAttribute("aria-labelledby") ? labels : [];
+      internals.ariaDisabled = disabled ? "true" : null;
+    }
     for (const [index, thumb] of [this.#thumb, this.#thumbEnd].entries()) {
       if (!range) {
-        thumb.removeAttribute("role");
+        for (const name of ["role", "aria-label", "aria-valuemin", "aria-valuemax", "aria-valuenow", "aria-valuetext", "aria-disabled", "aria-description"]) thumb.removeAttribute(name);
+        thumb.ariaLabelledByElements = [];
+        thumb.ariaDescribedByElements = [];
         thumb.tabIndex = -1;
-        thumb.removeAttribute("aria-label");
-        thumb.removeAttribute("aria-valuemin");
-        thumb.removeAttribute("aria-valuemax");
-        thumb.removeAttribute("aria-valuenow");
-        thumb.removeAttribute("aria-valuetext");
-        thumb.removeAttribute("aria-disabled");
         continue;
       }
       const endpoint = index === 0 !== this.#orderReversed ? "minimum" : "maximum";
-      const value = this.#physicalValues[index];
+      const endpointLabel = this.#endpointLabels[index];
+      endpointLabel.textContent = explicit != null ? `${explicit} ${endpoint}` : labels.length ? endpoint : `${endpoint[0].toUpperCase()}${endpoint.slice(1)} value`;
       thumb.role = "slider";
-      thumb.tabIndex = this.#isDisabled ? -1 : 0;
-      thumb.ariaLabel = base ? `${base} ${endpoint}` : `${endpoint[0].toUpperCase()}${endpoint.slice(1)} value`;
-      thumb.ariaValueMin = String(this.#min);
-      thumb.ariaValueMax = String(this.#max);
-      thumb.ariaValueNow = String(value);
-      thumb.ariaValueText = this.#formatValue(value);
-      thumb.ariaDisabled = this.#isDisabled ? "true" : null;
+      thumb.tabIndex = disabled ? -1 : 0;
+      thumb.ariaLabelledByElements = explicit != null ? [endpointLabel] : [...labels, endpointLabel];
+      thumb.ariaDescribedByElements = descriptions;
+      thumb.ariaDescription = this.getAttribute("aria-description");
+      thumb.ariaDisabled = disabled ? "true" : null;
     }
   }
   #paintFormValue() {
@@ -547,37 +510,48 @@ class ASliderElement extends HTMLElementBase {
     this.#header.hidden = !assigned(this.#label) && this.getAttribute("value-display") === "none";
     this.#markers.hidden = !assigned(this.#markers);
     this.#extras.hidden = !assigned(this.#extras);
+    this.#paintStates();
+  }
+  #snapshot(value) {
+    return { value: Array.isArray(value) ? [...value] : value, min: this.#min, max: this.#max, step: this.#step, name: this.getAttribute("name") ?? void 0 };
+  }
+  #notify(type, value = this.#value) {
+    this.dispatchEvent(new CustomEvent(type, { bubbles: true, composed: true, detail: this.#snapshot(value) }));
   }
   #setValue(value, thumb = 0) {
     const next = this.#normalize(value);
-    if (Array.isArray(this.#value)) {
-      const previous = this.#value;
-      this.#physicalValues[thumb] = next;
-      if (this.#physicalValues[0] !== this.#physicalValues[1]) {
-        this.#orderReversed = this.#physicalValues[0] > this.#physicalValues[1];
-      }
-      this.#value = this.#orderReversed ? [this.#physicalValues[1], this.#physicalValues[0]] : [this.#physicalValues[0], this.#physicalValues[1]];
-      this.#lastActiveThumb = thumb;
-      this.#paint();
-      if (sameSliderValue(previous, this.#value)) return false;
-    } else {
-      if (next === this.#value) return false;
-      this.#value = next;
-      this.#physicalValues = [next, next];
+    const physical = [...this.#physicalValues];
+    physical[thumb] = next;
+    const reversed = physical[0] === physical[1] ? this.#orderReversed : physical[0] > physical[1];
+    const requested = Array.isArray(this.#value) ? reversed ? [physical[1], physical[0]] : physical : next;
+    if (sameSliderValue(this.#drag?.lastInput ?? this.#value, requested)) return false;
+    if (this.#drag) this.#drag.requested = this.#drag.lastInput = requested;
+    this.#pendingRequest = this.#controlled ? { value: requested, reversed } : void 0;
+    if (!this.#controlled) {
+      this.#orderReversed = reversed;
+      this.#applyValue(requested);
+      this.#dirty = true;
       this.#paint();
     }
-    this.#dirty = true;
-    this.dispatchEvent(new Event("input", { bubbles: true, composed: true }));
-    return true;
+    this.#notify("input", requested);
+    return requested;
   }
   #emitInputAndChange() {
-    this.dispatchEvent(new Event("input", { bubbles: true, composed: true }));
-    this.dispatchEvent(new Event("change", { bubbles: true, composed: true }));
+    this.#notify("input");
+    this.#notify("change");
+  }
+  #rebaseDrag(value = this.#value) {
+    const drag = this.#drag;
+    if (!drag) return;
+    drag.startX = drag.clientX;
+    drag.startValue = Array.isArray(value) ? value[this.#orderReversed ? 1 - drag.thumb : drag.thumb] : value;
+    drag.lastInput = void 0;
   }
   #valueAt(clientX) {
     const rect = this.#railArea.getBoundingClientRect();
     if (rect.width <= 0) return Array.isArray(this.#value) ? this.#physicalValues[this.#lastActiveThumb] : this.#value;
-    return this.#min + (clientX - rect.left) / rect.width * (this.#max - this.#min);
+    const ratio = this.#rtl() ? (rect.right - clientX) / rect.width : (clientX - rect.left) / rect.width;
+    return this.#min + ratio * (this.#max - this.#min);
   }
   #thumbAt(clientX) {
     if (!Array.isArray(this.#value)) return 0;
@@ -586,14 +560,22 @@ class ASliderElement extends HTMLElementBase {
     const secondDistance = Math.abs(candidate - this.#physicalValues[1]);
     return firstDistance === secondDistance ? this.#lastActiveThumb : firstDistance < secondDistance ? 0 : 1;
   }
+  #rtl() {
+    return this.ownerDocument.defaultView?.getComputedStyle(this).direction === "rtl";
+  }
   #beginDrag(event) {
-    if (this.#isDisabled || event.button !== 0) return;
+    if (event.defaultPrevented || this.#drag || this.#isDisabled || event.button !== 0) return;
     const rect = this.#railArea.getBoundingClientRect();
     if (rect.width <= 0) return;
     const thumb = event.composedPath()[0] === this.#thumb ? 0 : event.composedPath()[0] === this.#thumbEnd ? 1 : this.#thumbAt(event.clientX);
     const startValue = Array.isArray(this.#value) ? this.#physicalValues[thumb] : this.#value;
-    this.#drag = { pointerId: event.pointerId, startX: event.clientX, startValue, startPublicValue: this.value, thumb };
-    this.#control.setPointerCapture(event.pointerId);
+    this.#drag = { pointerId: event.pointerId, startX: event.clientX, clientX: event.clientX, startValue, startPublicValue: this.value, thumb };
+    try {
+      this.#control.setPointerCapture(event.pointerId);
+    } catch {
+      this.#drag = void 0;
+      return;
+    }
     this.#control.dataset.dragging = "";
     this.#control.dataset.pointerFocus = "";
     this.#lastActiveThumb = thumb;
@@ -603,43 +585,62 @@ class ASliderElement extends HTMLElementBase {
     focusTarget.focus({ preventScroll: true });
     [this.#thumb, this.#thumbEnd][thumb].dataset.active = "";
     if (this.getAttribute("track-click") === "jump") this.#setValue(this.#valueAt(event.clientX), thumb);
+    this.#paintStates();
     event.preventDefault();
   }
   #moveDrag(event) {
     const drag = this.#drag;
     if (!drag || drag.pointerId !== event.pointerId) return;
+    if (this.#isDisabled) {
+      this.#endDrag(true);
+      return;
+    }
+    if (event.defaultPrevented) return;
+    drag.clientX = event.clientX;
+    const width = this.#railArea.getBoundingClientRect().width;
+    if (width <= 0) return;
     if (!(event.buttons & 1)) {
       this.#finishDrag(event);
       return;
     }
-    const next = this.getAttribute("track-click") === "jump" ? this.#valueAt(event.clientX) : drag.startValue + (event.clientX - drag.startX) / this.#railArea.getBoundingClientRect().width * (this.#max - this.#min);
+    const next = this.getAttribute("track-click") === "jump" ? this.#valueAt(event.clientX) : drag.startValue + (event.clientX - drag.startX) * (this.#rtl() ? -1 : 1) / width * (this.#max - this.#min);
     this.#setValue(next, drag.thumb);
     event.preventDefault();
   }
   #finishDrag(event) {
+    if (this.#drag?.pointerId === event.pointerId) this.#endDrag(true);
+  }
+  #endDrag(commit) {
     const drag = this.#drag;
-    if (!drag || drag.pointerId !== event.pointerId) return;
+    if (!drag) return;
     this.#drag = void 0;
     delete this.#control.dataset.dragging;
     delete [this.#thumb, this.#thumbEnd][drag.thumb].dataset.active;
-    if (this.#control.hasPointerCapture(event.pointerId)) this.#control.releasePointerCapture(event.pointerId);
-    if (!sameSliderValue(this.#value, drag.startPublicValue)) this.dispatchEvent(new Event("change", { bubbles: true, composed: true }));
+    if (this.#control.hasPointerCapture(drag.pointerId)) this.#control.releasePointerCapture(drag.pointerId);
+    this.#paintStates();
+    const value = drag.requested;
+    if (commit && value !== void 0 && !sameSliderValue(value, drag.startPublicValue)) this.#notify("change", value);
   }
   #handleKeydown(event) {
     const source = event.composedPath()[0];
     const range = Array.isArray(this.#value);
     const thumb = source === this.#thumb ? 0 : source === this.#thumbEnd ? 1 : void 0;
-    if ((range ? thumb === void 0 : source !== this) || this.#isDisabled || isModifiedNavigationKey(event)) return;
+    if (event.defaultPrevented || !event.composedPath().includes(this) || (range ? thumb === void 0 : source !== this) || this.#isDisabled || isModifiedNavigationKey(event)) return;
     delete this.#control.dataset.pointerFocus;
+    this.#paintStates();
     const page = Math.max(this.#step, (this.#max - this.#min) / 10);
     const current = range ? this.#physicalValues[thumb ?? 0] : this.#value;
     let next;
     switch (event.key) {
       case "ArrowRight":
+        next = current + (this.#rtl() ? -this.#step : this.#step);
+        break;
       case "ArrowUp":
         next = current + this.#step;
         break;
       case "ArrowLeft":
+        next = current + (this.#rtl() ? this.#step : -this.#step);
+        break;
       case "ArrowDown":
         next = current - this.#step;
         break;
@@ -659,7 +660,8 @@ class ASliderElement extends HTMLElementBase {
         return;
     }
     event.preventDefault();
-    if (this.#setValue(next, range ? thumb ?? 0 : 0)) this.dispatchEvent(new Event("change", { bubbles: true, composed: true }));
+    const requested = this.#setValue(next, range ? thumb ?? 0 : 0);
+    if (requested !== false) this.#notify("change", requested);
   }
 }
 function register_a_slider() {