@decidables/discountable-elements 0.3.3 → 0.3.5

package/CHANGELOG.md

@@ -3,6 +3,22 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.3.5](https://github.com/decidables/decidables/compare/@decidables/discountable-elements@0.3.4...@decidables/discountable-elements@0.3.5) (2024-01-27)
+
+**Note:** Version bump only for package @decidables/discountable-elements
+
+
+
+
+
+## [0.3.4](https://github.com/decidables/decidables/compare/@decidables/discountable-elements@0.3.3...@decidables/discountable-elements@0.3.4) (2024-01-09)
+
+**Note:** Version bump only for package @decidables/discountable-elements
+
+
+
+
+
 ## [0.3.3](https://github.com/decidables/decidables/compare/@decidables/discountable-elements@0.3.2...@decidables/discountable-elements@0.3.3) (2023-12-31)
 
 **Note:** Version bump only for package @decidables/discountable-elements

package/lib/discountableElements.esm.js

@@ -732,7 +732,6 @@ function* numbers(values, valueof) {
 const ascendingBisect = bisector(ascending$1);
 const bisectRight = ascendingBisect.right;
 bisector(number$4).center;
-var bisect = bisectRight;
 
 function count(values, valueof) {
   let count = 0;
@@ -6049,7 +6048,6 @@ function areaPoint(x, y) {
 function areaRingEnd() {
   areaPoint(x00$2, y00$2);
 }
-var pathArea = areaStream;
 
 var x0$2 = Infinity,
   y0$2 = x0$2,
@@ -6073,7 +6071,6 @@ function boundsPoint(x, y) {
   if (y < y0$2) y0$2 = y;
   if (y > y1) y1 = y;
 }
-var boundsStream$1 = boundsStream;
 
 // TODO Enforce positive area for exterior, negative area for interior?
 
@@ -6156,7 +6153,6 @@ function centroidPointRing(x, y) {
   Z2 += z * 3;
   centroidPoint(x0$1 = x, y0$1 = y);
 }
-var pathCentroid = centroidStream;
 
 function PathContext(context) {
   this._context = context;
@@ -6239,7 +6235,6 @@ function lengthPoint(x, y) {
   lengthSum.add(sqrt$1(x0 * x0 + y0 * y0));
   x0 = x, y0 = y;
 }
-var pathMeasure = lengthStream;
 
 // Simple caching for constant-radius points.
 let cacheDigits, cacheAppend, cacheRadius, cacheCircle;
@@ -6341,20 +6336,20 @@ function geoPath (projection, context) {
     return contextStream.result();
   }
   path.area = function (object) {
-    geoStream(object, projectionStream(pathArea));
-    return pathArea.result();
+    geoStream(object, projectionStream(areaStream));
+    return areaStream.result();
   };
   path.measure = function (object) {
-    geoStream(object, projectionStream(pathMeasure));
-    return pathMeasure.result();
+    geoStream(object, projectionStream(lengthStream));
+    return lengthStream.result();
   };
   path.bounds = function (object) {
-    geoStream(object, projectionStream(boundsStream$1));
-    return boundsStream$1.result();
+    geoStream(object, projectionStream(boundsStream));
+    return boundsStream.result();
   };
   path.centroid = function (object) {
-    geoStream(object, projectionStream(pathCentroid));
-    return pathCentroid.result();
+    geoStream(object, projectionStream(centroidStream));
+    return centroidStream.result();
   };
   path.projection = function (_) {
     if (!arguments.length) return projection;
@@ -6425,8 +6420,8 @@ function fit(projection, fitBounds, object) {
   var clip = projection.clipExtent && projection.clipExtent();
   projection.scale(150).translate([0, 0]);
   if (clip != null) projection.clipExtent(null);
-  geoStream(object, projection.stream(boundsStream$1));
-  fitBounds(boundsStream$1.result());
+  geoStream(object, projection.stream(boundsStream));
+  fitBounds(boundsStream.result());
   if (clip != null) projection.clipExtent(clip);
   return projection;
 }
@@ -7298,7 +7293,7 @@ function polymap(domain, range, interpolate) {
     r[i] = interpolate(range[i], range[i + 1]);
   }
   return function (x) {
-    var i = bisect(domain, x, 1, j) - 1;
+    var i = bisectRight(domain, x, 1, j) - 1;
     return r[i](d[i](x));
   };
 }
@@ -7656,7 +7651,7 @@ function quantile() {
     return scale;
   }
   function scale(x) {
-    return x == null || isNaN(x = +x) ? unknown : range[bisect(thresholds, x)];
+    return x == null || isNaN(x = +x) ? unknown : range[bisectRight(thresholds, x)];
   }
   scale.invertExtent = function (y) {
     var i = range.indexOf(y);
@@ -7690,7 +7685,7 @@ function threshold() {
     unknown,
     n = 1;
   function scale(x) {
-    return x != null && x <= x ? range[bisect(domain, x, 0, n)] : unknown;
+    return x != null && x <= x ? range[bisectRight(domain, x, 0, n)] : unknown;
   }
   scale.domain = function (_) {
     return arguments.length ? (domain = Array.from(_), n = Math.min(domain.length, range.length - 1), scale) : domain.slice();
@@ -13616,17 +13611,19 @@ for (const [name, interval] of utcIntervals) {
   interval[intervalDuration] = durations.get(name);
   interval[intervalType] = "utc";
 }
+const utcFormatIntervals = [["year", utcYear, "utc"], ["month", utcMonth, "utc"], ["day", unixDay, "utc", 6 * durationMonth], ["hour", utcHour, "utc", 3 * durationDay], ["minute", utcMinute, "utc", 6 * durationHour], ["second", second$1, "utc", 30 * durationMinute]];
+const timeFormatIntervals = [["year", timeYear, "time"], ["month", timeMonth, "time"], ["day", timeDay, "time", 6 * durationMonth], ["hour", timeHour, "time", 3 * durationDay], ["minute", timeMinute, "time", 6 * durationHour], ["second", second$1, "time", 30 * durationMinute]];
 
 // An interleaved array of UTC and local time intervals, in descending order
 // from largest to smallest, used to determine the most specific standard time
 // format for a given array of dates. This is a subset of the tick intervals
 // listed above; we only need the breakpoints where the format changes.
-const formatIntervals = [["year", utcYear, "utc"], ["year", timeYear, "time"], ["month", utcMonth, "utc"], ["month", timeMonth, "time"], ["day", unixDay, "utc", 6 * durationMonth], ["day", timeDay, "time", 6 * durationMonth],
+const formatIntervals = [utcFormatIntervals[0], timeFormatIntervals[0], utcFormatIntervals[1], timeFormatIntervals[1], utcFormatIntervals[2], timeFormatIntervals[2],
 // Below day, local time typically has an hourly offset from UTC and hence the
 // two are aligned and indistinguishable; therefore, we only consider UTC, and
 // we don’t consider these if the domain only has a single value.
-["hour", utcHour, "utc", 3 * durationDay], ["minute", utcMinute, "utc", 6 * durationHour], ["second", second$1, "utc", 30 * durationMinute]];
-function parseInterval(input, intervals, type) {
+...utcFormatIntervals.slice(3)];
+function parseTimeInterval(input) {
   let name = `${input}`.toLowerCase();
   if (name.endsWith("s")) name = name.slice(0, -1); // drop plural
   let period = 1;
@@ -13645,22 +13642,26 @@ function parseInterval(input, intervals, type) {
       period *= 6;
       break;
   }
-  let interval = intervals.get(name);
+  let interval = utcIntervals.get(name);
   if (!interval) throw new Error(`unknown interval: ${input}`);
+  if (period > 1 && !interval.every) throw new Error(`non-periodic interval: ${name}`);
+  return [name, period];
+}
+function maybeTimeInterval(input) {
+  return asInterval(parseTimeInterval(input), "time");
+}
+function maybeUtcInterval(input) {
+  return asInterval(parseTimeInterval(input), "utc");
+}
+function asInterval([name, period], type) {
+  let interval = (type === "time" ? timeIntervals : utcIntervals).get(name);
   if (period > 1) {
-    if (!interval.every) throw new Error(`non-periodic interval: ${name}`);
     interval = interval.every(period);
     interval[intervalDuration] = durations.get(name) * period;
     interval[intervalType] = type;
   }
   return interval;
 }
-function maybeTimeInterval(interval) {
-  return parseInterval(interval, timeIntervals, "time");
-}
-function maybeUtcInterval(interval) {
-  return parseInterval(interval, utcIntervals, "utc");
-}
 
 // If the given interval is a standard time interval, we may be able to promote
 // it a larger aligned time interval, rather than showing every nth tick.
@@ -13702,17 +13703,20 @@ function getTimeTemplate(anchor) {
   return anchor === "left" || anchor === "right" ? (f1, f2) => `\n${f1}\n${f2}` // extra newline to keep f1 centered
   : anchor === "top" ? (f1, f2) => `${f2}\n${f1}` : (f1, f2) => `${f1}\n${f2}`;
 }
+function getFormatIntervals(type) {
+  return type === "time" ? timeFormatIntervals : type === "utc" ? utcFormatIntervals : formatIntervals;
+}
 
 // Given an array of dates, returns the largest compatible standard time
 // interval. If no standard interval is compatible (other than milliseconds,
 // which is universally compatible), returns undefined.
-function inferTimeFormat(dates, anchor) {
+function inferTimeFormat(type, dates, anchor) {
   const step = max(pairs(dates, (a, b) => Math.abs(b - a))); // maybe undefined!
   if (step < 1000) return formatTimeInterval("millisecond", "utc", anchor);
-  for (const [name, interval, type, maxStep] of formatIntervals) {
+  for (const [name, interval, intervalType, maxStep] of getFormatIntervals(type)) {
     if (step > maxStep) break; // e.g., 52 weeks
     if (name === "hour" && !step) break; // e.g., domain with a single date
-    if (dates.every(d => interval.floor(d) >= d)) return formatTimeInterval(name, type, anchor);
+    if (dates.every(d => interval.floor(d) >= d)) return formatTimeInterval(name, intervalType, anchor);
   }
 }
 function formatConditional(format1, format2, template) {
@@ -15634,7 +15638,9 @@ function getGeometryChannels(channel) {
   return [x, y];
 }
 
-const categoricalSchemes = new Map([["accent", schemeAccent], ["category10", schemeCategory10], ["dark2", schemeDark2], ["paired", schemePaired], ["pastel1", schemePastel1], ["pastel2", schemePastel2], ["set1", schemeSet1], ["set2", schemeSet2], ["set3", schemeSet3], ["tableau10", schemeTableau10]]);
+// TODO https://github.com/d3/d3-scale-chromatic/pull/51
+const schemeObservable10 = ["#4269d0", "#efb118", "#ff725c", "#6cc5b0", "#3ca951", "#ff8ab7", "#a463f2", "#97bbf5", "#9c6b4e", "#9498a0"];
+const categoricalSchemes = new Map([["accent", schemeAccent], ["category10", schemeCategory10], ["dark2", schemeDark2], ["observable10", schemeObservable10], ["paired", schemePaired], ["pastel1", schemePastel1], ["pastel2", schemePastel2], ["set1", schemeSet1], ["set2", schemeSet2], ["set3", schemeSet3], ["tableau10", schemeTableau10]]);
 function isCategoricalScheme(scheme) {
   return scheme != null && categoricalSchemes.has(`${scheme}`.toLowerCase());
 }
@@ -16217,7 +16223,7 @@ function createScaleOrdinal(key, channels, {
       if (range !== undefined) scheme = undefined; // Don’t re-apply scheme.
     }
     if (scheme === undefined && range === undefined) {
-      scheme = type === "ordinal" ? "turbo" : "tableau10";
+      scheme = type === "ordinal" ? "turbo" : "observable10";
     }
     if (scheme !== undefined) {
       if (range !== undefined) {
@@ -16296,8 +16302,7 @@ function inferHint(channels, key) {
   } of channels) {
     const candidate = hint?.[key];
     if (candidate === undefined) continue; // no hint here
-    if (value === undefined) value = candidate;
-    // first hint
+    if (value === undefined) value = candidate; // first hint
     else if (value !== candidate) return; // inconsistent hint
   }
   return value;
@@ -16437,6 +16442,13 @@ function inferScaleLabel(channels = [], scale) {
   };
 }
 
+// Determines whether the scale points in the “positive” (right or down) or
+// “negative” (left or up) direction; if the scale order cannot be determined,
+// returns NaN; used to assign an appropriate label arrow.
+function inferScaleOrder(scale) {
+  return Math.sign(orderof(scale.domain())) * Math.sign(orderof(scale.range()));
+}
+
 // Returns the dimensions of the outer frame; this is subdivided into facets
 // with the margins of each facet collapsing into the outer margins.
 function outerDimensions(dimensions) {
@@ -16661,6 +16673,9 @@ function createScale(key, channels = [], options = {}) {
 function formatScaleType(type) {
   return typeof type === "symbol" ? type.description : type;
 }
+function maybeScaleType(type) {
+  return typeof type === "string" ? `${type}`.toLowerCase() : type;
+}
 
 // A special type symbol when the x and y scales are replaced with a projection.
 const typeProjection = {
@@ -16674,6 +16689,8 @@ function inferScaleType(key, channels, {
   pivot,
   projection
 }) {
+  type = maybeScaleType(type);
+
   // The facet scales are always band scales; this cannot be changed.
   if (key === "fx" || key === "fy") return "band";
 
@@ -16685,9 +16702,8 @@ function inferScaleType(key, channels, {
   // If a channel dictates a scale type, make sure that it is consistent with
   // the user-specified scale type (if any) and all other channels. For example,
   // barY requires x to be a band scale and disallows any other scale type.
-  for (const {
-    type: t
-  } of channels) {
+  for (const channel of channels) {
+    const t = maybeScaleType(channel.type);
     if (t === undefined) continue;else if (type === undefined) type = t;else if (type !== t) throw new Error(`scale incompatible with channel: ${type} !== ${t}`);
   }
 
@@ -16785,6 +16801,7 @@ function coerceType(channels, {
 }, coerceValues) {
   for (const c of channels) {
     if (c.value !== undefined) {
+      if (domain === undefined) domain = c.value?.domain; // promote channel domain
       c.value = coerceValues(c.value);
     }
   }
@@ -17710,15 +17727,14 @@ function legendRamp(color, options) {
   if (tickFormat === null) tickFormat = () => null;
   const svg = create("svg", context).attr("class", `${className}-ramp`).attr("font-family", "system-ui, sans-serif").attr("font-size", 10).attr("width", width).attr("height", height).attr("viewBox", `0 0 ${width} ${height}`).call(svg =>
   // Warning: if you edit this, change defaultClassName.
-  svg.append("style").text(`.${className}-ramp {
+  svg.append("style").text(`:where(.${className}-ramp) {
   display: block;
-  background: white;
   height: auto;
   height: intrinsic;
   max-width: 100%;
   overflow: visible;
 }
-.${className}-ramp text {
+:where(.${className}-ramp text) {
   white-space: pre;
 }`)).call(applyInlineStyles, style);
   let tickAdjust = g => g.selectAll(".tick line").attr("y1", marginTop + marginBottom - height);
@@ -17820,6 +17836,12 @@ function maybeMarker(marker) {
       return markerCircleFill;
     case "circle-stroke":
       return markerCircleStroke;
+    case "tick":
+      return markerTick("auto");
+    case "tick-x":
+      return markerTick(90);
+    case "tick-y":
+      return markerTick(0);
   }
   throw new Error(`invalid marker: ${marker}`);
 }
@@ -17830,10 +17852,13 @@ function markerDot(color, context) {
   return create("svg:marker", context).attr("viewBox", "-5 -5 10 10").attr("markerWidth", 6.67).attr("markerHeight", 6.67).attr("fill", color).attr("stroke", "none").call(marker => marker.append("circle").attr("r", 2.5)).node();
 }
 function markerCircleFill(color, context) {
-  return create("svg:marker", context).attr("viewBox", "-5 -5 10 10").attr("markerWidth", 6.67).attr("markerHeight", 6.67).attr("fill", color).attr("stroke", "white").attr("stroke-width", 1.5).call(marker => marker.append("circle").attr("r", 3)).node();
+  return create("svg:marker", context).attr("viewBox", "-5 -5 10 10").attr("markerWidth", 6.67).attr("markerHeight", 6.67).attr("fill", color).attr("stroke", "var(--plot-background)").attr("stroke-width", 1.5).call(marker => marker.append("circle").attr("r", 3)).node();
 }
 function markerCircleStroke(color, context) {
-  return create("svg:marker", context).attr("viewBox", "-5 -5 10 10").attr("markerWidth", 6.67).attr("markerHeight", 6.67).attr("fill", "white").attr("stroke", color).attr("stroke-width", 1.5).call(marker => marker.append("circle").attr("r", 3)).node();
+  return create("svg:marker", context).attr("viewBox", "-5 -5 10 10").attr("markerWidth", 6.67).attr("markerHeight", 6.67).attr("fill", "var(--plot-background)").attr("stroke", color).attr("stroke-width", 1.5).call(marker => marker.append("circle").attr("r", 3)).node();
+}
+function markerTick(orient) {
+  return (color, context) => create("svg:marker", context).attr("viewBox", "-3 -3 6 6").attr("markerWidth", 6).attr("markerHeight", 6).attr("orient", orient).attr("stroke", color).call(marker => marker.append("path").attr("d", "M0,-3v6")).node();
 }
 let nextMarkerId = 0;
 function applyMarkers(path, mark, {
@@ -17939,7 +17964,7 @@ function maybeIntervalK(k, maybeInsetK, options, trivial) {
       ...options,
       [k]: undefined,
       [`${k}1`]: v1 === undefined ? kv : v1,
-      [`${k}2`]: v2 === undefined ? kv : v2
+      [`${k}2`]: v2 === undefined && !(v1 === v2 && trivial) ? kv : v2
     };
   }
   let D1, V1;
@@ -18577,7 +18602,7 @@ function defaultWidth(text, start = 0, end = text.length) {
 function monospaceWidth(text, start = 0, end = text.length) {
   let sum = 0;
   for (let i = start; i < end; i = readCharacter(text, i)) {
-    sum += isPictographic(text, i) ? 200 : 100;
+    sum += isPictographic(text, i) ? 126 : 63;
   }
   return sum;
 }
@@ -19419,7 +19444,7 @@ function inferTextChannel(scale, data, ticks, tickFormat, anchor) {
 // possible, or the default ISO format (2014-01-26). TODO We need a better way
 // to infer whether the ordinal scale is UTC or local time.
 function inferTickFormat(scale, data, ticks, tickFormat, anchor) {
-  return typeof tickFormat === "function" ? tickFormat : tickFormat === undefined && data && isTemporal(data) ? inferTimeFormat(data, anchor) ?? formatDefault : scale.tickFormat ? scale.tickFormat(typeof ticks === "number" ? ticks : null, tickFormat) : tickFormat === undefined ? formatDefault : typeof tickFormat === "string" ? (isTemporal(scale.domain()) ? utcFormat : format$1)(tickFormat) : constant(tickFormat);
+  return typeof tickFormat === "function" ? tickFormat : tickFormat === undefined && data && isTemporal(data) ? inferTimeFormat(scale.type, data, anchor) ?? formatDefault : scale.tickFormat ? scale.tickFormat(typeof ticks === "number" ? ticks : null, tickFormat) : tickFormat === undefined ? formatDefault : typeof tickFormat === "string" ? (isTemporal(scale.domain()) ? utcFormat : format$1)(tickFormat) : constant(tickFormat);
 }
 function inclusiveRange(interval, min, max) {
   return interval.range(min, interval.offset(interval.floor(max)));
@@ -19455,13 +19480,6 @@ function inferFontVariant(scale) {
   return scale.bandwidth && !scale.interval ? undefined : "tabular-nums";
 }
 
-// Determines whether the scale points in the “positive” (right or down) or
-// “negative” (left or up) direction; if the scale order cannot be determined,
-// returns NaN; used to assign an appropriate label arrow.
-function inferScaleOrder(scale) {
-  return Math.sign(orderof(scale.domain())) * Math.sign(orderof(scale.range()));
-}
-
 // Takes the scale label, and if this is not an ordinal scale and the label was
 // inferred from an associated channel, adds an orientation-appropriate arrow.
 function formatAxisLabel(k, scale, {
@@ -19553,29 +19571,29 @@ function legendItems(scale, options = {}, swatch) {
   const swatches = create("div", context).attr("class", `${className}-swatches ${className}-swatches-${columns != null ? "columns" : "wrap"}`);
   let extraStyle;
   if (columns != null) {
-    extraStyle = `.${className}-swatches-columns .${className}-swatch {
+    extraStyle = `:where(.${className}-swatches-columns .${className}-swatch) {
   display: flex;
   align-items: center;
   break-inside: avoid;
   padding-bottom: 1px;
 }
-.${className}-swatches-columns .${className}-swatch::before {
+:where(.${className}-swatches-columns .${className}-swatch::before) {
   flex-shrink: 0;
 }
-.${className}-swatches-columns .${className}-swatch-label {
+:where(.${className}-swatches-columns .${className}-swatch-label) {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }`;
     swatches.style("columns", columns).selectAll().data(scale.domain).enter().append("div").attr("class", `${className}-swatch`).call(swatch, scale, swatchWidth, swatchHeight).call(item => item.append("div").attr("class", `${className}-swatch-label`).attr("title", tickFormat).text(tickFormat));
   } else {
-    extraStyle = `.${className}-swatches-wrap {
+    extraStyle = `:where(.${className}-swatches-wrap) {
   display: flex;
   align-items: center;
   min-height: 33px;
   flex-wrap: wrap;
 }
-.${className}-swatches-wrap .${className}-swatch {
+:where(.${className}-swatches-wrap .${className}-swatch) {
   display: inline-flex;
   align-items: center;
   margin-right: 1em;
@@ -19584,12 +19602,12 @@ function legendItems(scale, options = {}, swatch) {
       return this.ownerDocument.createTextNode(tickFormat.apply(this, arguments));
     });
   }
-  return swatches.call(div => div.insert("style", "*").text(`.${className}-swatches {
+  return swatches.call(div => div.insert("style", "*").text(`:where(.${className}-swatches) {
   font-family: system-ui, sans-serif;
   font-size: 10px;
   margin-bottom: 0.5em;
 }
-.${className}-swatch > svg {
+:where(.${className}-swatch > svg) {
   margin-right: 0.5em;
   overflow: visible;
 }
@@ -19742,7 +19760,7 @@ function frame(options) {
 
 const defaults$2 = {
   ariaLabel: "tip",
-  fill: "white",
+  fill: "var(--plot-background)",
   stroke: "currentColor"
 };
 
@@ -19766,6 +19784,7 @@ class Tip extends Mark {
       y1,
       y2,
       anchor,
+      preferredAnchor = "bottom",
       monospace,
       fontFamily = monospace ? "ui-monospace, monospace" : undefined,
       fontSize,
@@ -19822,7 +19841,7 @@ class Tip extends Mark {
       } // filter: defined
     }, options, defaults$2);
     this.anchor = maybeAnchor$1(anchor, "anchor");
-    this.previousAnchor = this.anchor ?? "top-left";
+    this.preferredAnchor = maybeAnchor$1(preferredAnchor, "preferredAnchor");
     this.frameAnchor = maybeFrameAnchor(frameAnchor);
     this.textAnchor = impliedString(textAnchor, "middle");
     this.textPadding = +textPadding;
@@ -19970,8 +19989,8 @@ class Tip extends Mark {
         const [k] = cut(value, w - widthof(label), widthof, ee);
         if (k >= 0) {
           // value is truncated
-          value = value.slice(0, k).trimEnd() + ellipsis;
           title = value.trim();
+          value = value.slice(0, k).trimEnd() + ellipsis;
         }
       }
       const line = selection.append("tspan").attr("x", 0).attr("dy", `${lineHeight}em`).text("\u200b"); // zwsp for double-click
@@ -19997,16 +20016,13 @@ class Tip extends Mark {
         w = Math.round(w), h = Math.round(h); // crisp edges
         let a = anchor; // use the specified anchor, if any
         if (a === undefined) {
-          a = mark.previousAnchor; // favor the previous anchor, if it fits
           const x = px(i) + ox;
           const y = py(i) + oy;
-          const fitLeft = x + w + r * 2 < width;
-          const fitRight = x - w - r * 2 > 0;
-          const fitTop = y + h + m + r * 2 + 7 < height;
+          const fitLeft = x + w + m + r * 2 < width;
+          const fitRight = x - w - m - r * 2 > 0;
+          const fitTop = y + h + m + r * 2 < height;
           const fitBottom = y - h - m - r * 2 > 0;
-          const ax = (/-left$/.test(a) ? fitLeft || !fitRight : fitLeft && !fitRight) ? "left" : "right";
-          const ay = (/^top-/.test(a) ? fitTop || !fitBottom : fitTop && !fitBottom) ? "top" : "bottom";
-          a = mark.previousAnchor = `${ay}-${ax}`;
+          a = fitLeft && fitRight ? fitTop && fitBottom ? mark.preferredAnchor : fitBottom ? "bottom" : "top" : fitTop && fitBottom ? fitLeft ? "left" : "right" : (fitLeft || fitRight) && (fitTop || fitBottom) ? `${fitBottom ? "bottom" : "top"}-${fitLeft ? "left" : "right"}` : mark.preferredAnchor;
         }
         const path = this.firstChild; // note: assumes exactly two children!
         const text = this.lastChild; // note: assumes exactly two children!
@@ -20481,15 +20497,15 @@ function plot(options = {}) {
   } = dimensions;
   select(svg).attr("class", className).attr("fill", "currentColor").attr("font-family", "system-ui, sans-serif").attr("font-size", 10).attr("text-anchor", "middle").attr("width", width).attr("height", height).attr("viewBox", `0 0 ${width} ${height}`).attr("aria-label", ariaLabel).attr("aria-description", ariaDescription).call(svg =>
   // Warning: if you edit this, change defaultClassName.
-  svg.append("style").text(`.${className} {
+  svg.append("style").text(`:where(.${className}) {
+  --plot-background: white;
   display: block;
-  background: white;
   height: auto;
   height: intrinsic;
   max-width: 100%;
 }
-.${className} text,
-.${className} tspan {
+:where(.${className} text),
+:where(.${className} tspan) {
   white-space: pre;
 }`)).call(applyInlineStyles, style);
 
@@ -20775,11 +20791,13 @@ function inferTips(marks) {
         pointer: tipOptions
       };
       let {
-        pointer: p
+        pointer: p,
+        preferredAnchor: a
       } = tipOptions;
       p = /^x$/i.test(p) ? pointerX : /^y$/i.test(p) ? pointerY : pointer; // TODO validate?
       tipOptions = p(derive(mark, tipOptions));
       tipOptions.title = null; // prevent implicit title for primitive data
+      if (a === undefined) tipOptions.preferredAnchor = p === pointerY ? "left" : "bottom";
       const t = tip(mark.data, tipOptions);
       t.facet = mark.facet; // inherit facet settings
       t.facetAnchor = mark.facetAnchor; // inherit facet settings
@@ -21168,7 +21186,7 @@ gy,
       const BX2 = bx && setBX2([]);
       const BY1 = by && setBY1([]);
       const BY2 = by && setBY2([]);
-      const bin = bing(bx?.(data), by?.(data));
+      const bin = bing(bx, by, data);
       let i = 0;
       for (const o of outputs) o.initialize(data);
       if (sort) sort.initialize(data);
@@ -21397,13 +21415,16 @@ function thresholdAuto(values, min, max) {
 function isTimeThresholds(t) {
   return isTimeInterval(t) || isIterable(t) && isTemporal(t);
 }
-function bing(EX, EY) {
+function bing(bx, by, data) {
+  const EX = bx?.(data);
+  const EY = by?.(data);
   return EX && EY ? function* (I) {
     const X = EX.bin(I); // first bin on x
     for (const [ix, [x1, x2]] of EX.entries()) {
       const Y = EY.bin(X[ix]); // then bin on y
       for (const [iy, [y1, y2]] of EY.entries()) {
         yield [Y[iy], {
+          data,
           x1,
           y1,
           x2,
@@ -21415,6 +21436,7 @@ function bing(EX, EY) {
     const X = EX.bin(I);
     for (const [i, [x1, x2]] of EX.entries()) {
       yield [X[i], {
+        data,
         x1,
         x2
       }];
@@ -21423,6 +21445,7 @@ function bing(EX, EY) {
     const Y = EY.bin(I);
     for (const [i, [y1, y2]] of EY.entries()) {
       yield [Y[i], {
+        data,
         y1,
         y2
       }];
@@ -21435,7 +21458,7 @@ function bin1(E, T, V) {
   T = coerceNumbers(T); // for faster bisection
   return I => {
     const B = E.map(() => []);
-    for (const i of I) B[bisect(T, V[i]) - 1]?.push(i); // TODO quantization?
+    for (const i of I) B[bisectRight(T, V[i]) - 1]?.push(i); // TODO quantization?
     return B;
   };
 }
@@ -21984,11 +22007,13 @@ class Rect extends Mark {
       x1: {
         value: x1,
         scale: "x",
+        type: x1 != null && x2 == null ? "band" : undefined,
         optional: true
       },
       y1: {
         value: y1,
         scale: "y",
+        type: y1 != null && y2 == null ? "band" : undefined,
         optional: true
       },
       x2: {
@@ -22039,10 +22064,9 @@ class Rect extends Mark {
       rx,
       ry
     } = this;
-    return create("svg:g", context).call(applyIndirectStyles, this, dimensions, context).call(applyTransform, this, {
-      x: X1 && X2 && x,
-      y: Y1 && Y2 && y
-    }, 0, 0).call(g => g.selectAll().data(index).enter().append("rect").call(applyDirectStyles, this).attr("x", X1 && X2 && (projection || !isCollapsed(x)) ? i => Math.min(X1[i], X2[i]) + insetLeft : marginLeft + insetLeft).attr("y", Y1 && Y2 && (projection || !isCollapsed(y)) ? i => Math.min(Y1[i], Y2[i]) + insetTop : marginTop + insetTop).attr("width", X1 && X2 && (projection || !isCollapsed(x)) ? i => Math.max(0, Math.abs(X2[i] - X1[i]) - insetLeft - insetRight) : width - marginRight - marginLeft - insetRight - insetLeft).attr("height", Y1 && Y2 && (projection || !isCollapsed(y)) ? i => Math.max(0, Math.abs(Y1[i] - Y2[i]) - insetTop - insetBottom) : height - marginTop - marginBottom - insetTop - insetBottom).call(applyAttr, "rx", rx).call(applyAttr, "ry", ry).call(applyChannelStyles, this, channels)).node();
+    const bx = (x?.bandwidth ? x.bandwidth() : 0) - insetLeft - insetRight;
+    const by = (y?.bandwidth ? y.bandwidth() : 0) - insetTop - insetBottom;
+    return create("svg:g", context).call(applyIndirectStyles, this, dimensions, context).call(applyTransform, this, {}, 0, 0).call(g => g.selectAll().data(index).enter().append("rect").call(applyDirectStyles, this).attr("x", X1 && (projection || !isCollapsed(x)) ? X2 ? i => Math.min(X1[i], X2[i]) + insetLeft : i => X1[i] + insetLeft : marginLeft + insetLeft).attr("y", Y1 && (projection || !isCollapsed(y)) ? Y2 ? i => Math.min(Y1[i], Y2[i]) + insetTop : i => Y1[i] + insetTop : marginTop + insetTop).attr("width", X1 && (projection || !isCollapsed(x)) ? X2 ? i => Math.max(0, Math.abs(X2[i] - X1[i]) + bx) : bx : width - marginRight - marginLeft - insetRight - insetLeft).attr("height", Y1 && (projection || !isCollapsed(y)) ? Y2 ? i => Math.max(0, Math.abs(Y1[i] - Y2[i]) + by) : by : height - marginTop - marginBottom - insetTop - insetBottom).call(applyAttr, "rx", rx).call(applyAttr, "ry", ry).call(applyChannelStyles, this, channels)).node();
   }
 }
 function rectY(data, options = {}) {