ggaction 0.0.13 → 0.0.16

package/src/materialization/rect.js

@@ -3,10 +3,12 @@ import {
   readScaleField
 } from "../grammar/scales/index.js";
 import { normalizePositionDatum } from "../grammar/positionDatum.js";
-import { resolveGraphicBounds } from "../layout/canvas.js";
+import { resolveCoordinateBounds } from "./coordinateBounds.js";
 import { RECT_MODES, resolveRectMode, rectUsesFields } from "../grammar/rects.js";
 import { DEFAULT_RECT_MARK } from "./rectConfig.js";
 import { mapScaleConsumerValues } from "./scales/map.js";
+import { materializeRectItem } from "../grammar/roundedRect.js";
+import { requestedStrokeDetails } from "../grammar/strokeStyle.js";
 
 function optionalValues(rows, encoding, length, channel) {
   if (Object.hasOwn(encoding, "datum")) {
@@ -22,7 +24,11 @@ function requiredChannels(layer, mode) {
   const position = mode === RECT_MODES.xSpan ? ["x", "x2"]
     : mode === RECT_MODES.ySpan ? ["y", "y2"]
     : mode === RECT_MODES.ranged ? ["x", "x2", "y", "y2"] : ["x", "y"];
-  return [...position, ...(layer.encoding?.color ? ["color"] : [])];
+  return [
+    ...position,
+    ...(layer.encoding?.color ? ["color"] : []),
+    ...(layer.encoding?.stroke ? ["stroke"] : [])
+  ];
 }
 
 export function resolveRectConsumerValues(layer, dataset, channel) {
@@ -64,19 +70,22 @@ function mappedEncoding(program, layer, dataset, channel) {
   };
 }
 
-function appearance(config, fill) {
+function appearance(config, fill, stroke) {
   return {
     fill,
     opacity: config.opacity,
-    stroke: config.stroke === false ? "transparent" : config.stroke,
-    strokeWidth: config.stroke === false ? 0 : config.strokeWidth
+    stroke: stroke ?? (config.stroke === false ? "transparent" : config.stroke),
+    strokeWidth: stroke === undefined && config.stroke === false
+      ? 0
+      : config.strokeWidth ?? 1,
+    ...requestedStrokeDetails(config, "Rect mark")
   };
 }
 
 export function resolveRectRows(program, layer, dataset) {
   const mode = resolveRectMode(layer);
   if (mode === undefined) return [];
-  const bounds = resolveGraphicBounds(program);
+  const bounds = resolveCoordinateBounds(program, layer.coordinate);
   const x = layer.encoding.x === undefined ? undefined : mappedEncoding(program, layer, dataset, "x");
   const y = layer.encoding.y === undefined ? undefined : mappedEncoding(program, layer, dataset, "y");
   const x2 = layer.encoding.x2 === undefined ? undefined : mappedEncoding(program, layer, dataset, "x2");
@@ -84,6 +93,9 @@ export function resolveRectRows(program, layer, dataset) {
   const color = layer.encoding?.color === undefined
     ? undefined
     : mappedEncoding(program, layer, dataset, "color").values;
+  const stroke = layer.encoding?.stroke === undefined
+    ? undefined
+    : mappedEncoding(program, layer, dataset, "stroke").values;
   const config = program.markConfigs[layer.id] ?? DEFAULT_RECT_MARK;
 
   const rows = rectUsesFields(layer) ? dataset.values : [{}];
@@ -92,7 +104,8 @@ export function resolveRectRows(program, layer, dataset) {
     if (
       (x !== undefined && !Number.isFinite(x.values[index])) ||
       (y !== undefined && !Number.isFinite(y.values[index])) ||
-      typeof fill !== "string"
+      typeof fill !== "string" ||
+      (stroke !== undefined && typeof stroke[index] !== "string")
     ) return [];
 
     let geometry;
@@ -125,14 +138,14 @@ export function resolveRectRows(program, layer, dataset) {
     return [{
       row,
       sourceIndex: index,
-      properties: { ...geometry, ...appearance(config, fill) }
+      properties: { ...geometry, ...appearance(config, fill, stroke?.[index]) }
     }];
   });
 }
 
 export function resolveRectGraphicItems(program, layer, dataset) {
-  return resolveRectRows(program, layer, dataset).map(item => ({
-    type: "rect",
-    properties: item.properties
-  }));
+  const radius = program.markConfigs[layer.id]?.cornerRadius ?? 0;
+  return resolveRectRows(program, layer, dataset).map(item =>
+    materializeRectItem(item.properties, radius)
+  );
 }

package/src/materialization/rectConfig.js

@@ -4,6 +4,7 @@ import {
   validateUnitInterval
 } from "../core/validation.js";
 import { DEFAULT_COLORS } from "../theme/defaults.js";
+import { requestedRectStyleDetails } from "../grammar/roundedRect.js";
 
 export const DEFAULT_RECT_MARK = Object.freeze({
   fill: DEFAULT_COLORS.mark,
@@ -13,7 +14,10 @@ export const DEFAULT_RECT_MARK = Object.freeze({
 });
 
 export function normalizeRectMarkConfig(patch, previous = DEFAULT_RECT_MARK) {
-  const result = { ...previous };
+  const result = {
+    ...previous,
+    ...requestedRectStyleDetails(patch, "Rect")
+  };
   if (Object.hasOwn(patch, "fill")) {
     result.fill = validateNonEmptyString(patch.fill, "Rect fill");
   }

package/src/materialization/scaleGuideDependencies.js

@@ -18,6 +18,16 @@ const GRIDS = Object.freeze([
   Object.freeze({ role: "radial", op: "rematerializeRadialGrid" })
 ]);
 
+export function planAxisTickGridRematerialization(program, channel) {
+  const ticks = program.guideConfigs.axis?.[channel]?.ticks;
+  const role = channel === "x" ? "vertical" : "horizontal";
+  const config = program.guideConfigs.grid?.[role];
+  return buildMaterializationPlan({ guides:
+    config?.inferredValues === true && config.scale === ticks?.scale
+      ? GRIDS.filter(grid => grid.role === role).map(grid => ({ op: grid.op })) : []
+  });
+}
+
 function usesPositionalScale(program, id) {
   return program.semanticSpec.layers.some(layer =>
     !isSourceOwnedText(layer) && (

package/src/materialization/scales/map.js

@@ -4,15 +4,17 @@ import {
   isOrdinalScaleType,
   mapContinuousScaleValues,
   mapDiscretizedColors,
+  mapSizeValues,
   mapOrdinalValues,
   mapSequentialColors
 } from "../../grammar/scales/index.js";
 
 export function mapScaleConsumerValues(values, resolvedScale, channel) {
-  if (channel === "color" && isDiscretizedColorScaleType(resolvedScale.type)) {
+  if (channel === "size") return mapSizeValues(values, resolvedScale);
+  if (["color", "stroke"].includes(channel) && isDiscretizedColorScaleType(resolvedScale.type)) {
     return mapDiscretizedColors(values, resolvedScale);
   }
-  if (channel === "color" && isContinuousColorScaleType(resolvedScale.type)) {
+  if (["color", "stroke"].includes(channel) && isContinuousColorScaleType(resolvedScale.type)) {
     return mapSequentialColors(
       values,
       resolvedScale.domain,
@@ -28,7 +30,7 @@ export function mapScaleConsumerValues(values, resolvedScale, channel) {
     );
   }
   if (
-    ["color", "strokeDash", "shape"].includes(channel) &&
+    ["color", "stroke", "strokeDash", "shape"].includes(channel) &&
     isOrdinalScaleType(resolvedScale.type)
   ) {
     return mapOrdinalValues(values, resolvedScale.domain, resolvedScale.range, {

package/src/materialization/scales/policies/binnedPosition.js

@@ -13,8 +13,8 @@ export function resolveBinnedPositionDomain({
       consumer.encoding.bin !== undefined
   );
   if (binnedPositions.length === 0) return undefined;
-  const independentConsumers = valuesByConsumer.filter(({ consumer }) =>
-    !isSourceOwnedText(consumer.layer)
+  const independentConsumers = valuesByConsumer.filter(({ consumer, scalePolicy }) =>
+    scalePolicy !== false && !isSourceOwnedText(consumer.layer)
   );
   if (channel !== "x" || binnedPositions.length !== independentConsumers.length) {
     throw new Error(

package/src/materialization/scales/policies/offset.js

@@ -1,4 +1,4 @@
-import { normalizeOffsetPadding } from "../../../grammar/bars/geometry.js";
+import { normalizeOffsetScalePolicy } from "../../../grammar/bars/geometry.js";
 
 function resolveParentSlot(consumer, resolvedScales, parentChannel) {
   if (parentChannel === "x" && consumer.layer.encoding?.x?.bin !== undefined) {
@@ -16,6 +16,7 @@ function resolveParentSlot(consumer, resolvedScales, parentChannel) {
 }
 
 export function resolveOffsetScalePolicy({
+  scale,
   consumers,
   resolvedScales,
   markConfigs,
@@ -34,21 +35,62 @@ export function resolveOffsetScalePolicy({
       `${channel} scale "${id}" requires one shared resolved ${parentChannel} categorical slot.`
     );
   }
-  const paddings = consumers.map(consumer => normalizeOffsetPadding(
+  return {
+    parentBandwidth: slots[0],
+    ...resolveRequestedOffsetPolicy({
+      scale,
+      consumers,
+      markConfigs,
+      id,
+      channel
+    })
+  };
+}
+
+/**
+ * Resolve the requested offset policy independently from its parent slot.
+ * Semantic scale fields are canonical. Consistent legacy mark-owned padding is
+ * retained as a fallback until the next successful scale/encoding edit migrates
+ * it into the semantic scale.
+ */
+export function resolveRequestedOffsetPolicy({
+  scale,
+  consumers = [],
+  markConfigs = {},
+  id = scale?.id ?? channel,
+  channel = "xOffset"
+}) {
+  const semanticPatch = scale === undefined
+    ? {}
+    : Object.fromEntries(
+        ["padding", "paddingInner", "paddingOuter", "align"]
+          .filter(property => Object.hasOwn(scale, property))
+          .map(property => [property, scale[property]])
+      );
+  if (
+    Object.hasOwn(semanticPatch, "padding") ||
+    ["paddingInner", "paddingOuter", "align"].every(
+      property => Object.hasOwn(semanticPatch, property)
+    )
+  ) {
+    return normalizeOffsetScalePolicy(semanticPatch, undefined, channel);
+  }
+  const legacyPolicies = consumers.map(consumer => normalizeOffsetScalePolicy(
     markConfigs[consumer.layer.id]?.[channel],
     undefined,
     channel
   ));
   const signatures = new Set(
-    paddings.map(padding => JSON.stringify(padding))
+    legacyPolicies.map(policy => JSON.stringify(policy))
   );
-  if (signatures.size !== 1) {
+  if (signatures.size > 1) {
     throw new Error(
       `${channel} scale "${id}" requires one shared padding policy.`
     );
   }
-  return {
-    parentBandwidth: slots[0],
-    ...paddings[0]
-  };
+  const legacy = legacyPolicies[0] ?? normalizeOffsetScalePolicy(
+    {}, undefined, channel
+  );
+  if (scale === undefined) return legacy;
+  return normalizeOffsetScalePolicy(semanticPatch, legacy, channel);
 }

package/src/materialization/scales/policies/series.js

@@ -22,7 +22,10 @@ export function resolveSeriesLayoutDomain({
     (_, index) => seriesLayouts[index] !== undefined
   );
   const directConsumers = valuesByConsumer.filter(
-    ({ consumer }, index) => seriesLayouts[index] === undefined && !isSourceOwnedText(consumer.layer)
+    ({ consumer, scalePolicy }, index) =>
+      scalePolicy !== false &&
+      seriesLayouts[index] === undefined &&
+      !isSourceOwnedText(consumer.layer)
   );
   const compatibleDirect = directConsumers.every(({ consumer }) =>
     layoutConsumers.every(({ consumer: layoutConsumer }) => {

package/src/materialization/scales/resolve.js

@@ -17,6 +17,7 @@ import {
   resolveScaleRange,
   resolveSequentialColorStops,
   resolveShapeRange,
+  resolveSizeScale,
   resolveSizeRange,
   resolveStrokeDashRange,
   resolveStrokeWidthRange,
@@ -96,7 +97,8 @@ function resolveRange({
   isSequentialColor,
   isDiscretizedColor,
   isOrdinalOffset,
-  discretizedScale
+  discretizedScale,
+  polarFrame
 }) {
   if (channel === "color") {
     if (isDiscretizedColor) return discretizedScale.range;
@@ -114,7 +116,7 @@ function resolveRange({
     scale,
     channel,
     domain,
-    range: resolveScaleRange(scale.range, channel, bounds),
+    range: resolveScaleRange(scale.range, channel, bounds, polarFrame),
     markConfigs
   });
 }
@@ -190,14 +192,16 @@ export function resolveScaleMaterialization(options) {
   const {
     id,
     scale,
-    channel,
+    channel: requestedChannel,
     consumers,
     valuesByConsumer,
     bounds,
     resolvedScales,
     markConfigs,
-    thetaScales
+    thetaScales,
+    polarFrame
   } = options;
+  const channel = requestedChannel === "stroke" ? "color" : requestedChannel;
   const allValues = valuesByConsumer
     .flatMap(item => item.values)
     .filter(value => value !== undefined);
@@ -218,6 +222,9 @@ export function resolveScaleMaterialization(options) {
       }))
     });
   }
+  if (channel === "size") {
+    return resolveSizeScale({ ...scale, values: allValues });
+  }
   const isSequentialColor = channel === "color" &&
     isContinuousColorScaleType(scale.type);
   const isDiscretizedColor = channel === "color" &&
@@ -234,7 +241,14 @@ export function resolveScaleMaterialization(options) {
     isDiscretePositionScaleType(scale.type);
 
   if (isSequentialColor || isDiscretizedColor) {
-    for (const consumer of consumers) validateContinuousColorConsumer(consumer.layer, consumer.encoding, scale);
+    for (const consumer of consumers) {
+      validateContinuousColorConsumer(
+        consumer.layer,
+        consumer.encoding,
+        scale,
+        { channel: consumer.channel }
+      );
+    }
   }
   let discretizedScale;
   if (isDiscretizedColor) {
@@ -290,7 +304,8 @@ export function resolveScaleMaterialization(options) {
     isSequentialColor,
     isDiscretizedColor,
     isOrdinalOffset,
-    discretizedScale
+    discretizedScale,
+    polarFrame
   });
   validateSequentialMidpoint(scale.midpoint, scale.type, domain);
   if (scale.midpoint !== undefined && (channel !== "color" || consumers.some(
@@ -313,6 +328,7 @@ export function resolveScaleMaterialization(options) {
           values: allValues,
           range: scale.range,
           ...resolveOffsetScalePolicy({
+            scale,
             consumers,
             resolvedScales,
             markConfigs,

package/src/materialization/selection/items/arc.js

@@ -1,7 +1,7 @@
 import { deriveArcSectors } from "../../../grammar/arcs.js";
 import { resolvePolarPoint } from "../../../grammar/polarPaths.js";
-import { resolvePolarFrame } from "../../../grammar/polar.js";
-import { resolveGraphicBounds } from "../../../layout/canvas.js";
+import { readScaleField } from "../../../grammar/scales/index.js";
+import { resolveCoordinatePolarFrame } from "../../coordinateBounds.js";
 import {
   concreteProperties,
   finalizeItems,
@@ -11,7 +11,7 @@ import {
 export function resolveArcItems(program, layer, dataset) {
   const thetaScale = program.resolvedScales[layer.encoding?.theta?.scale];
   const radiusScale = program.resolvedScales[layer.encoding?.radius?.scale];
-  const frame = resolvePolarFrame(resolveGraphicBounds(program));
+  const frame = resolveCoordinatePolarFrame(program, layer.coordinate);
   const derived = deriveArcSectors(dataset.values, layer, {
     thetaScale,
     ...(radiusScale === undefined ? {} : { radiusScale }),
@@ -19,14 +19,25 @@ export function resolveArcItems(program, layer, dataset) {
     innerRadiusRatio: program.markConfigs[layer.id]?.innerRadius ?? 0
   });
   const graphic = program.graphicSpec.objects[layer.id];
+  const stroke = layer.encoding?.stroke;
   const definitions = derived.sectors.map((sector, index) => {
     const members = sector.sourceIndices.map(index => dataset.values[index]);
+    const strokeValues = stroke === undefined ? undefined : readScaleField(
+      members,
+      stroke.field,
+      stroke.fieldType,
+      { temporalUnit: stroke.temporalUnit }
+    );
+    if (strokeValues !== undefined && new Set(strokeValues).size !== 1) {
+      throw new Error("Arc stroke requires one value within each sector.");
+    }
     return {
       fields: uniqueFields(members),
       channels: {
         theta: sector.theta,
         ...(sector.radius === undefined ? {} : { radius: sector.radius }),
-        ...(sector.color === undefined ? {} : { color: sector.color })
+        ...(sector.color === undefined ? {} : { color: sector.color }),
+        ...(strokeValues === undefined ? {} : { stroke: strokeValues[0] })
       },
       properties: {
         ...concreteProperties(graphic.items[index]?.properties),
@@ -36,6 +47,19 @@ export function resolveArcItems(program, layer, dataset) {
           (sector.innerRadius + sector.outerRadius) / 2
         )
       },
+      geometry: {
+        kind: "arc",
+        centerX: frame.centerX,
+        centerY: frame.centerY,
+        startTheta: sector.startTheta +
+          Math.sign(sector.endTheta - sector.startTheta) *
+          (program.markConfigs[layer.id]?.padAngle ?? 0) / 2,
+        endTheta: sector.endTheta -
+          Math.sign(sector.endTheta - sector.startTheta) *
+          (program.markConfigs[layer.id]?.padAngle ?? 0) / 2,
+        innerRadius: sector.innerRadius,
+        outerRadius: sector.outerRadius
+      },
       members
     };
   });

package/src/materialization/selection/items/bar.js

@@ -10,6 +10,7 @@ import {
 import { numericExtent } from "../../../grammar/numeric.js";
 import {
   readNominalField,
+  readScaleField,
   readTemporalField
 } from "../../../grammar/scales/index.js";
 import { findSemanticScale } from "../../../selectors/scales.js";
@@ -52,9 +53,19 @@ function aggregateCellDefinitions(program, layer, dataset) {
   const offsetChannel = resolveBarOffsetChannel(layer);
   const offsetScale = program.resolvedScales[layer.encoding?.[offsetChannel]?.scale];
   const layout = resolveBarColorLayout(layer);
+  const stroke = layer.encoding?.stroke;
 
   function definition(cell, start, end) {
     const members = aggregateMembers(dataset.values, layer, cell, channels);
+    const strokeValues = stroke === undefined ? undefined : readScaleField(
+      members,
+      stroke.field,
+      stroke.fieldType,
+      { temporalUnit: stroke.temporalUnit }
+    );
+    if (strokeValues !== undefined && new Set(strokeValues).size !== 1) {
+      throw new Error("Bar stroke requires one value within each aggregate cell.");
+    }
     return {
       fields: uniqueFields(members),
       channels: {
@@ -62,6 +73,7 @@ function aggregateCellDefinitions(program, layer, dataset) {
         [channels.measure]: start,
         [`${channels.measure}2`]: end,
         ...(cell.color === undefined ? {} : { color: cell.color }),
+        ...(strokeValues === undefined ? {} : { stroke: strokeValues[0] }),
         ...(layer.encoding?.[offsetChannel] === undefined
           ? {}
           : { [offsetChannel]: cell.series ?? cell.color })
@@ -88,8 +100,18 @@ function histogramDefinitions(program, layer, dataset) {
     resolvedScales: program.resolvedScales
   });
   const colorScale = program.resolvedScales[colorEncoding?.scale];
+  const stroke = layer.encoding?.stroke;
   return segments.map(segment => {
     const colorValue = segment.colorValue ?? colorScale?.domain[segment.category];
+    const strokeValues = stroke === undefined ? undefined : readScaleField(
+      segment.members,
+      stroke.field,
+      stroke.fieldType,
+      { temporalUnit: stroke.temporalUnit }
+    );
+    if (strokeValues !== undefined && new Set(strokeValues).size !== 1) {
+      throw new Error("Histogram stroke requires one value within each bin/series cell.");
+    }
     return {
       fields: uniqueFields(segment.members),
       channels: {
@@ -97,7 +119,8 @@ function histogramDefinitions(program, layer, dataset) {
         x2: segment.end,
         y: segment.stackStart,
         y2: segment.stackEnd,
-        ...(colorValue === undefined ? {} : { color: colorValue })
+        ...(colorValue === undefined ? {} : { color: colorValue }),
+        ...(strokeValues === undefined ? {} : { stroke: strokeValues[0] })
       },
       members: segment.members
     };
@@ -188,14 +211,18 @@ export function resolveBarItems(program, layer, dataset, selectionGrain) {
   if (definitions === undefined) {
     throw new Error(`Bar mark "${layer.id}" is incomplete for selection.`);
   }
+  const graphicTypes = Object.hasOwn(
+    program.markConfigs[layer.id]?.barAppearance ?? {},
+    "cornerRadius"
+  ) ? ["rect", "path"] : "rect";
   if (selectionGrain === "stack") {
     return finalizeItems(
       program,
       layer,
       "stack",
       barStackDefinitions(layer, grain, definitions),
-      "rect"
+      graphicTypes
     );
   }
-  return finalizeItems(program, layer, grain, definitions, "rect");
+  return finalizeItems(program, layer, grain, definitions, graphicTypes);
 }

package/src/materialization/selection/items/common.js

@@ -6,6 +6,7 @@ import {
 } from "../../../grammar/markSelection.js";
 import { unionConcreteGraphicBounds } from
   "../../../grammar/schemas/graphicBounds.js";
+import { readRectItemGeometry } from "../../../grammar/roundedRect.js";
 
 export function itemKey(layer, grain, index) {
   return `${layer.id}/${grain}/${index}`;
@@ -54,14 +55,15 @@ export function uniqueFields(rows) {
 
 function requireResolvedGraphic(program, layer, type) {
   const graphic = program.graphicSpec.objects[layer.id];
+  const types = Array.isArray(type) ? type : [type];
   const compatibleCollection = graphic?.type === "collection" &&
-    graphic.items?.every(child => child.type === type);
+    graphic.items?.every(child => types.includes(child.type));
   if (
-    (graphic?.type !== type && !compatibleCollection) ||
+    (!types.includes(graphic?.type) && !compatibleCollection) ||
     !Array.isArray(graphic.items)
   ) {
     throw new Error(
-      `Mark "${layer.id}" requires a materialized ${type} collection for selection.`
+      `Mark "${layer.id}" requires a materialized ${types.join("/")} collection for selection.`
     );
   }
   return graphic;
@@ -78,6 +80,13 @@ export function concreteProperties(properties) {
   );
 }
 
+function selectableGraphicProperties(item) {
+  return {
+    ...concreteProperties(item?.properties),
+    ...(readRectItemGeometry(item) ?? {})
+  };
+}
+
 function sharedConcreteProperties(items) {
   if (items.length === 0) return {};
   const shared = concreteProperties(items[0].properties);
@@ -93,7 +102,7 @@ function collectionBounds(program, items) {
   const bounds = unionConcreteGraphicBounds(
     program.graphicSpec,
     items.map(item => item.id)
-  );
+  , program.materializationConfigs.textMetrics);
   if (bounds === undefined) return {};
   const { left, top, right, bottom } = bounds;
   return { x: left, y: top, width: right - left, height: bottom - top };
@@ -118,7 +127,10 @@ export function finalizeItems(program, layer, grain, definitions, graphicType) {
     const items = indices.map(childIndex => graphic.items[childIndex]);
     const properties = definition.properties ?? (
       items.length === 1
-        ? concreteProperties(items[0].properties)
+        ? selectableGraphicProperties({
+            type: items[0].type ?? graphic.type,
+            properties: items[0].properties
+          })
         : {
             ...sharedConcreteProperties(items),
             ...collectionBounds(program, items)
@@ -131,6 +143,9 @@ export function finalizeItems(program, layer, grain, definitions, graphicType) {
       fields: cloneAndFreeze(definition.fields),
       channels: cloneAndFreeze(definition.channels),
       properties: cloneAndFreeze(properties),
+      ...(definition.geometry === undefined
+        ? {}
+        : { geometry: cloneAndFreeze(definition.geometry) }),
       members: Object.freeze([...definition.members]),
       graphicIds: Object.freeze(items.map((child, childOffset) =>
         child.id ?? graphicId(layer, indices[childOffset])

package/src/materialization/selection/items/rect.js

@@ -1,4 +1,5 @@
 import { rectUsesFields } from "../../../grammar/rects.js";
+import { readRectItemGeometry } from "../../../grammar/roundedRect.js";
 import { resolveRectRows } from "../../rect.js";
 import {
   channelMapFromRow,
@@ -9,6 +10,17 @@ import {
   uniqueFields
 } from "./common.js";
 
+function rectSelectionProperties(graphic, index) {
+  const item = graphic.items[index];
+  return {
+    ...concreteProperties(item?.properties),
+    ...(readRectItemGeometry({
+      type: item?.type ?? graphic.type,
+      properties: item?.properties
+    }) ?? {})
+  };
+}
+
 function resolveGradientPlotItems(program, layer, dataset) {
   const graphic = program.graphicSpec.objects[layer.id];
   return finalizeItems(
@@ -19,7 +31,7 @@ function resolveGradientPlotItems(program, layer, dataset) {
       key: itemKey(layer, "rect", index),
       fields: ownFields(row),
       channels: channelMapFromRow(row, layer),
-      properties: concreteProperties(graphic.items[index]?.properties),
+      properties: rectSelectionProperties(graphic, index),
       members: [row]
     })),
     "rect"
@@ -28,7 +40,13 @@ function resolveGradientPlotItems(program, layer, dataset) {
 
 export function resolveRectItems(program, layer, dataset) {
   const graphic = program.graphicSpec.objects[layer.id];
-  if (graphic?.type !== "rect" || !Array.isArray(graphic.items)) {
+  const rounded = Object.hasOwn(program.markConfigs[layer.id] ?? {}, "cornerRadius");
+  const compatibleCollection = rounded && graphic?.type === "collection" &&
+    graphic.items?.every(item => ["rect", "path"].includes(item.type));
+  if (
+    (graphic?.type !== "rect" && !compatibleCollection) ||
+    !Array.isArray(graphic.items)
+  ) {
     throw new Error(`Rect mark "${layer.id}" is incomplete for selection.`);
   }
   if (program.markConfigs[layer.id]?.gradientPlot?.materialized === true) {
@@ -40,8 +58,14 @@ export function resolveRectItems(program, layer, dataset) {
     key: itemKey(layer, "rect", item.sourceIndex),
     fields: hasField ? ownFields(item.row) : uniqueFields(dataset.values),
     channels: channelMapFromRow(item.row, layer),
-    properties: concreteProperties(graphic.items[graphicIndex]?.properties),
+    properties: rectSelectionProperties(graphic, graphicIndex),
     members: hasField ? [item.row] : dataset.values
   }));
-  return finalizeItems(program, layer, "rect", definitions, "rect");
+  return finalizeItems(
+    program,
+    layer,
+    "rect",
+    definitions,
+    rounded ? ["rect", "path"] : "rect"
+  );
 }

package/src/materialization/selection/path.js

@@ -10,7 +10,7 @@ function translateCommand(command, offset) {
 }
 
 export function transformPathHighlightProperties(properties, style) {
-  const { offset, ...appearance } = style;
+  const { offset = { x: 0, y: 0 }, ...appearance } = style;
   return {
     ...properties,
     ...appearance,

package/src/materialization/selection/point.js

@@ -1,5 +1,6 @@
 import { createPointShapeGraphic } from "../../grammar/pointShapes.js";
 import { finiteMidpoint } from "../../grammar/numeric.js";
+import { requestedStrokeDetails } from "../../grammar/strokeStyle.js";
 
 function pointCenterAndArea(child) {
   const properties = child.properties;
@@ -75,7 +76,8 @@ export function transformPointHighlightChild(child, style) {
       ? (child.properties.opacity === undefined ? {} : { opacity: child.properties.opacity })
       : { opacity: style.opacity }),
     ...(style.stroke === undefined ? {} : { stroke: style.stroke }),
-    ...(style.strokeWidth === undefined ? {} : { strokeWidth: style.strokeWidth })
+    ...(style.strokeWidth === undefined ? {} : { strokeWidth: style.strokeWidth }),
+    ...requestedStrokeDetails(child.properties, "Point highlight source")
   };
   if (style.shape !== undefined) {
     return createPointShapeGraphic({