stimeo-ui 0.3.0 → 0.4.0

data/dist/controllers/frame_loading_controller.js

@@ -2,6 +2,145 @@ import { Controller } from '@hotwired/stimulus';
 
 // src/controllers/frame_loading_controller.ts
 
+// src/utils/announce.ts
+function announce(message, options = {}) {
+  const text = message.trim();
+  if (text.length === 0) return;
+  window.dispatchEvent(
+    new CustomEvent("stimeo--announcer:announce", {
+      detail: { message: text, assertive: options.assertive === true }
+    })
+  );
+}
+function fillTemplate(template, values) {
+  return template.replace(/\{([a-zA-Z][a-zA-Z0-9]*)\}/g, (match, name) => {
+    const replacement = values[name];
+    return replacement === void 0 ? match : String(replacement);
+  });
+}
+
+// src/utils/before_cache_reset.ts
+var BeforeCacheReset = class _BeforeCacheReset {
+  /** Every subscribed instance, iterated by the one shared document listener. */
+  static #subscribers = /* @__PURE__ */ new Set();
+  /** The shared listener; installed while at least one instance is subscribed. */
+  static #onBeforeCache = () => {
+    for (const subscriber of _BeforeCacheReset.#subscribers) subscriber.#rewind();
+  };
+  #rewind;
+  /** @param rewind - the pass that returns this controller's state to its initial form. */
+  constructor(rewind) {
+    this.#rewind = rewind;
+  }
+  /** Subscribes to `turbo:before-cache`; call from `connect()`. Idempotent. */
+  activate() {
+    const first = _BeforeCacheReset.#subscribers.size === 0;
+    _BeforeCacheReset.#subscribers.add(this);
+    if (first) {
+      document.addEventListener("turbo:before-cache", _BeforeCacheReset.#onBeforeCache);
+    }
+  }
+  /** Unsubscribes; call from `disconnect()`. Safe when never subscribed. */
+  deactivate() {
+    _BeforeCacheReset.#subscribers.delete(this);
+    if (_BeforeCacheReset.#subscribers.size > 0) return;
+    document.removeEventListener("turbo:before-cache", _BeforeCacheReset.#onBeforeCache);
+  }
+};
+
+// src/utils/detach_gate.ts
+var DetachGate = class _DetachGate {
+  /** Set while a probe is queued, waiting for a reconnect to cancel it. */
+  #pending = false;
+  /**
+   * True when the disconnect is definitely a real detach — the element left
+   * the document, or `data-controller` no longer lists the identifier. False
+   * means ambiguous (in-page move or observed-root exit), NOT "alive".
+   */
+  static isDetached(host) {
+    if (!host.element.isConnected) return true;
+    const tokens = (host.element.getAttribute("data-controller") ?? "").split(/\s+/);
+    return !tokens.includes(host.identifier);
+  }
+  /**
+   * Call from `disconnect()`: runs `teardown` synchronously on a definite
+   * detach (fast path), otherwise defers it one microtask — a reconnect
+   * ({@link cancel} from `connect()`) keeps the state, no reconnect runs it.
+   * One microtask is the whole probe window: Stimulus reconnects a moved
+   * element within the same mutation batch, before the checkpoint drains.
+   */
+  disconnected(host, teardown) {
+    if (_DetachGate.isDetached(host)) {
+      this.#pending = false;
+      teardown();
+      return;
+    }
+    this.#pending = true;
+    queueMicrotask(() => {
+      if (!this.#pending) return;
+      this.#pending = false;
+      teardown();
+    });
+  }
+  /**
+   * Disarms a pending probe. Call from `connect()` (the reconnect that proves
+   * an in-page move) and from the head of any teardown path not routed through
+   * {@link disconnected} (disabled-toggle, Escape), so an orphaned probe can
+   * never run the teardown a second time.
+   */
+  cancel() {
+    this.#pending = false;
+  }
+};
+
+// src/utils/min_duration_floor.ts
+var MinDurationFloor = class {
+  #timers;
+  /** Pending finish timer id, or `null` when nothing is held back. */
+  #timerId = null;
+  /** Epoch ms the floor is measured from. */
+  #since = 0;
+  /** @param timers - the controller's registry; the floor schedules into it. */
+  constructor(timers) {
+    this.#timers = timers;
+  }
+  /** Starts the floor: call when the state being held becomes visible. */
+  begin() {
+    this.#since = Date.now();
+  }
+  /** True while a finish is held back waiting for the floor to elapse. */
+  get pending() {
+    return this.#timerId !== null;
+  }
+  /**
+   * Runs `finish` once the floor has elapsed, immediately when it already has.
+   *
+   * A held-back finish is **replaced**, never stacked: only the most recently
+   * queued id is cancellable, so a second timer would outlive every cancel and
+   * end a state that has since restarted. Controllers that want the first signal
+   * to win guard on {@link pending} before calling.
+   */
+  schedule(minDuration, finish) {
+    this.cancel();
+    const remaining = minDuration - (Date.now() - this.#since);
+    if (remaining > 0) {
+      this.#timerId = this.#timers.set(() => {
+        this.#timerId = null;
+        finish();
+      }, remaining);
+    } else {
+      finish();
+    }
+  }
+  /** Drops a held-back finish. Safe when none is queued, or after a bulk clear. */
+  cancel() {
+    if (this.#timerId !== null) {
+      this.#timers.clear(this.#timerId);
+      this.#timerId = null;
+    }
+  }
+};
+
 // src/utils/safe_timeout.ts
 var TimerRegistry = class {
   /** Live timer ids that have not yet been cleared (or, for timeouts, fired). */
@@ -59,32 +198,32 @@ var SafeTimeout = class extends TimerRegistry {
 var FrameLoadingController = class extends Controller {
   static targets = ["content", "skeleton", "overlay"];
   static values = {
+    announceText: { type: String, default: "" },
+    announceReadyText: { type: String, default: "" },
     minDuration: { type: Number, default: 0 },
     restoreFocus: { type: Boolean, default: true }
   };
   static events = ["start", "end"];
   #timeouts = new SafeTimeout();
+  #floor = new MinDurationFloor(this.#timeouts);
+  #gate = new DetachGate();
+  #beforeCache = new BeforeCacheReset(() => this.#rewindForCache());
   #loading = false;
-  #startedAt = 0;
   #inertApplied = false;
   #previousFocus = null;
   /** The id of the retreated element, used to re-find it if the load replaced it. */
   #previousFocusId = "";
   #onStart = () => {
-    this.#timeouts.clearAll();
+    this.#floor.cancel();
     if (!this.#loading) this.#begin();
   };
   #onEnd = () => {
     if (!this.#loading) return;
-    const remaining = this.minDurationValue - (Date.now() - this.#startedAt);
-    if (remaining > 0) {
-      this.#timeouts.clearAll();
-      this.#timeouts.set(() => this.#finish(), remaining);
-    } else {
-      this.#finish();
-    }
+    this.#floor.schedule(this.minDurationValue, () => this.#finish());
   };
   connect() {
+    this.#gate.cancel();
+    this.#beforeCache.activate();
     this.element.addEventListener("turbo:before-fetch-request", this.#onStart);
     this.element.addEventListener("turbo:frame-load", this.#onEnd);
     this.element.addEventListener("turbo:fetch-request-error", this.#onEnd);
@@ -93,19 +232,40 @@ var FrameLoadingController = class extends Controller {
     this.element.removeEventListener("turbo:before-fetch-request", this.#onStart);
     this.element.removeEventListener("turbo:frame-load", this.#onEnd);
     this.element.removeEventListener("turbo:fetch-request-error", this.#onEnd);
+    this.#beforeCache.deactivate();
+    this.#gate.disconnected(this, () => this.#teardown());
+  }
+  /**
+   * Drops the held finish and the loading bookkeeping on a real detach. The markup
+   * keeps whatever it last held: the page being cached is rewound at
+   * `turbo:before-cache` instead, where the frame is still whole.
+   */
+  #teardown() {
+    this.#gate.cancel();
     this.#timeouts.clearAll();
-    if (this.#loading) {
-      this.element.removeAttribute("aria-busy");
-      this.element.removeAttribute("data-frame-loading");
-      this.#clearInert();
-    }
+    this.#floor.cancel();
     this.#loading = false;
     this.#previousFocus = null;
   }
+  /**
+   * Returns the frame to its resting hooks for the snapshot Turbo is about to
+   * take, so a page reached with the Back button does not restore a frame that is
+   * busy and inert with nothing left to finish it. State only — no `end` event and
+   * no focus move, because the load did not actually complete. The live page keeps
+   * its held finish, so a navigation that never completes still ends properly.
+   */
+  #rewindForCache() {
+    if (!this.#loading) return;
+    this.element.removeAttribute("aria-busy");
+    this.element.removeAttribute("data-frame-loading");
+    if (this.hasSkeletonTarget) this.skeletonTarget.hidden = true;
+    if (this.hasOverlayTarget) this.overlayTarget.hidden = true;
+    this.#clearInert();
+  }
   /** Enters the loading state: hooks, skeleton/overlay, inert content, focus retreat. */
   #begin() {
     this.#loading = true;
-    this.#startedAt = Date.now();
+    this.#floor.begin();
     this.element.setAttribute("aria-busy", "true");
     this.element.setAttribute("data-frame-loading", "true");
     if (this.hasSkeletonTarget) this.skeletonTarget.hidden = false;
@@ -113,6 +273,7 @@ var FrameLoadingController = class extends Controller {
     this.#applyInert();
     this.#retreatFocus();
     this.dispatch("start", { detail: {} });
+    announce(fillTemplate(this.announceTextValue, {}));
   }
   /** Leaves the loading state: restore hooks, hide skeleton/overlay, restore focus. */
   #finish() {
@@ -124,6 +285,7 @@ var FrameLoadingController = class extends Controller {
     this.#clearInert();
     this.#restoreFocus();
     this.dispatch("end", { detail: {} });
+    announce(fillTemplate(this.announceReadyTextValue, {}));
   }
   /** Marks the content inert to block double-submits while stale (if we own it). */
   #applyInert() {

data/dist/controllers/local_time_controller.js

@@ -1,5 +1,40 @@
 import { Controller } from '@hotwired/stimulus';
 
+// src/controllers/local_time_controller.ts
+
+// src/utils/microtask_coalescer.ts
+var MicrotaskCoalescer = class {
+  #run;
+  #queued = false;
+  #active = false;
+  #generation = 0;
+  /** @param run - the single reconciliation pass, invoked at most once per batch. */
+  constructor(run) {
+    this.#run = run;
+  }
+  /** Opens the window in which {@link schedule} is honoured; call from `connect()`. */
+  activate() {
+    this.#active = true;
+  }
+  /** Closes the window and drops any pending pass; call from `disconnect()`. */
+  cancel() {
+    this.#active = false;
+    this.#queued = false;
+    this.#generation += 1;
+  }
+  /** Requests one pass after the batch settles. Idempotent; inert outside the window. */
+  schedule() {
+    if (!this.#active || this.#queued) return;
+    this.#queued = true;
+    const generation = this.#generation;
+    queueMicrotask(() => {
+      if (generation !== this.#generation || !this.#queued || !this.#active) return;
+      this.#queued = false;
+      this.#run();
+    });
+  }
+};
+
 // src/controllers/local_time_controller.ts
 var STYLES = /* @__PURE__ */ new Set(["full", "long", "medium", "short"]);
 function toStyle(value) {
@@ -14,7 +49,53 @@ var LocalTimeController = class extends Controller {
     titleFormat: { type: String, default: "" }
   };
   static events = ["format"];
+  /** Collapses a morph that swaps several render inputs at once into one repaint. */
+  #resync = new MicrotaskCoalescer(() => this.#render());
+  /**
+   * Watches the one render input that is not a Value. Only `datetime` is filtered
+   * in, so the text and `title` this controller writes cannot re-enter the pass.
+   */
+  #datetimeWatch = new MutationObserver(() => {
+    this.#resync.schedule();
+  });
   connect() {
+    this.#resync.activate();
+    this.#datetimeWatch.observe(this.element, { attributeFilter: ["datetime"] });
+    this.#render();
+  }
+  disconnect() {
+    this.#resync.cancel();
+    this.#datetimeWatch.disconnect();
+  }
+  /** Repaints when application code (or a Turbo morph) changes `locale` at runtime. */
+  localeValueChanged() {
+    this.#resync.schedule();
+  }
+  /** Repaints when application code (or a Turbo morph) changes `timeZone` at runtime. */
+  timeZoneValueChanged() {
+    this.#resync.schedule();
+  }
+  /** Repaints when application code (or a Turbo morph) changes `dateStyle` at runtime. */
+  dateStyleValueChanged() {
+    this.#resync.schedule();
+  }
+  /** Repaints when application code (or a Turbo morph) changes `timeStyle` at runtime. */
+  timeStyleValueChanged() {
+    this.#resync.schedule();
+  }
+  /** Repaints when application code (or a Turbo morph) changes `titleFormat` at runtime. */
+  titleFormatValueChanged() {
+    this.#resync.schedule();
+  }
+  /**
+   * Formats the instant in `datetime` against the current Values and writes it out.
+   *
+   * The `format` event rides with every pass, including a repaint a morph triggers:
+   * its condition is that formatting was applied, and a repaint applies it with a
+   * new result. A pass that cannot format writes nothing and emits nothing, so the
+   * authored absolute text stays as the fallback.
+   */
+  #render() {
     const date = this.#parse();
     if (date === null) return;
     const formatted = this.#applyFormat(date, this.dateStyleValue, this.timeStyleValue);
@@ -24,7 +105,10 @@ var LocalTimeController = class extends Controller {
     if (title !== null) this.element.setAttribute("title", title);
     this.dispatch("format", { detail: { formatted } });
   }
-  /** Parses the UTC `datetime` attribute into a {@link Date}, or `null`. */
+  /**
+   * Parses the UTC `datetime` attribute into a {@link Date}, or `null`. Whitespace
+   * around the attribute value is tolerated.
+   */
   #parse() {
     const raw = this.element.getAttribute("datetime");
     if (!raw) return null;
@@ -37,11 +121,21 @@ var LocalTimeController = class extends Controller {
    * the *runtime's* local zone, contradicting "the server emits UTC". Values that
    * already carry `Z` or a `±hh:mm` offset (and bare `YYYY-MM-DD` dates, already
    * parsed as UTC) are returned unchanged.
+   *
+   * HTML accepts a space where ISO 8601 wants `T`, and `Date.parse` of that form is
+   * left to each engine, so a whole value shaped that way is normalized to the `T`
+   * separator first. The pattern is anchored: a value trailing anything else — a
+   * zone word such as `"2026-06-08 12:30:00 UTC"` — is handed to `Date.parse` as
+   * authored instead of being turned into a string nothing can parse.
    */
   #asUtc(value) {
-    const hasTime = /T\d{2}:\d{2}/.test(value);
-    const hasZone = /(Z|[+-]\d{2}:?\d{2})$/.test(value);
-    return hasTime && !hasZone ? `${value}Z` : value;
+    const isoLike = value.replace(
+      /^(\d{4}-\d{2}-\d{2}) (\d{2}:\d{2}(?::\d{2}(?:\.\d+)?)?(?:Z|[+-]\d{2}:?\d{2})?)$/,
+      "$1T$2"
+    );
+    const hasTime = /T\d{2}:\d{2}/.test(isoLike);
+    const hasZone = /(Z|[+-]\d{2}:?\d{2})$/.test(isoLike);
+    return hasTime && !hasZone ? `${isoLike}Z` : isoLike;
   }
   /**
    * Builds the optional detailed `title`. `titleFormat` is an `Intl` style
@@ -70,9 +164,9 @@ var LocalTimeController = class extends Controller {
       return null;
     }
   }
-  /** Locale precedence: the value, then the element's `lang`, then the document's. */
+  /** Locale precedence: the value, then the nearest `lang` up the ancestor chain. */
   get #locale() {
-    return this.localeValue || this.element.lang || document.documentElement.lang || void 0;
+    return this.localeValue || this.element.closest("[lang]")?.getAttribute("lang") || void 0;
   }
 };
 

data/dist/controllers/meter_controller.js

@@ -2,6 +2,23 @@ import { Controller } from '@hotwired/stimulus';
 
 // src/controllers/meter_controller.ts
 
+// src/utils/announce.ts
+function announce(message, options = {}) {
+  const text = message.trim();
+  if (text.length === 0) return;
+  window.dispatchEvent(
+    new CustomEvent("stimeo--announcer:announce", {
+      detail: { message: text, assertive: options.assertive === true }
+    })
+  );
+}
+function fillTemplate(template, values) {
+  return template.replace(/\{([a-zA-Z][a-zA-Z0-9]*)\}/g, (match, name) => {
+    const replacement = values[name];
+    return replacement === void 0 ? match : String(replacement);
+  });
+}
+
 // src/utils/coerce.ts
 function toFiniteNumber(raw) {
   if (raw === null || raw === void 0 || raw === "") return null;
@@ -9,10 +26,61 @@ function toFiniteNumber(raw) {
   return Number.isFinite(value) ? value : null;
 }
 
+// src/utils/microtask_coalescer.ts
+var MicrotaskCoalescer = class {
+  #run;
+  #queued = false;
+  #active = false;
+  #generation = 0;
+  /** @param run - the single reconciliation pass, invoked at most once per batch. */
+  constructor(run) {
+    this.#run = run;
+  }
+  /** Opens the window in which {@link schedule} is honoured; call from `connect()`. */
+  activate() {
+    this.#active = true;
+  }
+  /** Closes the window and drops any pending pass; call from `disconnect()`. */
+  cancel() {
+    this.#active = false;
+    this.#queued = false;
+    this.#generation += 1;
+  }
+  /** Requests one pass after the batch settles. Idempotent; inert outside the window. */
+  schedule() {
+    if (!this.#active || this.#queued) return;
+    this.#queued = true;
+    const generation = this.#generation;
+    queueMicrotask(() => {
+      if (generation !== this.#generation || !this.#queued || !this.#active) return;
+      this.#queued = false;
+      this.#run();
+    });
+  }
+};
+
+// src/utils/range.ts
+function rangeFraction(value, min, max) {
+  const span = max - min;
+  if (!(span > 0)) return 0;
+  const clamped = Math.min(max, Math.max(min, value));
+  let fraction;
+  if (Number.isFinite(span)) {
+    fraction = (clamped - min) / span;
+  } else {
+    const scale = Math.max(Math.abs(min), Math.abs(max));
+    fraction = (clamped / scale - min / scale) / (max / scale - min / scale);
+  }
+  if (!Number.isFinite(fraction)) return 0;
+  return Math.min(1, Math.max(0, fraction));
+}
+
 // src/controllers/meter_controller.ts
+var OWNED_VALUE_TEXT = "data-stimeo--meter-owns-valuetext";
 var MeterController = class extends Controller {
   static targets = ["bar"];
   static values = {
+    announceText: { type: String, default: "" },
     value: { type: Number, default: 0 },
     min: { type: Number, default: 0 },
     max: { type: Number, default: 100 },
@@ -23,9 +91,24 @@ var MeterController = class extends Controller {
   };
   static actions = ["setValue"];
   static events = ["change"];
+  /**
+   * Collapses a morph that swaps several render inputs at once into one repaint.
+   * A single update usually rewrites the whole set, and each Value would otherwise
+   * repaint on its own.
+   */
+  #repaint = new MicrotaskCoalescer(() => {
+    this.#render();
+  });
+  /** The segment last announced, so only a change is read out. */
+  #announcedState = null;
   connect() {
+    this.#repaint.activate();
     this.#render();
   }
+  /** Closes the window in which a queued repaint may still run. */
+  disconnect() {
+    this.#repaint.cancel();
+  }
   /**
    * Updates the measured value from an action param (`amount`) or a
    * `detail.value` CustomEvent, syncs ARIA and `data-state`, and dispatches
@@ -35,59 +118,95 @@ var MeterController = class extends Controller {
     const next = toFiniteNumber(event.params?.amount ?? event.detail?.value);
     if (next === null) return;
     this.valueValue = this.#clamp(next);
-    this.#render();
-    this.dispatch("change", {
-      detail: { value: this.valueValue, ratio: this.#ratio, state: this.#state }
-    });
+    const reading = this.#render();
+    this.dispatch("change", { detail: reading });
+    if (reading.state !== this.#announcedState) {
+      this.#announcedState = reading.state;
+      announce(
+        fillTemplate(this.announceTextValue, { state: reading.state, value: reading.value })
+      );
+    }
+  }
+  /** Repaints when application code (or a Turbo morph) changes `value` at runtime. */
+  valueValueChanged() {
+    this.#repaint.schedule();
+  }
+  /** Repaints when application code (or a Turbo morph) changes `min` at runtime. */
+  minValueChanged() {
+    this.#repaint.schedule();
+  }
+  /** Repaints when application code (or a Turbo morph) changes `max` at runtime. */
+  maxValueChanged() {
+    this.#repaint.schedule();
+  }
+  /** Repaints when application code (or a Turbo morph) changes `low` at runtime. */
+  lowValueChanged() {
+    this.#repaint.schedule();
+  }
+  /** Repaints when application code (or a Turbo morph) changes `high` at runtime. */
+  highValueChanged() {
+    this.#repaint.schedule();
+  }
+  /** Repaints when application code (or a Turbo morph) changes `valueText` at runtime. */
+  valueTextValueChanged() {
+    this.#repaint.schedule();
   }
   /** Clamps `raw` into the configured `[min, max]` range. */
   #clamp(raw) {
     return Math.min(this.maxValue, Math.max(this.minValue, raw));
   }
-  /** Current fraction of the range in `[0, 1]`; `0` when the range is empty. */
-  get #ratio() {
-    const span = this.maxValue - this.minValue;
-    if (span <= 0) return 0;
-    return (this.#clamp(this.valueValue) - this.minValue) / span;
-  }
   /** Whether a threshold attribute is present (absent = no threshold). */
   #hasThreshold(name) {
     return this.element.hasAttribute(`data-stimeo--meter-${name}-value`);
   }
   /**
-   * Classifies the value into a `low`/`medium`/`high` segment. Values at or
-   * below `low` are `low`; at or above `high` are `high`; otherwise `medium`.
-   * With neither threshold present, everything is `medium`.
+   * Classifies `value` into a `low`/`medium`/`high` segment. Values at or below
+   * `low` are `low`; at or above `high` are `high`; otherwise `medium`. With
+   * neither threshold present, everything is `medium`.
    */
-  get #state() {
-    const value = this.#clamp(this.valueValue);
+  #stateOf(value) {
     if (this.#hasThreshold("low") && value <= this.lowValue) return "low";
     if (this.#hasThreshold("high") && value >= this.highValue) return "high";
     return "medium";
   }
-  /** Reflects value/range onto ARIA, the segment onto `data-state`, and the ratio. */
+  /**
+   * Reflects value/range onto ARIA, the segment onto `data-state`, and the ratio.
+   * The reading is derived once and returned, so the `change` detail reports the
+   * same numbers the DOM just received.
+   */
   #render() {
     const value = this.#clamp(this.valueValue);
+    const reading = {
+      value,
+      ratio: rangeFraction(value, this.minValue, this.maxValue),
+      state: this.#stateOf(value)
+    };
     this.element.setAttribute("aria-valuemin", String(this.minValue));
     this.element.setAttribute("aria-valuemax", String(this.maxValue));
-    this.element.setAttribute("aria-valuenow", String(value));
-    this.element.style.setProperty("--stimeo-meter-ratio", String(this.#ratio));
-    this.element.setAttribute("data-state", this.#state);
-    this.#applyValueText(value);
+    this.element.setAttribute("aria-valuenow", String(reading.value));
+    this.element.style.setProperty("--stimeo-meter-ratio", String(reading.ratio));
+    this.element.setAttribute("data-state", reading.state);
+    this.#applyValueText(reading);
+    return reading;
   }
   /**
    * Sets `aria-valuetext` from the consumer-provided template, substituting
-   * `{value}`, `{percent}`, and `{state}`. Kept i18n-neutral in the library;
-   * cleared when no template is given.
+   * `{value}`, `{percent}`, and `{state}`. Kept i18n-neutral in the library.
+   * With no template the attribute belongs to the consumer, so only a text this
+   * controller wrote is taken back ({@link OWNED_VALUE_TEXT}).
    */
-  #applyValueText(value) {
+  #applyValueText({ value, ratio, state }) {
     if (this.valueTextValue.length === 0) {
-      this.element.removeAttribute("aria-valuetext");
+      if (this.element.hasAttribute(OWNED_VALUE_TEXT)) {
+        this.element.removeAttribute("aria-valuetext");
+        this.element.removeAttribute(OWNED_VALUE_TEXT);
+      }
       return;
     }
-    const percent = Math.round(this.#ratio * 100);
-    const text = this.valueTextValue.replaceAll("{value}", String(value)).replaceAll("{percent}", String(percent)).replaceAll("{state}", this.#state);
+    const percent = Math.round(ratio * 100);
+    const text = this.valueTextValue.replaceAll("{value}", String(value)).replaceAll("{percent}", String(percent)).replaceAll("{state}", state);
     this.element.setAttribute("aria-valuetext", text);
+    this.element.setAttribute(OWNED_VALUE_TEXT, "");
   }
 };