stimeo-ui 0.14.0 → 0.16.0

data/dist/controllers/rating_controller.js

@@ -83,6 +83,16 @@ var BeforeCacheReset = class _BeforeCacheReset {
   }
 };
 
+// src/utils/field_mirror.ts
+function writeField(field, value) {
+  if (field.value === value) return false;
+  field.value = value;
+  return true;
+}
+function commitField(target) {
+  target.dispatchEvent(new Event("change", { bubbles: true }));
+}
+
 // src/utils/microtask_coalescer.ts
 var MicrotaskCoalescer = class {
   #run;
@@ -201,11 +211,14 @@ var RatingController = class extends Controller {
   #beforeCache = new BeforeCacheReset(() => this.#rewindForCache());
   #connected = false;
   #rescuedFocus = false;
+  /** The rating shown last, which the next move is measured from. */
+  #shown = 0;
   /** Reflects declarative state without announcing an initial user change. */
   connect() {
     this.#repaint.activate();
     this.#beforeCache.activate();
-    this.#apply(this.#normalize(this.valueValue), { focus: false });
+    this.#shown = this.#normalize(this.valueValue);
+    this.#apply(this.#shown, { focus: false });
     this.#connected = true;
   }
   /** Drops a queued reconciliation and hands every borrowed attribute back. */
@@ -306,29 +319,35 @@ var RatingController = class extends Controller {
     this.#commit(next, { focus: true });
   }
   /**
-   * Repaints one settled target/Value mutation batch and reports only a value
-   * this controller had to normalize.
+   * Repaints one settled target/Value mutation batch and reports a rating shown
+   * that moved from the one shown before it.
    *
    * @stimeoRenderRoot
    */
   #reconcileScale() {
-    const requested = this.valueValue;
-    const value = this.#normalize(requested);
+    const value = this.#normalize(this.valueValue);
+    const previous = this.#shown;
+    this.#shown = value;
     this.#apply(value, { focus: false });
-    if (!Object.is(value, requested)) {
-      this.dispatch("reconcile", { detail: { value } });
-    }
+    if (value !== previous) this.dispatch("reconcile", { detail: { value } });
   }
-  /** Applies one user operation and emits only when its committed value changes. */
+  /**
+   * Applies one user operation and emits only when the rating shown changes.
+   *
+   * The user's value is written into `value` before anything reports it, so a
+   * listener of the field's native `change` already reads it there, and the pass
+   * that the write starts finds nothing left to report.
+   */
   #commit(raw, { focus }) {
-    const previous = this.#normalize(this.valueValue);
+    const previous = this.#shown;
     const value = this.#normalize(raw);
-    this.#apply(value, { focus });
+    if (!Object.is(this.valueValue, value)) this.valueValue = value;
+    this.#shown = value;
+    this.#apply(value, { focus, notify: true });
     if (value !== previous) this.dispatch("change", { detail: { value } });
   }
-  /** Synchronizes value, ARIA, roving focus, form state, and the visual fill hook. */
-  #apply(value, { focus }) {
-    if (!Object.is(this.valueValue, value)) this.valueValue = value;
+  /** Synchronizes ARIA, roving focus, form state, and the visual fill hook. */
+  #apply(value, { focus, notify = false }) {
     this.symbolTargets.forEach((symbol, index) => {
       symbol.setAttribute("aria-checked", value > 0 && index + 1 === value ? "true" : "false");
     });
@@ -338,9 +357,14 @@ var RatingController = class extends Controller {
       const returning = this.#releaseReadonly();
       this.#roving.setActive(value > 0 ? value - 1 : 0, { focus: focus || returning });
     }
-    if (this.hasFieldTarget) this.fieldTarget.value = String(value);
+    this.#mirrorField(value, notify);
     this.#setFillRange(value);
   }
