@xsynaptic/sonic-ui 0.24.0 → 0.25.1

package/dist/dev/lib/marker-band.js

@@ -2,7 +2,7 @@ import { readPxProperty } from "./read-px-property.js";
 
 //#region src/lib/marker-band.ts
 const kindPattern = /^[a-z][a-z0-9-]*$/;
-const snapSlopPx = 4;
+const snapMarginPx = 4;
 function isKind(kind) {
 	return kind !== void 0 && kindPattern.test(kind);
 }
@@ -13,45 +13,61 @@ function writeKind(part, kind, fallback) {
 	}
 	part.style.setProperty("--_sonic-marker", `var(--sonic-marker-${kind}, var(${fallback}))`);
 }
-function renderMarker(marker, [from, to], lane) {
+function createPart(marker) {
 	const part = document.createElement("div");
-	part.className = lane === void 0 ? "sonic-wavestrip-region" : "sonic-wavestrip-marker";
-	if (lane !== void 0) part.style.setProperty("--_sonic-marker-lane", String(lane));
-	part.style.setProperty("--_sonic-marker-from", String(from));
-	part.style.setProperty("--_sonic-marker-to", String(to));
+	part.className = marker.end === void 0 ? "sonic-wavestrip-marker" : "sonic-wavestrip-region";
 	writeKind(part, marker.kind, "--_sonic-marker-default");
 	if (marker.dimmed === true) part.dataset.sonicDimmed = "";
 	return part;
 }
 function createMarkerBand(band) {
-	let dots = [];
+	let built;
+	let placed = [];
 	const px = (property) => readPxProperty(getComputedStyle(band), property, 0);
+	function build(markers, draw) {
+		const parts = markers.map((marker) => {
+			const part = createPart(marker);
+			if (draw && marker.end === void 0) {
+				part.style.setProperty("--_sonic-marker-paint", "transparent");
+				draw(marker, part);
+			}
+			return part;
+		});
+		band.replaceChildren(...parts);
+		built = {
+			draw,
+			markers,
+			parts
+		};
+		return parts;
+	}
 	return {
-		at: ({ x, y }, widthPx) => {
+		inReach: (point, widthPx) => {
 			const size = px("--_sonic-marker-size");
 			const step = px("--_sonic-marker-step");
-			const nearest = nearestDot({
-				x,
-				y
-			}, dots.map(({ at, lane }) => ({
+			return centersInReach(point, placed.map(({ at, lane }) => ({
 				x: at * widthPx,
 				y: size / 2 + lane * step
-			})), size / 2 + snapSlopPx);
-			return nearest === void 0 ? void 0 : dots[nearest]?.index;
+			})), size / 2 + snapMarginPx).flatMap((order) => placed[order]?.index ?? []);
 		},
-		render: (markers, proportions) => {
+		render: (markers, proportions, draw) => {
 			const widthPx = band.getBoundingClientRect().width;
 			const points = markers.flatMap((marker, index) => marker.end === void 0 ? [{
 				at: proportions[index]?.[0] ?? 0,
 				index
 			}] : []);
 			const lanes = markerLanes(points.map(({ at }) => at * widthPx), px("--_sonic-marker-step"));
-			dots = points.map((point, order) => ({
+			const parts = built?.markers === markers && built.draw === draw ? built.parts : build(markers, draw);
+			placed = points.map((point, order) => ({
 				...point,
 				lane: lanes[order] ?? 0
 			}));
-			const laneOf = new Map(dots.map(({ index, lane }) => [index, lane]));
-			band.replaceChildren(...markers.map((marker, index) => renderMarker(marker, proportions[index] ?? [0, 0], laneOf.get(index))));
+			for (const [index, part] of parts.entries()) {
+				const [from, to] = proportions[index] ?? [0, 0];
+				part.style.setProperty("--_sonic-marker-from", String(from));
+				part.style.setProperty("--_sonic-marker-to", String(to));
+			}
+			for (const { index, lane } of placed) parts[index]?.style.setProperty("--_sonic-marker-lane", String(lane));
 		}
 	};
 }
@@ -64,18 +80,13 @@ function markerLanes(positions, minDistance) {
 		return lane;
 	});
 }
-function nearestDot(point, dots, reach) {
-	let nearest;
-	let nearestDistance = reach * reach;
-	for (const [index, dot] of dots.entries()) {
-		const distance = (dot.x - point.x) ** 2 + (dot.y - point.y) ** 2;
-		if (distance > nearestDistance) continue;
-		nearest = index;
-		nearestDistance = distance;
-	}
-	return nearest;
+function centersInReach(point, centers, reach) {
+	return centers.map((center, index) => ({
+		distance: (center.x - point.x) ** 2 + (center.y - point.y) ** 2,
+		index
+	})).filter(({ distance }) => distance <= reach * reach).toSorted((first, second) => first.distance - second.distance || second.index - first.index).map(({ index }) => index);
 }
 
 //#endregion
-export { createMarkerBand, isKind, markerLanes, nearestDot, writeKind };
+export { centersInReach, createMarkerBand, isKind, markerLanes, writeKind };
 //# sourceMappingURL=marker-band.js.map

package/dist/dev/lib/marker-band.js.map

@@ -1 +1 @@
-{"version":3,"file":"marker-band.js","names":[],"sources":["../../../src/lib/marker-band.ts"],"sourcesContent":["import { readPxProperty } from '#lib/read-px-property.ts';\n\ninterface MarkerLook {\n\tdimmed?: boolean;\n\tend?: number;\n\tkind?: string;\n}\n\ninterface Point {\n\tx: number;\n\ty: number;\n}\n\ninterface MarkerBand {\n\tat: (point: Point, widthPx: number) => number | undefined;\n\trender: (\n\t\tmarkers: ReadonlyArray<MarkerLook>,\n\t\tproportions: ReadonlyArray<[number, number]>,\n\t) => void;\n}\n\n// Interpolated into a style, so anything else falls back to the default colour\nconst kindPattern = /^[a-z][a-z0-9-]*$/;\n\nconst snapSlopPx = 4;\n\nexport function isKind(kind: string | undefined): kind is string {\n\treturn kind !== undefined && kindPattern.test(kind);\n}\n\nexport function writeKind(part: HTMLElement, kind: string | undefined, fallback: string): void {\n\tif (!isKind(kind)) {\n\t\tpart.style.removeProperty('--_sonic-marker');\n\t\treturn;\n\t}\n\n\tpart.style.setProperty('--_sonic-marker', `var(--sonic-marker-${kind}, var(${fallback}))`);\n}\n\nfunction renderMarker(\n\tmarker: MarkerLook,\n\t[from, to]: [number, number],\n\tlane: number | undefined,\n): HTMLElement {\n\tconst part = document.createElement('div');\n\n\tpart.className = lane === undefined ? 'sonic-wavestrip-region' : 'sonic-wavestrip-marker';\n\tif (lane !== undefined) part.style.setProperty('--_sonic-marker-lane', String(lane));\n\tpart.style.setProperty('--_sonic-marker-from', String(from));\n\tpart.style.setProperty('--_sonic-marker-to', String(to));\n\twriteKind(part, marker.kind, '--_sonic-marker-default');\n\tif (marker.dimmed === true) part.dataset.sonicDimmed = '';\n\n\treturn part;\n}\n\nexport function createMarkerBand(band: HTMLElement): MarkerBand {\n\tlet dots: Array<{ at: number; index: number; lane: number }> = [];\n\n\tconst px = (property: string): number => readPxProperty(getComputedStyle(band), property, 0);\n\n\treturn {\n\t\tat: ({ x, y }, widthPx) => {\n\t\t\tconst size = px('--_sonic-marker-size');\n\t\t\tconst step = px('--_sonic-marker-step');\n\t\t\tconst nearest = nearestDot(\n\t\t\t\t{ x, y },\n\t\t\t\tdots.map(({ at, lane }) => ({ x: at * widthPx, y: size / 2 + lane * step })),\n\t\t\t\tsize / 2 + snapSlopPx,\n\t\t\t);\n\n\t\t\treturn nearest === undefined ? undefined : dots[nearest]?.index;\n\t\t},\n\t\trender: (markers, proportions) => {\n\t\t\tconst widthPx = band.getBoundingClientRect().width;\n\t\t\tconst points = markers.flatMap((marker, index) =>\n\t\t\t\tmarker.end === undefined ? [{ at: proportions[index]?.[0] ?? 0, index }] : [],\n\t\t\t);\n\t\t\tconst lanes = markerLanes(\n\t\t\t\tpoints.map(({ at }) => at * widthPx),\n\t\t\t\tpx('--_sonic-marker-step'),\n\t\t\t);\n\n\t\t\tdots = points.map((point, order) => ({ ...point, lane: lanes[order] ?? 0 }));\n\n\t\t\tconst laneOf = new Map(dots.map(({ index, lane }) => [index, lane]));\n\n\t\t\tband.replaceChildren(\n\t\t\t\t...markers.map((marker, index) =>\n\t\t\t\t\trenderMarker(marker, proportions[index] ?? [0, 0], laneOf.get(index)),\n\t\t\t\t),\n\t\t\t);\n\t\t},\n\t};\n}\n\nexport function markerLanes(positions: ReadonlyArray<number>, minDistance: number): Array<number> {\n\tconst lastInLane: Array<number> = [];\n\n\treturn positions.map((position) => {\n\t\tconst free = lastInLane.findIndex((last) => position - last >= minDistance);\n\t\tconst lane = free === -1 ? lastInLane.length : free;\n\n\t\tlastInLane[lane] = position;\n\n\t\treturn lane;\n\t});\n}\n\nexport function nearestDot(\n\tpoint: Point,\n\tdots: ReadonlyArray<Point>,\n\treach: number,\n): number | undefined {\n\tlet nearest: number | undefined;\n\tlet nearestDistance = reach * reach;\n\n\tfor (const [index, dot] of dots.entries()) {\n\t\tconst distance = (dot.x - point.x) ** 2 + (dot.y - point.y) ** 2;\n\t\tif (distance > nearestDistance) continue;\n\n\t\tnearest = index;\n\t\tnearestDistance = distance;\n\t}\n\n\treturn nearest;\n}\n"],"mappings":";;;AAsBA,MAAM,cAAc;AAEpB,MAAM,aAAa;AAEnB,SAAgB,OAAO,MAA0C;CAChE,OAAO,SAAS,UAAa,YAAY,KAAK,IAAI;AACnD;AAEA,SAAgB,UAAU,MAAmB,MAA0B,UAAwB;CAC9F,IAAI,CAAC,OAAO,IAAI,GAAG;EAClB,KAAK,MAAM,eAAe,iBAAiB;EAC3C;CACD;CAEA,KAAK,MAAM,YAAY,mBAAmB,sBAAsB,KAAK,QAAQ,SAAS,GAAG;AAC1F;AAEA,SAAS,aACR,QACA,CAAC,MAAM,KACP,MACc;CACd,MAAM,OAAO,SAAS,cAAc,KAAK;CAEzC,KAAK,YAAY,SAAS,SAAY,2BAA2B;CACjE,IAAI,SAAS,QAAW,KAAK,MAAM,YAAY,wBAAwB,OAAO,IAAI,CAAC;CACnF,KAAK,MAAM,YAAY,wBAAwB,OAAO,IAAI,CAAC;CAC3D,KAAK,MAAM,YAAY,sBAAsB,OAAO,EAAE,CAAC;CACvD,UAAU,MAAM,OAAO,MAAM,yBAAyB;CACtD,IAAI,OAAO,WAAW,MAAM,KAAK,QAAQ,cAAc;CAEvD,OAAO;AACR;AAEA,SAAgB,iBAAiB,MAA+B;CAC/D,IAAI,OAA2D,CAAC;CAEhE,MAAM,MAAM,aAA6B,eAAe,iBAAiB,IAAI,GAAG,UAAU,CAAC;CAE3F,OAAO;EACN,KAAK,EAAE,GAAG,KAAK,YAAY;GAC1B,MAAM,OAAO,GAAG,sBAAsB;GACtC,MAAM,OAAO,GAAG,sBAAsB;GACtC,MAAM,UAAU,WACf;IAAE;IAAG;GAAE,GACP,KAAK,KAAK,EAAE,IAAI,YAAY;IAAE,GAAG,KAAK;IAAS,GAAG,OAAO,IAAI,OAAO;GAAK,EAAE,GAC3E,OAAO,IAAI,UACZ;GAEA,OAAO,YAAY,SAAY,SAAY,KAAK,QAAQ,EAAE;EAC3D;EACA,SAAS,SAAS,gBAAgB;GACjC,MAAM,UAAU,KAAK,sBAAsB,CAAC,CAAC;GAC7C,MAAM,SAAS,QAAQ,SAAS,QAAQ,UACvC,OAAO,QAAQ,SAAY,CAAC;IAAE,IAAI,YAAY,MAAM,GAAG,MAAM;IAAG;GAAM,CAAC,IAAI,CAAC,CAC7E;GACA,MAAM,QAAQ,YACb,OAAO,KAAK,EAAE,SAAS,KAAK,OAAO,GACnC,GAAG,sBAAsB,CAC1B;GAEA,OAAO,OAAO,KAAK,OAAO,WAAW;IAAE,GAAG;IAAO,MAAM,MAAM,UAAU;GAAE,EAAE;GAE3E,MAAM,SAAS,IAAI,IAAI,KAAK,KAAK,EAAE,OAAO,WAAW,CAAC,OAAO,IAAI,CAAC,CAAC;GAEnE,KAAK,gBACJ,GAAG,QAAQ,KAAK,QAAQ,UACvB,aAAa,QAAQ,YAAY,UAAU,CAAC,GAAG,CAAC,GAAG,OAAO,IAAI,KAAK,CAAC,CACrE,CACD;EACD;CACD;AACD;AAEA,SAAgB,YAAY,WAAkC,aAAoC;CACjG,MAAM,aAA4B,CAAC;CAEnC,OAAO,UAAU,KAAK,aAAa;EAClC,MAAM,OAAO,WAAW,WAAW,SAAS,WAAW,QAAQ,WAAW;EAC1E,MAAM,OAAO,SAAS,KAAK,WAAW,SAAS;EAE/C,WAAW,QAAQ;EAEnB,OAAO;CACR,CAAC;AACF;AAEA,SAAgB,WACf,OACA,MACA,OACqB;CACrB,IAAI;CACJ,IAAI,kBAAkB,QAAQ;CAE9B,KAAK,MAAM,CAAC,OAAO,QAAQ,KAAK,QAAQ,GAAG;EAC1C,MAAM,YAAY,IAAI,IAAI,MAAM,MAAM,KAAK,IAAI,IAAI,MAAM,MAAM;EAC/D,IAAI,WAAW,iBAAiB;EAEhC,UAAU;EACV,kBAAkB;CACnB;CAEA,OAAO;AACR"}
+{"version":3,"file":"marker-band.js","names":[],"sources":["../../../src/lib/marker-band.ts"],"sourcesContent":["import { readPxProperty } from '#lib/read-px-property.ts';\n\ninterface MarkerLook {\n\tdimmed?: boolean;\n\tend?: number;\n\tkind?: string;\n}\n\nexport interface Point {\n\tx: number;\n\ty: number;\n}\n\ninterface MarkerBand<Marker extends MarkerLook> {\n\tinReach: (point: Point, widthPx: number) => Array<number>;\n\trender: (\n\t\tmarkers: ReadonlyArray<Marker>,\n\t\tproportions: ReadonlyArray<[number, number]>,\n\t\tdraw?: (marker: Marker, part: HTMLElement) => void,\n\t) => void;\n}\n\n// Interpolated into a style, so anything else falls back to the default colour\nconst kindPattern = /^[a-z][a-z0-9-]*$/;\n\nconst snapMarginPx = 4;\n\nexport function isKind(kind: string | undefined): kind is string {\n\treturn kind !== undefined && kindPattern.test(kind);\n}\n\nexport function writeKind(part: HTMLElement, kind: string | undefined, fallback: string): void {\n\tif (!isKind(kind)) {\n\t\tpart.style.removeProperty('--_sonic-marker');\n\t\treturn;\n\t}\n\n\tpart.style.setProperty('--_sonic-marker', `var(--sonic-marker-${kind}, var(${fallback}))`);\n}\n\nfunction createPart(marker: MarkerLook): HTMLElement {\n\tconst part = document.createElement('div');\n\n\tpart.className = marker.end === undefined ? 'sonic-wavestrip-marker' : 'sonic-wavestrip-region';\n\twriteKind(part, marker.kind, '--_sonic-marker-default');\n\tif (marker.dimmed === true) part.dataset.sonicDimmed = '';\n\n\treturn part;\n}\n\nexport function createMarkerBand<Marker extends MarkerLook>(band: HTMLElement): MarkerBand<Marker> {\n\ttype Draw = (marker: Marker, part: HTMLElement) => void;\n\n\tlet built:\n\t\t| undefined\n\t\t| { draw: Draw | undefined; markers: ReadonlyArray<Marker>; parts: Array<HTMLElement> };\n\tlet placed: Array<{ at: number; index: number; lane: number }> = [];\n\n\tconst px = (property: string): number => readPxProperty(getComputedStyle(band), property, 0);\n\n\tfunction build(markers: ReadonlyArray<Marker>, draw: Draw | undefined): Array<HTMLElement> {\n\t\tconst parts = markers.map((marker) => {\n\t\t\tconst part = createPart(marker);\n\n\t\t\tif (draw && marker.end === undefined) {\n\t\t\t\tpart.style.setProperty('--_sonic-marker-paint', 'transparent');\n\t\t\t\tdraw(marker, part);\n\t\t\t}\n\n\t\t\treturn part;\n\t\t});\n\n\t\tband.replaceChildren(...parts);\n\t\tbuilt = { draw, markers, parts };\n\n\t\treturn parts;\n\t}\n\n\treturn {\n\t\tinReach: (point, widthPx) => {\n\t\t\tconst size = px('--_sonic-marker-size');\n\t\t\tconst step = px('--_sonic-marker-step');\n\n\t\t\treturn centersInReach(\n\t\t\t\tpoint,\n\t\t\t\tplaced.map(({ at, lane }) => ({ x: at * widthPx, y: size / 2 + lane * step })),\n\t\t\t\tsize / 2 + snapMarginPx,\n\t\t\t).flatMap((order) => placed[order]?.index ?? []);\n\t\t},\n\t\trender: (markers, proportions, draw) => {\n\t\t\tconst widthPx = band.getBoundingClientRect().width;\n\t\t\tconst points = markers.flatMap((marker, index) =>\n\t\t\t\tmarker.end === undefined ? [{ at: proportions[index]?.[0] ?? 0, index }] : [],\n\t\t\t);\n\t\t\tconst lanes = markerLanes(\n\t\t\t\tpoints.map(({ at }) => at * widthPx),\n\t\t\t\tpx('--_sonic-marker-step'),\n\t\t\t);\n\t\t\t// A `markers` write always makes a new array, so the same array and renderer mean no write\n\t\t\tconst parts =\n\t\t\t\tbuilt?.markers === markers && built.draw === draw ? built.parts : build(markers, draw);\n\n\t\t\tplaced = points.map((point, order) => ({ ...point, lane: lanes[order] ?? 0 }));\n\t\t\tfor (const [index, part] of parts.entries()) {\n\t\t\t\tconst [from, to] = proportions[index] ?? [0, 0];\n\n\t\t\t\tpart.style.setProperty('--_sonic-marker-from', String(from));\n\t\t\t\tpart.style.setProperty('--_sonic-marker-to', String(to));\n\t\t\t}\n\t\t\tfor (const { index, lane } of placed) {\n\t\t\t\tparts[index]?.style.setProperty('--_sonic-marker-lane', String(lane));\n\t\t\t}\n\t\t},\n\t};\n}\n\nexport function markerLanes(positions: ReadonlyArray<number>, minDistance: number): Array<number> {\n\tconst lastInLane: Array<number> = [];\n\n\treturn positions.map((position) => {\n\t\tconst free = lastInLane.findIndex((last) => position - last >= minDistance);\n\t\tconst lane = free === -1 ? lastInLane.length : free;\n\n\t\tlastInLane[lane] = position;\n\n\t\treturn lane;\n\t});\n}\n\n// A later marker wins a tie, as it is drawn over the earlier one\nexport function centersInReach(\n\tpoint: Point,\n\tcenters: ReadonlyArray<Point>,\n\treach: number,\n): Array<number> {\n\treturn centers\n\t\t.map((center, index) => ({\n\t\t\tdistance: (center.x - point.x) ** 2 + (center.y - point.y) ** 2,\n\t\t\tindex,\n\t\t}))\n\t\t.filter(({ distance }) => distance <= reach * reach)\n\t\t.toSorted((first, second) => first.distance - second.distance || second.index - first.index)\n\t\t.map(({ index }) => index);\n}\n"],"mappings":"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"}

package/dist/dev/lib/region-drag.js

@@ -0,0 +1,49 @@
+import { clamp, clampProportion, trimFloat } from "./math.js";
+import { fineFactor } from "./drag-step.js";
+
+//#region src/lib/region-drag.ts
+function regionAt(bodies, x) {
+	const index = bodies.findLastIndex((body) => body !== void 0 && x >= body[0] && x <= body[1]);
+	return index === -1 ? void 0 : index;
+}
+function regionTravel({ end, start }, [low, high]) {
+	return [low, Math.max(low, trimFloat(high - (end - start)))];
+}
+function moveRegionTo(mapping, span, start) {
+	const moved = clamp(mapping.snap(start), ...regionTravel(span, mapping.bounds));
+	return {
+		end: trimFloat(moved + (span.end - span.start)),
+		start: moved
+	};
+}
+function startRegionDrag({ position, ...fixed }) {
+	return {
+		...fixed,
+		isEngaged: false,
+		lastPosition: position,
+		startPosition: position,
+		travelPx: 0
+	};
+}
+function stepRegionDrag(mapping, state, move) {
+	if (!(state.isEngaged || Math.abs(move.position - state.startPosition) >= state.thresholdPx)) return {
+		span: void 0,
+		state
+	};
+	const pace = move.isFine ? fineFactor : 1;
+	const travelPx = state.travelPx + (move.position - state.lastPosition) * pace;
+	const at = mapping.proportionOf(state.from.start) + travelPx / state.widthPx;
+	return {
+		span: moveRegionTo(mapping, state.from, mapping.valueAt(clampProportion(at))),
+		state: {
+			...state,
+			isEngaged: true,
+			lastPosition: move.position,
+			travelPx
+		}
+	};
+}
+
+//#endregion
+export { moveRegionTo, regionAt, regionTravel, startRegionDrag, stepRegionDrag };
+//# sourceMappingURL=region-drag.js.map

package/dist/dev/lib/region-drag.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"region-drag.js","names":[],"sources":["../../../src/lib/region-drag.ts"],"sourcesContent":["import type { ValueMapping } from '#lib/value-mapping.ts';\n\nimport { fineFactor } from '#lib/drag-step.ts';\nimport { clamp, clampProportion, trimFloat } from '#lib/math.ts';\n\nexport interface RegionSpan {\n\tend: number;\n\tstart: number;\n}\n\nexport interface RegionDragState {\n\tfrom: RegionSpan;\n\tisEngaged: boolean;\n\tlastPosition: number;\n\tstartPosition: number;\n\tthresholdPx: number;\n\ttravelPx: number;\n\twidthPx: number;\n}\n\ninterface RegionDragStart {\n\tfrom: RegionSpan;\n\tposition: number;\n\tthresholdPx: number;\n\twidthPx: number;\n}\n\ninterface RegionDragStep {\n\tspan: RegionSpan | undefined;\n\tstate: RegionDragState;\n}\n\n// A later body is drawn over an earlier one; `undefined` holds the place of one that takes no press\nexport function regionAt(\n\tbodies: ReadonlyArray<[number, number] | undefined>,\n\tx: number,\n): number | undefined {\n\tconst index = bodies.findLastIndex((body) => body !== undefined && x >= body[0] && x <= body[1]);\n\n\treturn index === -1 ? undefined : index;\n}\n\nexport function regionTravel(\n\t{ end, start }: RegionSpan,\n\t[low, high]: [number, number],\n): [number, number] {\n\treturn [low, Math.max(low, trimFloat(high - (end - start)))];\n}\n\nexport function moveRegionTo(mapping: ValueMapping, span: RegionSpan, start: number): RegionSpan {\n\tconst moved = clamp(mapping.snap(start), ...regionTravel(span, mapping.bounds));\n\n\treturn { end: trimFloat(moved + (span.end - span.start)), start: moved };\n}\n\nexport function startRegionDrag({ position, ...fixed }: RegionDragStart): RegionDragState {\n\treturn {\n\t\t...fixed,\n\t\tisEngaged: false,\n\t\tlastPosition: position,\n\t\tstartPosition: position,\n\t\ttravelPx: 0,\n\t};\n}\n\n// `span` stays `undefined` until the pointer has travelled the threshold, so a lift before then is a press\nexport function stepRegionDrag(\n\tmapping: ValueMapping,\n\tstate: RegionDragState,\n\tmove: { isFine: boolean; position: number },\n): RegionDragStep {\n\tconst isEngaged =\n\t\tstate.isEngaged || Math.abs(move.position - state.startPosition) >= state.thresholdPx;\n\tif (!isEngaged) return { span: undefined, state };\n\n\tconst pace = move.isFine ? fineFactor : 1;\n\tconst travelPx = state.travelPx + (move.position - state.lastPosition) * pace;\n\tconst at = mapping.proportionOf(state.from.start) + travelPx / state.widthPx;\n\n\treturn {\n\t\tspan: moveRegionTo(mapping, state.from, mapping.valueAt(clampProportion(at))),\n\t\tstate: { ...state, isEngaged: true, lastPosition: move.position, travelPx },\n\t};\n}\n"],"mappings":";;;;AAiCA,SAAgB,SACf,QACA,GACqB;CACrB,MAAM,QAAQ,OAAO,eAAe,SAAS,SAAS,UAAa,KAAK,KAAK,MAAM,KAAK,KAAK,EAAE;CAE/F,OAAO,UAAU,KAAK,SAAY;AACnC;AAEA,SAAgB,aACf,EAAE,KAAK,SACP,CAAC,KAAK,OACa;CACnB,OAAO,CAAC,KAAK,KAAK,IAAI,KAAK,UAAU,QAAQ,MAAM,MAAM,CAAC,CAAC;AAC5D;AAEA,SAAgB,aAAa,SAAuB,MAAkB,OAA2B;CAChG,MAAM,QAAQ,MAAM,QAAQ,KAAK,KAAK,GAAG,GAAG,aAAa,MAAM,QAAQ,MAAM,CAAC;CAE9E,OAAO;EAAE,KAAK,UAAU,SAAS,KAAK,MAAM,KAAK,MAAM;EAAG,OAAO;CAAM;AACxE;AAEA,SAAgB,gBAAgB,EAAE,UAAU,GAAG,SAA2C;CACzF,OAAO;EACN,GAAG;EACH,WAAW;EACX,cAAc;EACd,eAAe;EACf,UAAU;CACX;AACD;AAGA,SAAgB,eACf,SACA,OACA,MACiB;CAGjB,IAAI,EADH,MAAM,aAAa,KAAK,IAAI,KAAK,WAAW,MAAM,aAAa,KAAK,MAAM,cAC3D,OAAO;EAAE,MAAM;EAAW;CAAM;CAEhD,MAAM,OAAO,KAAK,SAAS,aAAa;CACxC,MAAM,WAAW,MAAM,YAAY,KAAK,WAAW,MAAM,gBAAgB;CACzE,MAAM,KAAK,QAAQ,aAAa,MAAM,KAAK,KAAK,IAAI,WAAW,MAAM;CAErE,OAAO;EACN,MAAM,aAAa,SAAS,MAAM,MAAM,QAAQ,QAAQ,gBAAgB,EAAE,CAAC,CAAC;EAC5E,OAAO;GAAE,GAAG;GAAO,WAAW;GAAM,cAAc,KAAK;GAAU;EAAS;CAC3E;AACD"}

package/dist/dev/lib/spoken-duration.js

@@ -1,3 +1,5 @@
+import { formatClock } from "./clock.js";
+
 //#region src/lib/spoken-duration.ts
 const formatters = /* @__PURE__ */ new Map();
 function formatterFor(language, isZero) {
@@ -18,6 +20,7 @@ function formatterFor(language, isZero) {
 	return formatter;
 }
 function spokenDuration(seconds, language = "") {
+	if (!("DurationFormat" in Intl)) return formatClock(seconds);
 	const total = Math.trunc(seconds);
 	return formatterFor(language, total === 0).format({
 		hours: Math.trunc(total / 3600),

package/dist/dev/lib/spoken-duration.js.map

@@ -1 +1 @@
-{"version":3,"file":"spoken-duration.js","names":[],"sources":["../../../src/lib/spoken-duration.ts"],"sourcesContent":["const formatters = new Map<string, Intl.DurationFormat>();\n\nfunction formatterFor(language: string, isZero: boolean): Intl.DurationFormat {\n\tconst key = `${language}|${String(isZero)}`;\n\tconst cached = formatters.get(key);\n\tif (cached) return cached;\n\n\t// All-zero units format to an empty string unless the seconds are forced\n\tconst options = { secondsDisplay: isZero ? 'always' : 'auto', style: 'long' } as const;\n\tlet formatter: Intl.DurationFormat;\n\n\ttry {\n\t\tformatter = new Intl.DurationFormat(language || undefined, options);\n\t} catch {\n\t\tformatter = new Intl.DurationFormat(undefined, options);\n\t}\n\tformatters.set(key, formatter);\n\n\treturn formatter;\n}\n\nexport function spokenDuration(seconds: number, language = ''): string {\n\t// Truncated as the clock is, so every unit carries one sign; mixed signs throw\n\tconst total = Math.trunc(seconds);\n\n\treturn formatterFor(language, total === 0).format({\n\t\thours: Math.trunc(total / 3600),\n\t\tminutes: Math.trunc(total / 60) % 60,\n\t\tseconds: total % 60,\n\t});\n}\n"],"mappings":";AAAA,MAAM,6BAAa,IAAI,IAAiC;AAExD,SAAS,aAAa,UAAkB,QAAsC;CAC7E,MAAM,MAAM,GAAG,SAAS,GAAG,OAAO,MAAM;CACxC,MAAM,SAAS,WAAW,IAAI,GAAG;CACjC,IAAI,QAAQ,OAAO;CAGnB,MAAM,UAAU;EAAE,gBAAgB,SAAS,WAAW;EAAQ,OAAO;CAAO;CAC5E,IAAI;CAEJ,IAAI;EACH,YAAY,IAAI,KAAK,eAAe,YAAY,QAAW,OAAO;CACnE,QAAQ;EACP,YAAY,IAAI,KAAK,eAAe,QAAW,OAAO;CACvD;CACA,WAAW,IAAI,KAAK,SAAS;CAE7B,OAAO;AACR;AAEA,SAAgB,eAAe,SAAiB,WAAW,IAAY;CAEtE,MAAM,QAAQ,KAAK,MAAM,OAAO;CAEhC,OAAO,aAAa,UAAU,UAAU,CAAC,CAAC,CAAC,OAAO;EACjD,OAAO,KAAK,MAAM,QAAQ,IAAI;EAC9B,SAAS,KAAK,MAAM,QAAQ,EAAE,IAAI;EAClC,SAAS,QAAQ;CAClB,CAAC;AACF"}
+{"version":3,"file":"spoken-duration.js","names":[],"sources":["../../../src/lib/spoken-duration.ts"],"sourcesContent":["import { formatClock } from '#lib/clock.ts';\n\nconst formatters = new Map<string, Intl.DurationFormat>();\n\nfunction formatterFor(language: string, isZero: boolean): Intl.DurationFormat {\n\tconst key = `${language}|${String(isZero)}`;\n\tconst cached = formatters.get(key);\n\tif (cached) return cached;\n\n\t// All-zero units format to an empty string unless the seconds are forced\n\tconst options = { secondsDisplay: isZero ? 'always' : 'auto', style: 'long' } as const;\n\tlet formatter: Intl.DurationFormat;\n\n\ttry {\n\t\tformatter = new Intl.DurationFormat(language || undefined, options);\n\t} catch {\n\t\tformatter = new Intl.DurationFormat(undefined, options);\n\t}\n\tformatters.set(key, formatter);\n\n\treturn formatter;\n}\n\nexport function spokenDuration(seconds: number, language = ''): string {\n\tif (!('DurationFormat' in Intl)) return formatClock(seconds);\n\n\t// Truncated as the clock is, so every unit carries one sign; mixed signs throw\n\tconst total = Math.trunc(seconds);\n\n\treturn formatterFor(language, total === 0).format({\n\t\thours: Math.trunc(total / 3600),\n\t\tminutes: Math.trunc(total / 60) % 60,\n\t\tseconds: total % 60,\n\t});\n}\n"],"mappings":";;;AAEA,MAAM,6BAAa,IAAI,IAAiC;AAExD,SAAS,aAAa,UAAkB,QAAsC;CAC7E,MAAM,MAAM,GAAG,SAAS,GAAG,OAAO,MAAM;CACxC,MAAM,SAAS,WAAW,IAAI,GAAG;CACjC,IAAI,QAAQ,OAAO;CAGnB,MAAM,UAAU;EAAE,gBAAgB,SAAS,WAAW;EAAQ,OAAO;CAAO;CAC5E,IAAI;CAEJ,IAAI;EACH,YAAY,IAAI,KAAK,eAAe,YAAY,QAAW,OAAO;CACnE,QAAQ;EACP,YAAY,IAAI,KAAK,eAAe,QAAW,OAAO;CACvD;CACA,WAAW,IAAI,KAAK,SAAS;CAE7B,OAAO;AACR;AAEA,SAAgB,eAAe,SAAiB,WAAW,IAAY;CACtE,IAAI,EAAE,oBAAoB,OAAO,OAAO,YAAY,OAAO;CAG3D,MAAM,QAAQ,KAAK,MAAM,OAAO;CAEhC,OAAO,aAAa,UAAU,UAAU,CAAC,CAAC,CAAC,OAAO;EACjD,OAAO,KAAK,MAAM,QAAQ,IAAI;EAC9B,SAAS,KAAK,MAAM,QAAQ,EAAE,IAAI;EAClC,SAAS,QAAQ;CAClB,CAAC;AACF"}

package/dist/styles/button.css

@@ -85,7 +85,8 @@
 		font: inherit;
 		color: var(--_sonic-ink);
 		cursor: pointer;
-		user-select: none;
+		-webkit-user-select: none;
+		        user-select: none;
 		background: var(--_sonic-well-floor);
 		border: 0;
 		border-radius: var(--_sonic-button-corner);
@@ -112,11 +113,13 @@
 		);
 
 		color: color-mix(in oklab, var(--_sonic-lit) 55%, var(--_sonic-ink));
+	}
 
 		@media (forced-colors: active) {
+	:where([armed]) > .sonic-button:not(:disabled, [aria-disabled='true']) {
 			--_sonic-keycap-glow: transparent;
-		}
 	}
+		}
 
 	/* Before the latched rule too; a button with an LED blinks the LED and keeps its legend */
 	:where([busy]) > .sonic-button:not(:disabled, [aria-disabled='true'], :has(.sonic-led)) {
@@ -153,21 +156,28 @@
 				)
 			)
 		);
+	}
 
-		& .sonic-button-cap > [data-sonic-when='released'] {
+		.sonic-button:is([aria-pressed='true'],[aria-expanded='true'],:where([momentary]:state(pressed)) > *) .sonic-button-cap > [data-sonic-when='released'] {
 			display: none;
 		}
 
 		@media (forced-colors: active) {
+
+	.sonic-button:is(
+		[aria-pressed='true'],
+		[aria-expanded='true'],
+		:where([momentary]:state(pressed)) > *
+	) {
 			--_sonic-skirt: var(--_sonic-lit);
 			--_sonic-face: var(--_sonic-lit);
 			--_sonic-ink: HighlightText;
+	}
 
-			&:is(:disabled, [aria-disabled='true']) {
+			.sonic-button:is([aria-pressed='true'],[aria-expanded='true'],:where([momentary]:state(pressed)) > *):is(:disabled,[aria-disabled='true']) {
 				--_sonic-ink: ButtonFace;
 			}
 		}
-	}
 
 	.sonic-button:is(:active, [data-sonic-pressed], :where([momentary]:state(pressed)) > *):where(
 			:not(:disabled, [aria-disabled='true'])
@@ -232,11 +242,14 @@
 			--_sonic-blank-edge-off,
 			var(--_sonic-blank-edge-lit, color-mix(in oklab, currentcolor 35%, transparent))
 		);
+	}
 
 		@media (forced-colors: active) {
+
+	.sonic-button:not(:has(> .sonic-button-cap > :not(.sonic-led))) {
 			--_sonic-blank-edge: transparent;
-		}
 	}
+		}
 
 	.sonic-button-cap {
 		--_sonic-keycap-corner: max(0px, var(--_sonic-button-corner) - var(--_sonic-button-gap));
@@ -259,19 +272,20 @@
 		inset: var(--_sonic-button-gap);
 		gap: calc(var(--_sonic-button-size) * var(--_sonic-button-led-ratio) / 2);
 		place-content: center;
+	}
 
-		& > .sonic-led {
+		.sonic-button-cap > .sonic-led {
 			--_sonic-led-size: var(
 				--sonic-led-size,
 				calc(var(--_sonic-button-size) * var(--_sonic-button-led-ratio))
 			);
 		}
 
-		& > :not(.sonic-led) {
+		.sonic-button-cap > :not(.sonic-led) {
 			filter: var(--_sonic-engraving) var(--_sonic-button-legend-glow,);
 		}
 
-		& > :not(svg, .sonic-led) {
+		.sonic-button-cap > :not(svg,.sonic-led) {
 			padding-inline: calc(var(--_sonic-button-size) * var(--_sonic-button-padding-ratio));
 			font-size: var(
 				--_sonic-button-font-own,
@@ -284,18 +298,23 @@
 			white-space: nowrap;
 		}
 
-		& > svg {
+		.sonic-button-cap > svg {
 			inline-size: auto;
 			block-size: calc(var(--_sonic-button-size) * var(--_sonic-button-icon-ratio));
 			aspect-ratio: auto 1;
-			mask-image: linear-gradient(
+			-webkit-mask-image: linear-gradient(
 				var(--_sonic-light-fall),
 				#000 15%,
 				rgb(0 0 0 / calc(1 - 0.4 * var(--_sonic-relief)))
 			);
-			mask-repeat: no-repeat;
+			        mask-image: linear-gradient(
+				var(--_sonic-light-fall),
+				#000 15%,
+				rgb(0 0 0 / calc(1 - 0.4 * var(--_sonic-relief)))
+			);
+			-webkit-mask-repeat: no-repeat;
+			        mask-repeat: no-repeat;
 		}
-	}
 
 	.sonic-button-cap:has(> :not(.sonic-led)) {
 		position: relative;
@@ -329,16 +348,24 @@
 	[busy] > .sonic-button:not(:disabled, [aria-disabled='true']) .sonic-led::after {
 		animation: sonic-button-busy 500ms ease-in-out var(--sonic-button-busy-delay, 0s) infinite
 			alternate;
+	}
 
 		@media (prefers-reduced-motion: reduce) {
+
+	[busy]
+		> .sonic-button:not(:disabled, [aria-disabled='true'], :has(.sonic-led))
+		> .sonic-button-cap
+		> *,
+	[busy] > .sonic-button:not(:disabled, [aria-disabled='true']) .sonic-led::after {
 			animation: none;
-		}
 	}
+		}
 
 	@media (forced-colors: active) {
 		.sonic-button-cap > :not(.sonic-led) {
 			filter: none;
-			mask: none;
+			-webkit-mask: none;
+			        mask: none;
 		}
 	}
 }

package/dist/styles/controls.css

@@ -8,6 +8,7 @@
 @import './meter.css';
 @import './number.css';
 @import './panel.css';
+@import './region.css';
 @import './ring.css';
 @import './screen.css';
 @import './segmented.css';

package/dist/styles/dial.css

@@ -83,7 +83,8 @@
 		block-size: var(--_sonic-dial-size);
 		touch-action: var(--sonic-touch-action, pan-x);
 		cursor: ns-resize;
-		user-select: none;
+		-webkit-user-select: none;
+		        user-select: none;
 		border-radius: 50%;
 	}
 
@@ -130,7 +131,7 @@
 			transparent 0 var(--_sonic-dial-notch-pitch)
 		);
 		border-radius: 50%;
-		mask:
+		-webkit-mask:
 			radial-gradient(
 				closest-side,
 				transparent calc(100% - var(--_sonic-dial-notch-band) * 0.8),
@@ -142,14 +143,28 @@
 				#000 calc(var(--_sonic-dial-sweep) + 2 * var(--_sonic-dial-notch-width)),
 				transparent 0
 			);
-		mask-composite: intersect;
+		        mask:
+			radial-gradient(
+				closest-side,
+				transparent calc(100% - var(--_sonic-dial-notch-band) * 0.8),
+				#000 0 calc(100% - var(--_sonic-dial-notch-band) * 0.25),
+				transparent 0
+			),
+			conic-gradient(
+				from calc(var(--_sonic-dial-start) - var(--_sonic-dial-notch-width)),
+				#000 calc(var(--_sonic-dial-sweep) + 2 * var(--_sonic-dial-notch-width)),
+				transparent 0
+			);
+		-webkit-mask-composite: source-in, xor;
+		        mask-composite: intersect;
 	}
 
 	.sonic-dial-scale {
 		font-size: calc(var(--_sonic-dial-size) * var(--_sonic-dial-scale-font-ratio));
-		line-height: 1cap;
+		line-height: 0.7em;
+	}
 
-		& > * {
+		.sonic-dial-scale > * {
 			--_sonic-dial-scale-angle: calc(
 				var(--_sonic-dial-start) + var(--_sonic-scale-at, 0) * var(--_sonic-dial-sweep)
 			);
@@ -161,11 +176,11 @@
 
 			inset: calc(50% - var(--_sonic-dial-scale-cos) * var(--_sonic-dial-scale-radius)) auto auto
 				calc(50% + var(--_sonic-dial-scale-sin) * var(--_sonic-dial-scale-radius));
-			translate: calc(-50% + var(--_sonic-dial-scale-sin) * (50% + 0.15cap))
-				calc(-50% - var(--_sonic-dial-scale-cos) * (50% + 0.15cap));
+			translate: calc(-50% + var(--_sonic-dial-scale-sin) * (50% + 0.105em))
+				calc(-50% - var(--_sonic-dial-scale-cos) * (50% + 0.105em));
 		}
 
-		& > .sonic-scale-tick {
+		.sonic-dial-scale > .sonic-scale-tick {
 			--_sonic-dial-tick-length: calc(var(--_sonic-dial-scale-band) * 0.4);
 
 			inline-size: var(--_sonic-unit);
@@ -174,7 +189,6 @@
 			translate: calc(-50% + var(--_sonic-dial-scale-sin) * var(--_sonic-dial-tick-length) / 2)
 				calc(-50% - var(--_sonic-dial-scale-cos) * var(--_sonic-dial-tick-length) / 2);
 		}
-	}
 
 	:is(.sonic-dial-ring, .sonic-dial-modulation) {
 		--_sonic-arc-width: var(--_sonic-dial-ring-width);
@@ -182,7 +196,8 @@
 		position: absolute;
 		inset: calc(var(--_sonic-dial-scale-band) + var(--_sonic-dial-notch-band));
 		border-radius: 50%;
-		mask: var(--_sonic-arc-mask);
+		-webkit-mask: var(--_sonic-arc-mask);
+		        mask: var(--_sonic-arc-mask);
 	}
 
 	.sonic-dial-ring {
@@ -253,17 +268,18 @@
 
 		display: block;
 		background: none;
-		mask: none;
+		-webkit-mask: none;
+		        mask: none;
+	}
 
-		&::before,
-		&::after {
+		:is(:state(modulated) > .sonic-dial > .sonic-dial-modulation)::before,:is(:state(modulated) > .sonic-dial > .sonic-dial-modulation)::after {
 			position: absolute;
 			inset: 0;
 			content: '';
 			border-radius: 50%;
 		}
 
-		&::before {
+		:is(:state(modulated) > .sonic-dial > .sonic-dial-modulation)::before {
 			background:
 				conic-gradient(
 					from var(--_sonic-dial-start),
@@ -279,10 +295,11 @@
 						calc(var(--_sonic-dial-modulation-to, 0) * var(--_sonic-dial-sweep)),
 					transparent 0
 				);
-			mask: var(--_sonic-arc-mask);
+			-webkit-mask: var(--_sonic-arc-mask);
+			        mask: var(--_sonic-arc-mask);
 		}
 
-		&::after {
+		:is(:state(modulated) > .sonic-dial > .sonic-dial-modulation)::after {
 			background: linear-gradient(
 					var(--_sonic-dial-modulation-tick),
 					var(--_sonic-dial-modulation-tick)
@@ -290,7 +307,6 @@
 				50% 0 / var(--_sonic-unit) var(--_sonic-dial-ring-width) no-repeat;
 			rotate: calc(var(--_sonic-dial-start) + var(--_sonic-dial-modulation-value-angle));
 		}
-	}
 
 	.sonic-dial-cap {
 		position: absolute;
@@ -302,27 +318,27 @@
 				var(--_sonic-drop-shade),
 			var(--_sonic-rim),
 			var(--_sonic-focus-shadow);
+	}
 
-		&::before,
-		&::after {
+		.sonic-dial-cap::before,.sonic-dial-cap::after {
 			position: absolute;
 			content: '';
 			border-radius: 50%;
 		}
 
-		&::before {
+		.sonic-dial-cap::before {
 			inset: 0;
 			background: repeating-conic-gradient(
-				rgb(from var(--_sonic-shade) r g b / calc(0.3 * var(--_sonic-relief))) 0,
-				rgb(from var(--_sonic-shine) r g b / calc(0.12 * var(--_sonic-relief)))
+				color-mix(in srgb, var(--_sonic-shade) calc(30% * var(--_sonic-relief)), transparent) 0,
+				color-mix(in srgb, var(--_sonic-shine) calc(12% * var(--_sonic-relief)), transparent)
 					calc(var(--_sonic-dial-ridge-angle) / 2),
-				rgb(from var(--_sonic-shade) r g b / calc(0.3 * var(--_sonic-relief)))
+				color-mix(in srgb, var(--_sonic-shade) calc(30% * var(--_sonic-relief)), transparent)
 					var(--_sonic-dial-ridge-angle)
 			);
 			rotate: var(--_sonic-dial-angle);
 		}
 
-		&::after {
+		.sonic-dial-cap::after {
 			inset: 16%;
 			background:
 				conic-gradient(
@@ -330,20 +346,19 @@
 						calc(
 							var(--_sonic-dial-face-drift) * var(--_sonic-dial-angle) - var(--_sonic-light-tilt)
 						),
-					rgb(from var(--_sonic-shine) r g b / calc(0.16 * var(--_sonic-relief))),
+					color-mix(in srgb, var(--_sonic-shine) calc(16% * var(--_sonic-relief)), transparent),
 					transparent 12%,
-					rgb(from var(--_sonic-shade) r g b / calc(0.1 * var(--_sonic-relief))) 25%,
+					color-mix(in srgb, var(--_sonic-shade) calc(10% * var(--_sonic-relief)), transparent) 25%,
 					transparent 38%,
-					rgb(from var(--_sonic-shine) r g b / calc(0.12 * var(--_sonic-relief))) 50%,
+					color-mix(in srgb, var(--_sonic-shine) calc(12% * var(--_sonic-relief)), transparent) 50%,
 					transparent 62%,
-					rgb(from var(--_sonic-shade) r g b / calc(0.1 * var(--_sonic-relief))) 75%,
+					color-mix(in srgb, var(--_sonic-shade) calc(10% * var(--_sonic-relief)), transparent) 75%,
 					transparent 88%,
-					rgb(from var(--_sonic-shine) r g b / calc(0.16 * var(--_sonic-relief)))
+					color-mix(in srgb, var(--_sonic-shine) calc(16% * var(--_sonic-relief)), transparent)
 				),
 				var(--_sonic-face);
 			box-shadow: var(--_sonic-face-shadow);
 		}
-	}
 
 	.sonic-dial-indicator {
 		position: absolute;
@@ -351,8 +366,9 @@
 		pointer-events: none;
 		border-radius: 50%;
 		rotate: calc(var(--_sonic-dial-start) + var(--_sonic-dial-angle));
+	}
 
-		&::before {
+		.sonic-dial-indicator::before {
 			--_sonic-dial-indicator-width: calc(
 				var(--_sonic-dial-size) * var(--_sonic-dial-indicator-ratio)
 			);
@@ -369,7 +385,7 @@
 			background: var(--_sonic-ink);
 			border-radius: calc(var(--_sonic-dial-indicator-width) / 2);
 			box-shadow: inset 0 0 calc(0.75 * var(--_sonic-unit))
-				rgb(from var(--_sonic-shade) r g b / calc(0.55 * var(--_sonic-relief)));
+				color-mix(in srgb, var(--_sonic-shade) calc(55% * var(--_sonic-relief)), transparent);
 			clip-path: shape(
 				from 0 100%,
 				line to calc(50% - var(--_sonic-dial-indicator-tip)) var(--_sonic-dial-indicator-tip),
@@ -380,7 +396,6 @@
 			);
 			translate: -50% 0;
 		}
-	}
 
 	:disabled > .sonic-dial > .sonic-dial-indicator::before {
 		background: var(--_sonic-ink-disabled);

package/dist/styles/envelope.css

@@ -40,7 +40,8 @@
 		inline-size: calc(var(--_sonic-envelope-size) * var(--_sonic-envelope-aspect-ratio));
 		block-size: var(--_sonic-envelope-size);
 		container-type: size;
-		user-select: none;
+		-webkit-user-select: none;
+		        user-select: none;
 		isolation: isolate;
 	}
 
@@ -55,23 +56,23 @@
 		clip-path: inset(calc(-1 * var(--_sonic-envelope-inset)));
 	}
 
-	.sonic-envelope-bracket {
+	.sonic-envelope-reticle {
 		--_sonic-point-size: calc(
 			2 * var(--_sonic-envelope-size) * var(--_sonic-envelope-handle-ratio)
 		);
-		--_sonic-bracket-size: var(--_sonic-point-size);
+		--_sonic-reticle-size: var(--_sonic-point-size);
 
 		position: absolute;
 		inset: 0;
 		overflow: clip;
 		pointer-events: none;
+	}
 
-		&[data-sonic-part='curve'] {
+		.sonic-envelope-reticle[data-sonic-part='curve'] {
 			--_sonic-point-size: calc(
 				2 * var(--_sonic-envelope-size) * var(--_sonic-envelope-curve-ratio)
 			);
 		}
-	}
 
 	.sonic-envelope-fill {
 		fill: color-mix(in oklab, var(--_sonic-lit) 18%, transparent);
@@ -93,7 +94,7 @@
 	}
 
 	:is(.sonic-envelope-handle, .sonic-envelope-curve),
-	.sonic-envelope-bracket::before {
+	.sonic-envelope-reticle::before {
 		position: absolute;
 		inset: auto auto
 			calc(