+  /** Mirrors `value` into the optional form field, reporting only a user's move. */
+  #mirrorField(value, notify) {
+    if (!this.hasFieldTarget) return;
+    if (writeField(this.fieldTarget, String(value)) && notify) commitField(this.fieldTarget);
+  }
   /** Marks the first `range` symbols with the consumer-owned fill hook. */
   #setFillRange(range) {
     this.symbolTargets.forEach((symbol, index) => {

data/dist/controllers/read_more_controller.js

@@ -63,10 +63,15 @@ var LayoutObserver = class {
   #resizeObserverFactory;
   #resizeObserver = null;
   #observingViewport = false;
+  #loadContainer = null;
   /** Stable bound handler so add/removeEventListener target the same reference. */
   #handleViewportResize = () => {
     this.#callback();
   };
+  /** Stable bound handler for the capture-phase `load`; see {@link observeDescendantLoads}. */
+  #handleDescendantLoad = () => {
+    this.#callback();
+  };
   constructor(callback, options = {}) {
     this.#callback = callback;
     this.#resizeObserverFactory = options.resizeObserverFactory ?? (typeof ResizeObserver === "undefined" ? null : (cb) => new ResizeObserver(cb));
@@ -102,24 +107,97 @@ var LayoutObserver = class {
     window.removeEventListener("resize", this.#handleViewportResize);
   }
   /**
-   * Releases every observation: disconnects the {@link ResizeObserver} and
-   * removes the viewport listener. Safe to call multiple times. Call this from a
-   * controller's `disconnect()`.
+   * Starts reporting a `load` from anywhere inside `container` — an image or a
+   * frame settling changes the box it sits in, and it measures as zero high until
+   * then. `load` does not bubble, so the subscription is a capture-phase listener
+   * on the container itself and nothing the caller spells.
+   *
+   * **One container at a time.** A further call moves the observation, so a widget
+   * whose content element is swapped at runtime releases the element it let go by
+   * naming the new one — there is no second place for the release to drift from.
+   */
+  observeDescendantLoads(container) {
+    this.unobserveDescendantLoads();
+    this.#loadContainer = container;
+    container.addEventListener("load", this.#handleDescendantLoad, true);
+  }
+  /** Stops reporting descendant loads without affecting element or viewport observation. */
+  unobserveDescendantLoads() {
+    this.#loadContainer?.removeEventListener("load", this.#handleDescendantLoad, true);
+    this.#loadContainer = null;
+  }
+  /**
+   * Releases every observation: disconnects the {@link ResizeObserver} and removes
+   * the viewport and descendant-load listeners. Safe to call multiple times. Call
+   * this from a controller's `disconnect()`.
    */
   disconnect() {
     this.#resizeObserver?.disconnect();
     this.#resizeObserver = null;
     this.unobserveViewport();
+    this.unobserveDescendantLoads();
+  }
+};
+
+// src/utils/state_reason.ts
+var FOCUS_EVENTS = /* @__PURE__ */ new Set(["blur", "focus", "focusin", "focusout"]);
+var POINTER_EVENTS = /* @__PURE__ */ new Set(["mouseenter", "mouseleave", "pointerenter", "pointerleave"]);
+function stateReasonFor(event) {
+  if (!event) return "api";
+  if (FOCUS_EVENTS.has(event.type)) return "focus";
+  if (POINTER_EVENTS.has(event.type)) return "pointer";
+  return "user";
+}
+
+// src/utils/state_regions.ts
+var StateRegions = class {
+  #whenTrue;
+  #whenFalse;
+  #taken = /* @__PURE__ */ new WeakSet();
+  constructor(options) {
+    this.#whenTrue = options.whenTrue;
+    this.#whenFalse = options.whenFalse ?? null;
+  }
+  /** Shows the regions inside `host` that belong to `isTrue` and hides the others. */
+  reflect(host, isTrue) {
+    const shown = this.#inside(host, this.#whenTrue());
+    if (!this.#whenFalse) {
+      for (const region of shown) this.#write(region, !isTrue);
+      return;
+    }
+    const hiddenSide = this.#inside(host, this.#whenFalse());
+    if (shown.length === 0 || hiddenSide.length === 0) {
+      for (const region of shown) this.#give(region);
+      for (const region of hiddenSide) this.#give(region);
+      return;
+    }
+    for (const region of shown) this.#write(region, !isTrue);
+    for (const region of hiddenSide) this.#write(region, isTrue);
+  }
+  /** Writes `hidden` where it moves, noting which regions it takes out of view. */
+  #write(region, hidden) {
+    if (hidden) this.#taken.add(region);
+    else this.#taken.delete(region);
+    if (region.hidden !== hidden) region.hidden = hidden;
+  }
+  /** Returns a region this instance hid; one it never hid keeps what it carries. */
+  #give(region) {
+    if (this.#taken.delete(region)) region.hidden = false;
+  }
+  /** The declared regions that sit within `host`, which may be the host itself. */
+  #inside(host, regions) {
+    return regions.filter((region) => host.contains(region));
   }
 };
 
 // src/controllers/read_more_controller.ts
 var ReadMoreController = class extends Controller {
-  static targets = ["content", "trigger"];
+  static targets = ["content", "trigger", "expandedLabel", "collapsedLabel"];
   static values = {
     collapsed: { type: Boolean, default: true }
   };
   static actions = ["toggle"];
+  static events = ["close", "open"];
   #connected = false;
   #collapsed = true;
   #observedContent = null;
@@ -128,6 +206,11 @@ var ReadMoreController = class extends Controller {
     if (this.#connected) this.#evaluateOverflow();
   };
   #layout = new LayoutObserver(this.#update);
+  /** Owns `hidden` on the trigger's two labels. */
+  #labels = new StateRegions({
+    whenTrue: () => this.expandedLabelTargets,
+    whenFalse: () => this.collapsedLabelTargets
+  });
   /** Holds the trigger's hide back while it has focus; re-evaluates on blur. */
   #deferredHide = new BlurDeferral(() => {
     this.#update();
@@ -155,12 +238,21 @@ var ReadMoreController = class extends Controller {
     this.#deferredHide.release(trigger);
     this.#syncTargets();
   }
+  expandedLabelTargetConnected() {
+    this.#syncTargets();
+  }
+  collapsedLabelTargetConnected() {
+    this.#syncTargets();
+  }
   /** Toggles between the collapsed (clamped) and expanded states. */
-  toggle() {
+  toggle(event) {
     if (!this.#connected) return;
     this.#collapsed = !this.#collapsed;
     this.#reflect();
     this.#evaluateOverflow();
+    const detail = { reason: stateReasonFor(event) };
+    if (this.#collapsed) this.dispatch("close", { detail, cancelable: false });
+    else this.dispatch("open", { detail, cancelable: false });
   }
   #initialCollapsed() {
     if (this.hasContentTarget) {
@@ -176,6 +268,7 @@ var ReadMoreController = class extends Controller {
     }
     if (this.hasTriggerTarget) {
       this.triggerTarget.setAttribute("aria-expanded", this.#collapsed ? "false" : "true");
+      this.#labels.reflect(this.triggerTarget, !this.#collapsed);
     }
   }
   #syncTargets() {
@@ -192,7 +285,7 @@ var ReadMoreController = class extends Controller {
     this.#observedContent = next;
     this.#layout.observe(next);
     this.#layout.observeViewport();
-    next.addEventListener("load", this.#update, true);
+    this.#layout.observeDescendantLoads(next);
     if (typeof MutationObserver !== "undefined") {
       this.#contentMutationObserver = new MutationObserver(this.#update);
       this.#contentMutationObserver.observe(next, {
@@ -206,7 +299,7 @@ var ReadMoreController = class extends Controller {
     this.#deferredHide.releaseAll();
     if (this.#observedContent) {
       this.#layout.unobserve(this.#observedContent);
-      this.#observedContent.removeEventListener("load", this.#update, true);
+      this.#layout.unobserveDescendantLoads();
     }
     this.#observedContent = null;
     this.#contentMutationObserver?.disconnect();

data/dist/controllers/reading_progress_controller.js

@@ -31,16 +31,51 @@ var BeforeCacheReset = class _BeforeCacheReset {
   }
 };
 
+// src/utils/frame_coalescer.ts
+var FrameCoalescer = class {
+  #frame = null;
+  /**
+   * Runs `run` on the next frame, unless a frame is already pending — the first
+   * request of a burst wins and the rest are dropped. The pending frame is
+   * released before `run`, so `run` may request the next one.
+   */
+  schedule(run) {
+    if (this.#frame !== null) return;
+    this.#frame = requestAnimationFrame(() => {
+      this.#frame = null;
+      run();
+    });
+  }
+  /**
+   * Drops the pending frame, and reaches the platform only when there is one.
+   *
+   * There is no handle value that stands for "nothing pending":
+   * `cancelAnimationFrame` takes an `unsigned long`, so a negative placeholder
+   * arrives as a large positive number that the same allocator can hand out, and
+   * an idle cancel would then drop a frame belonging to someone else.
+   */
+  cancel() {
+    if (this.#frame === null) return;
+    cancelAnimationFrame(this.#frame);
+    this.#frame = null;
+  }
+};
+
 // src/utils/layout_observer.ts
 var LayoutObserver = class {
   #callback;
   #resizeObserverFactory;
   #resizeObserver = null;
   #observingViewport = false;
+  #loadContainer = null;
   /** Stable bound handler so add/removeEventListener target the same reference. */
   #handleViewportResize = () => {
     this.#callback();
   };
+  /** Stable bound handler for the capture-phase `load`; see {@link observeDescendantLoads}. */
+  #handleDescendantLoad = () => {
+    this.#callback();
+  };
   constructor(callback, options = {}) {
     this.#callback = callback;
     this.#resizeObserverFactory = options.resizeObserverFactory ?? (typeof ResizeObserver === "undefined" ? null : (cb) => new ResizeObserver(cb));
@@ -76,14 +111,35 @@ var LayoutObserver = class {
     window.removeEventListener("resize", this.#handleViewportResize);
   }
   /**
-   * Releases every observation: disconnects the {@link ResizeObserver} and
-   * removes the viewport listener. Safe to call multiple times. Call this from a
-   * controller's `disconnect()`.
+   * Starts reporting a `load` from anywhere inside `container` — an image or a
+   * frame settling changes the box it sits in, and it measures as zero high until
+   * then. `load` does not bubble, so the subscription is a capture-phase listener
+   * on the container itself and nothing the caller spells.
+   *
+   * **One container at a time.** A further call moves the observation, so a widget
+   * whose content element is swapped at runtime releases the element it let go by
+   * naming the new one — there is no second place for the release to drift from.
+   */
+  observeDescendantLoads(container) {
+    this.unobserveDescendantLoads();
+    this.#loadContainer = container;
+    container.addEventListener("load", this.#handleDescendantLoad, true);
+  }
+  /** Stops reporting descendant loads without affecting element or viewport observation. */
+  unobserveDescendantLoads() {
+    this.#loadContainer?.removeEventListener("load", this.#handleDescendantLoad, true);
+    this.#loadContainer = null;
+  }
+  /**
+   * Releases every observation: disconnects the {@link ResizeObserver} and removes
+   * the viewport and descendant-load listeners. Safe to call multiple times. Call
+   * this from a controller's `disconnect()`.
    */
   disconnect() {
     this.#resizeObserver?.disconnect();
     this.#resizeObserver = null;
     this.unobserveViewport();
+    this.unobserveDescendantLoads();
   }
 };
 
@@ -148,18 +204,13 @@ var ReadingProgressController = class extends Controller {
   /** The article's own box and the viewport: either changes the span. */
   #layout = new LayoutObserver(() => this.#onScroll());
   #beforeCache = new BeforeCacheReset(() => this.#rewindForCache());
-  #frame = null;
+  /** Coalesces scroll bursts, and the connect baseline, into one frame. */
+  #frames = new FrameCoalescer();
   /** Last published progress, so `change`/`complete` fire only on movement. */
   #progress = -1;
   /** False until the connect frame has run: `complete` needs real reading. */
   #baselined = false;
-  #onScroll = () => {
-    if (this.#frame !== null) return;
-    this.#frame = requestAnimationFrame(() => {
-      this.#frame = null;
-      this.#measure();
-    });
-  };
+  #onScroll = () => this.#frames.schedule(() => this.#measure());
   connect() {
     this.#progress = -1;
     this.#baselined = false;
@@ -168,8 +219,7 @@ var ReadingProgressController = class extends Controller {
     this.#layout.observeViewport();
     this.#beforeCache.activate();
     this.#measure();
-    this.#frame = requestAnimationFrame(() => {
-      this.#frame = null;
+    this.#frames.schedule(() => {
       this.#measure();
       this.#baselined = true;
     });
@@ -178,7 +228,7 @@ var ReadingProgressController = class extends Controller {
     window.removeEventListener("scroll", this.#onScroll, { capture: true });
     this.#layout.disconnect();
     this.#beforeCache.deactivate();
-    this.#cancelFrame();
+    this.#frames.cancel();
     this.#lease.returnAll();
   }
   /**
@@ -189,14 +239,10 @@ var ReadingProgressController = class extends Controller {
    * value that has already been handed back.
    */
   #rewindForCache() {
-    this.#cancelFrame();
+    this.#frames.cancel();
     this.#lease.returnAll();
     this.#progress = -1;
   }
-  #cancelFrame() {
-    if (this.#frame !== null) cancelAnimationFrame(this.#frame);
-    this.#frame = null;
-  }
   /** Computes and publishes the progress; emits on movement only. */
   #measure() {
     const rect = this.element.getBoundingClientRect();

data/dist/controllers/relative_time_controller.js

@@ -60,6 +60,11 @@ function construct(factory, locale, options, fallbackLocale) {
   }
 }
 
+// src/utils/locale.ts
+function resolveLocale(element, declared = "") {
+  return declared || element.closest("[lang]")?.getAttribute("lang") || void 0;
+}
+
 // src/utils/microtask_coalescer.ts
 var MicrotaskCoalescer = class {
   #run;
@@ -265,11 +270,11 @@ var RelativeTimeController = class extends Controller {
    * when the runtime rejects that locale.
    */
   get #formatter() {
-    return intlFormatter(Intl.RelativeTimeFormat, this.#locale, RELATIVE_OPTIONS);
-  }
-  /** Locale precedence: the value, then the nearest `lang` up the ancestor chain. */
-  get #locale() {
-    return this.localeValue || this.element.closest("[lang]")?.getAttribute("lang") || void 0;
+    return intlFormatter(
+      Intl.RelativeTimeFormat,
+      resolveLocale(this.element, this.localeValue),
+      RELATIVE_OPTIONS
+    );
   }
 };
 

data/dist/controllers/resizable_controller.js

@@ -107,7 +107,20 @@ var TabindexLoan = class {
   }
 };
 
+// src/utils/transient_hooks.ts
+var TransientHooks = class {
+  #attributes;
+  constructor(options) {
+    this.#attributes = options.attributes;
+  }
+  /** Drops the declared hooks from `element`; what it carries besides stays. */
+  reset(element) {
+    for (const attribute of this.#attributes) element.removeAttribute(attribute);
+  }
+};
+
 // src/controllers/resizable_controller.ts
+var TRANSIENT = new TransientHooks({ attributes: ["data-dragging"] });
 var DEFAULT_MIN = 0;
 var DEFAULT_MAX = 100;
 var DEFAULT_VALUE = 50;
@@ -121,9 +134,20 @@ var ResizableController = class extends Controller {
     value: { type: Number, default: DEFAULT_VALUE }
   };
   static actions = ["onKeydown", "onPointerDown", "toggle"];
-  static events = ["change"];
+  static events = ["change", "reconcile"];
   /** Where the divider sat before the current collapse; `null` when unknown. */
   #valueBeforeCollapse = null;
+  /**
+   * The position last painted: moved by each move the user makes — every step of
+   * a drag included — and by each repaint that finds a page-driven move.
+   */
+  #painted = DEFAULT_VALUE;
+  /**
+   * The position last confirmed: the one connecting published, then moved by
+   * each `change` and `reconcile`. A drag moves the painted position step by
+   * step and this one only when it ends.
+   */
+  #confirmed = DEFAULT_VALUE;
   /** Aborts in-progress pointer-drag listeners when the drag ends or on teardown. */
   #dragAbort = null;
   /** `tabindex` lent to a pane so `F6` can put focus on it; panes carry none. */
@@ -133,8 +157,9 @@ var ResizableController = class extends Controller {
   /** Folds the range and position inputs of one morph batch into a single paint. */
   #repaint = new MicrotaskCoalescer(() => this.#render());
   connect() {
-    this.element.removeAttribute("data-dragging");
+    TRANSIENT.reset(this.element);
     this.#repaint.activate();
+    this.#confirmed = this.#position;
     this.#render();
     this.#cycleAbort = new AbortController();
     this.element.addEventListener("keydown", this.#onCycleKeydown, {
@@ -251,9 +276,7 @@ var ResizableController = class extends Controller {
     }
     if (handled) {
       event.preventDefault();
-      this.valueValue = Math.max(min, Math.min(nextValue, max));
-      this.#render();
-      this.#dispatchChange();
+      this.#commit(nextValue);
     }
   }
   /** Collapses the primary pane to its minimum, or returns it to the last position. */
@@ -261,22 +284,19 @@ var ResizableController = class extends Controller {
     const { min, max } = this.#range;
     if (this.#position > min) {
       this.#valueBeforeCollapse = this.#position;
-      this.valueValue = min;
+      this.#commit(min);
     } else {
-      this.valueValue = this.#valueBeforeCollapse ?? max;
+      const restored = this.#valueBeforeCollapse ?? max;
       this.#valueBeforeCollapse = null;
+      this.#commit(restored);
     }
-    this.#render();
-    this.#dispatchChange();
   }
   #onPointerMove = (event) => {
     if (!this.hasSeparatorTarget) return;
     const rect = this.element.getBoundingClientRect();
     const raw = this.#isVertical ? (event.clientX - rect.left) / rect.width : (event.clientY - rect.top) / rect.height;
     const fraction = Number.isFinite(raw) ? Math.max(0, Math.min(raw, 1)) : 0;
-    const { min, max } = this.#range;
-    this.valueValue = Math.max(min, Math.min(Math.round(fraction * 100), max));
-    this.#render();
+    this.#move(Math.round(fraction * 100));
   };
   #onPointerUp = (event) => {
     this.element.removeAttribute("data-dragging");
@@ -285,21 +305,50 @@ var ResizableController = class extends Controller {
     if (this.hasSeparatorTarget) {
       this.separatorTarget.releasePointerCapture(event.pointerId);
     }
-    this.#dispatchChange();
+    this.#confirm();
   };
+  /** Moves to a position the user chose and reports it if it moved. */
+  #commit(raw) {
+    this.#move(raw);
+    this.#confirm();
+  }
   /**
-   * Publishes the position: the fraction consumer CSS multiplies a pane by, and
-   * the range assistive tech reads off the separator. The clamped position is
-   * written back to the Value so it, ARIA, CSS, and dispatched events agree.
+   * Stores the clamped position the user moved to and paints it. The painted
+   * position moves with it before anything is reported, so the repaint the Value
+   * write schedules — and any move a subscriber makes while `change` is
+   * dispatched — is measured from this position.
+   */
+  #move(raw) {
+    const { min, max } = this.#range;
+    const position = Math.max(min, Math.min(raw, max));
+    this.valueValue = position;
+    this.#painted = position;
+    this.#paint();
+  }
+  /**
+   * Publishes the position the Values declare without writing it back. A
+   * position the user did not paint is the page's move, reported once as
+   * `reconcile` unless it lands on the position last confirmed — a drag the page
+   * puts back where it started has nothing new to report.
    *
    * @stimeoRenderRoot
    */
   #render() {
+    this.#paint();
+    const position = this.#position;
+    if (position === this.#painted) return;
+    this.#painted = position;
+    if (position === this.#confirmed) return;
+    this.#confirmed = position;
+    this.dispatch("reconcile", { detail: this.#detail(position) });
+  }
+  /**
+   * Publishes the position: the fraction consumer CSS multiplies a pane by, and
+   * the range assistive tech reads off the separator.
+   */
+  #paint() {
     const { min, max } = this.#range;
     const position = this.#position;
-    if (this.valueValue !== position) {
-      this.valueValue = position;
-    }
     this.element.style.setProperty("--stimeo--resizable-fraction", String(position / 100));
     if (this.hasSeparatorTarget) {
       this.separatorTarget.setAttribute("aria-valuenow", String(position));
@@ -307,9 +356,20 @@ var ResizableController = class extends Controller {
       this.separatorTarget.setAttribute("aria-valuemax", String(max));
     }
   }
-  #dispatchChange() {
-    const fraction = this.valueValue / 100;
-    this.dispatch("change", { detail: { value: this.valueValue, fraction } });
+  /**
+   * Reports the published position as `change` when the user's operation moved
+   * it from the position last confirmed. A key at an edge, a press released
+   * without moving and a drag released where it started report nothing.
+   */
+  #confirm() {
+    const position = this.#position;
+    if (position === this.#confirmed) return;
+    this.#confirmed = position;
+    this.dispatch("change", { detail: this.#detail(position) });
+  }
+  /** The detail both events carry for `position`. */
+  #detail(position) {
+    return { value: position, fraction: position / 100 };
   }
   /** The declared range after validation; an unreadable bound uses its default. */
   get #range() {