@xsynaptic/sonic-ui 0.17.0 → 0.18.0

package/dist/dev/lib/zoom-gesture.js

@@ -1,4 +1,5 @@
 import { clamp } from "./math.js";
+import { capturePointer } from "./pointer-drag.js";
 
 //#region src/lib/zoom-gesture.ts
 const wheelRate = .01;
@@ -6,6 +7,11 @@ const linePx = 16;
 const pixelMode = 0;
 const wheelCapPx = 25;
 const minSpanPx = 16;
+const zoomKeys = /* @__PURE__ */ new Map([
+	["+", 1],
+	["-", -1],
+	["=", 1]
+]);
 const zoomKeyFactor = Math.exp(wheelCapPx * wheelRate);
 function wheelFactor(deltaY, deltaMode) {
 	const pixels = deltaMode === pixelMode ? deltaY : deltaY * linePx;
@@ -14,7 +20,97 @@ function wheelFactor(deltaY, deltaMode) {
 function pinchFactor(startSpanPx, spanPx) {
 	return Math.max(minSpanPx, Math.abs(spanPx)) / Math.max(minSpanPx, Math.abs(startSpanPx));
 }
+function bindPinch(control, options, signal) {
+	const touches = /* @__PURE__ */ new Map();
+	let pinch;
+	let isPinchSpent = false;
+	const spanPx = ([first, second]) => (touches.get(second) ?? 0) - (touches.get(first) ?? 0);
+	const touchPair = () => {
+		const [first, second, third] = touches.keys();
+		if (first === void 0 || second === void 0 || third !== void 0) return void 0;
+		return [first, second];
+	};
+	control.addEventListener("pointerdown", (event) => {
+		if (event.pointerType !== "touch" || !options.isZoomable() || options.isDisabled()) return;
+		touches.set(event.pointerId, event.clientX);
+		if (pinch || isPinchSpent) return;
+		const pointerIds = touchPair();
+		if (!pointerIds) return;
+		options.claim();
+		capturePointer(control, event.pointerId);
+		pinch = {
+			pointerIds,
+			startSpanPx: spanPx(pointerIds),
+			startZoom: options.zoom()
+		};
+	}, { signal });
+	control.addEventListener("pointermove", (event) => {
+		if (!touches.has(event.pointerId)) return;
+		touches.set(event.pointerId, event.clientX);
+		if (!pinch?.pointerIds.includes(event.pointerId)) return;
+		options.zoomTo(pinch.startZoom * pinchFactor(pinch.startSpanPx, spanPx(pinch.pointerIds)));
+	}, { signal });
+	for (const type of ["pointerup", "pointercancel"]) control.addEventListener(type, (event) => {
+		if (!touches.delete(event.pointerId)) return;
+		if (pinch?.pointerIds.includes(event.pointerId)) {
+			pinch = void 0;
+			isPinchSpent = true;
+		}
+		if (touches.size === 0) isPinchSpent = false;
+	}, { signal });
+	return {
+		isPinching: () => pinch !== void 0 || isPinchSpent,
+		isTouched: () => touches.size > 0
+	};
+}
+function bindWheel(control, options, signal) {
+	control.addEventListener("wheel", (event) => {
+		if (!event.ctrlKey && !event.metaKey || options.isDisabled()) return;
+		event.preventDefault();
+		options.zoomTo(options.zoom() * wheelFactor(event.deltaY, event.deltaMode));
+	}, {
+		passive: false,
+		signal
+	});
+	let startZoom = options.zoom();
+	for (const type of ["gesturestart", "gesturechange"]) control.addEventListener(type, (event) => {
+		if (options.isDisabled() || options.isTouched()) return;
+		event.preventDefault();
+		if (type === "gesturestart") startZoom = options.zoom();
+		else if ("scale" in event && typeof event.scale === "number") options.zoomTo(startZoom * event.scale);
+	}, { signal });
+}
+function bindZoom(control, options, signal) {
+	const { isPinching, isTouched } = bindPinch(control, options, signal);
+	let wheel;
+	const sync = () => {
+		wheel?.abort();
+		wheel = void 0;
+		if (signal.aborted || !options.isZoomable()) return;
+		wheel = new AbortController();
+		bindWheel(control, {
+			...options,
+			isTouched
+		}, wheel.signal);
+	};
+	signal.addEventListener("abort", sync, { once: true });
+	sync();
+	return {
+		isPinching,
+		sync
+	};
+}
+function bindZoomKeys(control, target, signal) {
+	control.addEventListener("keydown", (event) => {
+		if (!target.isZoomable() || target.isDisabled() || event.target !== control) return;
+		if (event.ctrlKey || event.metaKey || event.altKey) return;
+		const direction = zoomKeys.get(event.key);
+		if (direction === void 0) return;
+		event.preventDefault();
+		target.zoomTo(target.zoom() * zoomKeyFactor ** direction);
+	}, { signal });
+}
 
 //#endregion
-export { pinchFactor, wheelFactor, zoomKeyFactor };
+export { bindZoom, bindZoomKeys, pinchFactor, wheelFactor, zoomKeyFactor };
 //# sourceMappingURL=zoom-gesture.js.map

package/dist/dev/lib/zoom-gesture.js.map

@@ -1 +1 @@
-{"version":3,"file":"zoom-gesture.js","names":[],"sources":["../../../src/lib/zoom-gesture.ts"],"sourcesContent":["import { clamp } from '#lib/math.ts';\n\nconst wheelRate = 0.01;\nconst linePx = 16;\nconst pixelMode = 0;\n\nconst wheelCapPx = 25;\n\nconst minSpanPx = 16;\n\nexport const zoomKeyFactor = Math.exp(wheelCapPx * wheelRate);\n\nexport function wheelFactor(deltaY: number, deltaMode: number): number {\n\tconst pixels = deltaMode === pixelMode ? deltaY : deltaY * linePx;\n\n\treturn Math.exp(-clamp(pixels, -wheelCapPx, wheelCapPx) * wheelRate);\n}\n\nexport function pinchFactor(startSpanPx: number, spanPx: number): number {\n\treturn Math.max(minSpanPx, Math.abs(spanPx)) / Math.max(minSpanPx, Math.abs(startSpanPx));\n}\n"],"mappings":";;;AAEA,MAAM,YAAY;AAClB,MAAM,SAAS;AACf,MAAM,YAAY;AAElB,MAAM,aAAa;AAEnB,MAAM,YAAY;AAElB,MAAa,gBAAgB,KAAK,IAAI,aAAa,SAAS;AAE5D,SAAgB,YAAY,QAAgB,WAA2B;CACtE,MAAM,SAAS,cAAc,YAAY,SAAS,SAAS;CAE3D,OAAO,KAAK,IAAI,CAAC,MAAM,QAAQ,KAAa,UAAU,IAAI,SAAS;AACpE;AAEA,SAAgB,YAAY,aAAqB,QAAwB;CACxE,OAAO,KAAK,IAAI,WAAW,KAAK,IAAI,MAAM,CAAC,IAAI,KAAK,IAAI,WAAW,KAAK,IAAI,WAAW,CAAC;AACzF"}
+{"version":3,"file":"zoom-gesture.js","names":[],"sources":["../../../src/lib/zoom-gesture.ts"],"sourcesContent":["import { clamp } from '#lib/math.ts';\nimport { capturePointer } from '#lib/pointer-drag.ts';\n\ninterface Pinch {\n\tpointerIds: [number, number];\n\tstartSpanPx: number;\n\tstartZoom: number;\n}\n\ninterface ZoomTarget {\n\tisDisabled: () => boolean;\n\tisZoomable: () => boolean;\n\tzoom: () => number;\n\tzoomTo: (target: number) => void;\n}\n\ninterface ZoomOptions extends ZoomTarget {\n\tclaim: () => void;\n}\n\ninterface Touches {\n\tisPinching: () => boolean;\n\tisTouched: () => boolean;\n}\n\nexport interface ZoomGesture {\n\tisPinching: () => boolean;\n\tsync: () => void;\n}\n\nconst wheelRate = 0.01;\nconst linePx = 16;\nconst pixelMode = 0;\n\nconst wheelCapPx = 25;\n\nconst minSpanPx = 16;\n\nconst zoomKeys = new Map([\n\t['+', 1],\n\t['-', -1],\n\t['=', 1],\n]);\n\nexport const zoomKeyFactor = Math.exp(wheelCapPx * wheelRate);\n\nexport function wheelFactor(deltaY: number, deltaMode: number): number {\n\tconst pixels = deltaMode === pixelMode ? deltaY : deltaY * linePx;\n\n\treturn Math.exp(-clamp(pixels, -wheelCapPx, wheelCapPx) * wheelRate);\n}\n\nexport function pinchFactor(startSpanPx: number, spanPx: number): number {\n\treturn Math.max(minSpanPx, Math.abs(spanPx)) / Math.max(minSpanPx, Math.abs(startSpanPx));\n}\n\nfunction bindPinch(control: HTMLElement, options: ZoomOptions, signal: AbortSignal): Touches {\n\tconst touches = new Map<number, number>();\n\tlet pinch: Pinch | undefined;\n\tlet isPinchSpent = false;\n\n\tconst spanPx = ([first, second]: [number, number]): number =>\n\t\t(touches.get(second) ?? 0) - (touches.get(first) ?? 0);\n\tconst touchPair = (): [number, number] | undefined => {\n\t\tconst [first, second, third] = touches.keys();\n\t\tif (first === undefined || second === undefined || third !== undefined) return undefined;\n\n\t\treturn [first, second];\n\t};\n\n\tcontrol.addEventListener(\n\t\t'pointerdown',\n\t\t(event) => {\n\t\t\tif (event.pointerType !== 'touch' || !options.isZoomable() || options.isDisabled()) return;\n\n\t\t\ttouches.set(event.pointerId, event.clientX);\n\t\t\tif (pinch || isPinchSpent) return;\n\n\t\t\tconst pointerIds = touchPair();\n\t\t\tif (!pointerIds) return;\n\n\t\t\toptions.claim();\n\t\t\tcapturePointer(control, event.pointerId);\n\t\t\tpinch = { pointerIds, startSpanPx: spanPx(pointerIds), startZoom: options.zoom() };\n\t\t},\n\t\t{ signal },\n\t);\n\tcontrol.addEventListener(\n\t\t'pointermove',\n\t\t(event) => {\n\t\t\tif (!touches.has(event.pointerId)) return;\n\n\t\t\ttouches.set(event.pointerId, event.clientX);\n\t\t\tif (!pinch?.pointerIds.includes(event.pointerId)) return;\n\n\t\t\toptions.zoomTo(pinch.startZoom * pinchFactor(pinch.startSpanPx, spanPx(pinch.pointerIds)));\n\t\t},\n\t\t{ signal },\n\t);\n\tfor (const type of ['pointerup', 'pointercancel'] as const) {\n\t\tcontrol.addEventListener(\n\t\t\ttype,\n\t\t\t(event) => {\n\t\t\t\tif (!touches.delete(event.pointerId)) return;\n\n\t\t\t\tif (pinch?.pointerIds.includes(event.pointerId)) {\n\t\t\t\t\tpinch = undefined;\n\t\t\t\t\tisPinchSpent = true;\n\t\t\t\t}\n\t\t\t\tif (touches.size === 0) isPinchSpent = false;\n\t\t\t},\n\t\t\t{ signal },\n\t\t);\n\t}\n\n\treturn {\n\t\tisPinching: () => pinch !== undefined || isPinchSpent,\n\t\tisTouched: () => touches.size > 0,\n\t};\n}\n\nfunction bindWheel(\n\tcontrol: HTMLElement,\n\toptions: Pick<Touches, 'isTouched'> & ZoomTarget,\n\tsignal: AbortSignal,\n): void {\n\t// Chromium cannot cancel a wheel heard only on the `display: contents` host\n\tcontrol.addEventListener(\n\t\t'wheel',\n\t\t(event) => {\n\t\t\tif ((!event.ctrlKey && !event.metaKey) || options.isDisabled()) return;\n\n\t\t\tevent.preventDefault();\n\t\t\toptions.zoomTo(options.zoom() * wheelFactor(event.deltaY, event.deltaMode));\n\t\t},\n\t\t{ passive: false, signal },\n\t);\n\n\tlet startZoom = options.zoom();\n\n\t// Safari sends a trackpad pinch as gesture events, never as a ctrl wheel\n\tfor (const type of ['gesturestart', 'gesturechange']) {\n\t\tcontrol.addEventListener(\n\t\t\ttype,\n\t\t\t(event) => {\n\t\t\t\tif (options.isDisabled() || options.isTouched()) return;\n\n\t\t\t\tevent.preventDefault();\n\t\t\t\tif (type === 'gesturestart') startZoom = options.zoom();\n\t\t\t\telse if ('scale' in event && typeof event.scale === 'number') {\n\t\t\t\t\toptions.zoomTo(startZoom * event.scale);\n\t\t\t\t}\n\t\t\t},\n\t\t\t{ signal },\n\t\t);\n\t}\n}\n\nexport function bindZoom(\n\tcontrol: HTMLElement,\n\toptions: ZoomOptions,\n\tsignal: AbortSignal,\n): ZoomGesture {\n\tconst { isPinching, isTouched } = bindPinch(control, options, signal);\n\tlet wheel: AbortController | undefined;\n\n\t// The wheel listener is not passive, so it is bound only while zooming is on\n\tconst sync = (): void => {\n\t\twheel?.abort();\n\t\twheel = undefined;\n\t\tif (signal.aborted || !options.isZoomable()) return;\n\n\t\twheel = new AbortController();\n\t\tbindWheel(control, { ...options, isTouched }, wheel.signal);\n\t};\n\n\tsignal.addEventListener('abort', sync, { once: true });\n\tsync();\n\n\treturn { isPinching, sync };\n}\n\nexport function bindZoomKeys(control: HTMLElement, target: ZoomTarget, signal: AbortSignal): void {\n\tcontrol.addEventListener(\n\t\t'keydown',\n\t\t(event) => {\n\t\t\tif (!target.isZoomable() || target.isDisabled() || event.target !== control) return;\n\t\t\tif (event.ctrlKey || event.metaKey || event.altKey) return;\n\n\t\t\tconst direction = zoomKeys.get(event.key);\n\t\t\tif (direction === undefined) return;\n\n\t\t\tevent.preventDefault();\n\t\t\ttarget.zoomTo(target.zoom() * zoomKeyFactor ** direction);\n\t\t},\n\t\t{ signal },\n\t);\n}\n"],"mappings":"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"}

package/dist/styles/button.css

@@ -31,13 +31,23 @@
 		overflow: hidden;
 	}
 
-	sonic-button:not(:defined, [hidden]):has(> :not(svg, .sonic-led)) {
+	sonic-button:not(:defined, [hidden]):has(> :not(.sonic-led)) {
 		inline-size: max-content;
 		min-inline-size: calc(var(--_sonic-button-size) * var(--_sonic-button-aspect-ratio));
-		padding-inline: calc(var(--_sonic-button-size) * var(--sonic-button-padding-ratio, 0.25));
 		white-space: nowrap;
 	}
 
+	sonic-button:not(:defined, [hidden]):has(> :not(svg, .sonic-led)) {
+		padding-inline: calc(var(--_sonic-button-size) * var(--sonic-button-padding-ratio, 0.25));
+	}
+
+	:where(sonic-button:not(:defined)) > svg {
+		display: block;
+		inline-size: auto;
+		block-size: calc(var(--_sonic-button-size) * var(--sonic-button-icon-ratio, 0.5));
+		aspect-ratio: auto 1;
+	}
+
 	.sonic-button {
 		--_sonic-button-gap-ratio: var(--sonic-button-gap-ratio, 0);
 		--_sonic-button-radius-ratio: var(--sonic-button-radius-ratio, 0.2);
@@ -75,7 +85,7 @@
 	}
 
 	/* An `auto` width stretches in a column flex or grid parent */
-	.sonic-button:where(:has(> .sonic-button-cap > :not(svg, .sonic-led))) {
+	.sonic-button:where(:has(> .sonic-button-cap > :not(.sonic-led))) {
 		inline-size: max-content;
 		min-inline-size: calc(var(--_sonic-button-size) * var(--_sonic-button-aspect-ratio));
 	}
@@ -250,8 +260,9 @@
 		}
 
 		& > svg {
-			inline-size: calc(var(--_sonic-button-size) * var(--_sonic-button-icon-ratio));
+			inline-size: auto;
 			block-size: calc(var(--_sonic-button-size) * var(--_sonic-button-icon-ratio));
+			aspect-ratio: auto 1;
 			mask-image: linear-gradient(
 				var(--_sonic-light-fall),
 				#000 15%,
@@ -261,7 +272,7 @@
 		}
 	}
 
-	.sonic-button-cap:has(> :not(svg, .sonic-led)) {
+	.sonic-button-cap:has(> :not(.sonic-led)) {
 		position: relative;
 		inset: auto;
 		block-size: calc(var(--_sonic-button-size) - 2 * var(--_sonic-button-gap));
@@ -269,7 +280,6 @@
 	}
 
 	.sonic-button-cap:has(> .sonic-led) > svg {
-		inline-size: calc(var(--_sonic-button-size) * var(--_sonic-button-led-icon-ratio));
 		block-size: calc(var(--_sonic-button-size) * var(--_sonic-button-led-icon-ratio));
 	}
 

package/dist/styles/waveform.css

@@ -213,7 +213,7 @@
 	}
 
 	.sonic-waveform-label[data-sonic-dimmed] {
-		color: color-mix(in oklab, var(--_sonic-marker, var(--_sonic-waveform-label)) 50%, transparent);
+		filter: opacity(0.5);
 	}
 
 	/* Opaque, since a system highlight carries alpha that would blend the wave into the glass */
@@ -245,6 +245,7 @@
 
 			&[data-sonic-dimmed] {
 				color: GrayText;
+				filter: none;
 			}
 		}
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xsynaptic/sonic-ui",
-  "version": "0.17.0",
+  "version": "0.18.0",
   "description": "Native custom elements for audio interfaces, skinned with CSS custom properties",
   "keywords": [
     "custom-elements",

package/dist/default/lib/asked-value.js

@@ -1,21 +0,0 @@
-//#region src/lib/asked-value.ts
-function moveTo(cell, mapping, next) {
-	if (!Number.isFinite(next)) return false;
-	const snapped = mapping.snap(next);
-	cell.asked = snapped;
-	if (snapped === cell.value) return false;
-	cell.value = snapped;
-	return true;
-}
-function setAsked(cell, mapping, next) {
-	if (!Number.isFinite(next)) return false;
-	const hasMoved = moveTo(cell, mapping, next);
-	cell.asked = next;
-	return hasMoved;
-}
-function resnap(cell, mapping, fallback) {
-	cell.value = mapping.snap(cell.asked ?? fallback);
-}
-
-//#endregion
-export { moveTo, resnap, setAsked };

package/dist/default/lib/fill-watch.js

@@ -1,29 +0,0 @@
-//#region src/lib/fill-watch.ts
-function bindFill(control, sizeProperty, signal) {
-	let watch;
-	const stop = () => {
-		watch?.disconnect();
-		watch = void 0;
-	};
-	signal.addEventListener("abort", stop, { once: true });
-	return (isFilling) => {
-		if (signal.aborted || isFilling === (watch !== void 0)) return;
-		stop();
-		if (!isFilling) {
-			control.style.removeProperty(sizeProperty);
-			return;
-		}
-		const started = new ResizeObserver((entries) => {
-			const box = entries.at(-1)?.borderBoxSize[0];
-			if (!box) return;
-			requestAnimationFrame(() => {
-				if (watch === started) control.style.setProperty(sizeProperty, `${String(box.blockSize)}px`);
-			});
-		});
-		watch = started;
-		started.observe(control);
-	};
-}
-
-//#endregion
-export { bindFill };

package/dist/dev/lib/asked-value.js

@@ -1,22 +0,0 @@
-//#region src/lib/asked-value.ts
-function moveTo(cell, mapping, next) {
-	if (!Number.isFinite(next)) return false;
-	const snapped = mapping.snap(next);
-	cell.asked = snapped;
-	if (snapped === cell.value) return false;
-	cell.value = snapped;
-	return true;
-}
-function setAsked(cell, mapping, next) {
-	if (!Number.isFinite(next)) return false;
-	const hasMoved = moveTo(cell, mapping, next);
-	cell.asked = next;
-	return hasMoved;
-}
-function resnap(cell, mapping, fallback) {
-	cell.value = mapping.snap(cell.asked ?? fallback);
-}
-
-//#endregion
-export { moveTo, resnap, setAsked };
-//# sourceMappingURL=asked-value.js.map

package/dist/dev/lib/asked-value.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"asked-value.js","names":[],"sources":["../../../src/lib/asked-value.ts"],"sourcesContent":["import type { ValueMapping } from '#lib/value-mapping.ts';\n\nexport interface AskedValue {\n\tasked: number | undefined;\n\tvalue: number;\n}\n\n// A gesture: what was asked is the snapped value\n// eslint-disable-next-line unicorn/consistent-boolean-name -- a writer; the result says whether the value moved\nexport function moveTo(cell: AskedValue, mapping: ValueMapping, next: number): boolean {\n\tif (!Number.isFinite(next)) return false;\n\n\tconst snapped = mapping.snap(next);\n\n\tcell.asked = snapped;\n\tif (snapped === cell.value) return false;\n\n\tcell.value = snapped;\n\n\treturn true;\n}\n\n// A host write: the raw ask survives a change of range\n// eslint-disable-next-line unicorn/consistent-boolean-name -- a writer; the result says whether the value moved\nexport function setAsked(cell: AskedValue, mapping: ValueMapping, next: number): boolean {\n\tif (!Number.isFinite(next)) return false;\n\n\tconst hasMoved = moveTo(cell, mapping, next);\n\n\tcell.asked = next;\n\n\treturn hasMoved;\n}\n\nexport function resnap(cell: AskedValue, mapping: ValueMapping, fallback: number): void {\n\tcell.value = mapping.snap(cell.asked ?? fallback);\n}\n"],"mappings":";AASA,SAAgB,OAAO,MAAkB,SAAuB,MAAuB;CACtF,IAAI,CAAC,OAAO,SAAS,IAAI,GAAG,OAAO;CAEnC,MAAM,UAAU,QAAQ,KAAK,IAAI;CAEjC,KAAK,QAAQ;CACb,IAAI,YAAY,KAAK,OAAO,OAAO;CAEnC,KAAK,QAAQ;CAEb,OAAO;AACR;AAIA,SAAgB,SAAS,MAAkB,SAAuB,MAAuB;CACxF,IAAI,CAAC,OAAO,SAAS,IAAI,GAAG,OAAO;CAEnC,MAAM,WAAW,OAAO,MAAM,SAAS,IAAI;CAE3C,KAAK,QAAQ;CAEb,OAAO;AACR;AAEA,SAAgB,OAAO,MAAkB,SAAuB,UAAwB;CACvF,KAAK,QAAQ,QAAQ,KAAK,KAAK,SAAS,QAAQ;AACjD"}

package/dist/dev/lib/fill-watch.js

@@ -1,30 +0,0 @@
-//#region src/lib/fill-watch.ts
-function bindFill(control, sizeProperty, signal) {
-	let watch;
-	const stop = () => {
-		watch?.disconnect();
-		watch = void 0;
-	};
-	signal.addEventListener("abort", stop, { once: true });
-	return (isFilling) => {
-		if (signal.aborted || isFilling === (watch !== void 0)) return;
-		stop();
-		if (!isFilling) {
-			control.style.removeProperty(sizeProperty);
-			return;
-		}
-		const started = new ResizeObserver((entries) => {
-			const box = entries.at(-1)?.borderBoxSize[0];
-			if (!box) return;
-			requestAnimationFrame(() => {
-				if (watch === started) control.style.setProperty(sizeProperty, `${String(box.blockSize)}px`);
-			});
-		});
-		watch = started;
-		started.observe(control);
-	};
-}
-
-//#endregion
-export { bindFill };
-//# sourceMappingURL=fill-watch.js.map

package/dist/dev/lib/fill-watch.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"fill-watch.js","names":[],"sources":["../../../src/lib/fill-watch.ts"],"sourcesContent":["export function bindFill(\n\tcontrol: HTMLElement,\n\tsizeProperty: `--_sonic-${string}`,\n\tsignal: AbortSignal,\n): (isFilling: boolean) => void {\n\tlet watch: ResizeObserver | undefined;\n\n\tconst stop = (): void => {\n\t\twatch?.disconnect();\n\t\twatch = undefined;\n\t};\n\n\tsignal.addEventListener('abort', stop, { once: true });\n\n\treturn (isFilling) => {\n\t\tif (signal.aborted || isFilling === (watch !== undefined)) return;\n\n\t\tstop();\n\t\tif (!isFilling) {\n\t\t\tcontrol.style.removeProperty(sizeProperty);\n\t\t\treturn;\n\t\t}\n\n\t\tconst started = new ResizeObserver((entries) => {\n\t\t\tconst box = entries.at(-1)?.borderBoxSize[0];\n\t\t\tif (!box) return;\n\n\t\t\t// Written a frame on, or the canvas resizes inside this delivery and WebKit reports a loop\n\t\t\trequestAnimationFrame(() => {\n\t\t\t\tif (watch === started) {\n\t\t\t\t\tcontrol.style.setProperty(sizeProperty, `${String(box.blockSize)}px`);\n\t\t\t\t}\n\t\t\t});\n\t\t});\n\n\t\twatch = started;\n\t\tstarted.observe(control);\n\t};\n}\n"],"mappings":";AAAA,SAAgB,SACf,SACA,cACA,QAC+B;CAC/B,IAAI;CAEJ,MAAM,aAAmB;EACxB,OAAO,WAAW;EAClB,QAAQ;CACT;CAEA,OAAO,iBAAiB,SAAS,MAAM,EAAE,MAAM,KAAK,CAAC;CAErD,QAAQ,cAAc;EACrB,IAAI,OAAO,WAAW,eAAe,UAAU,SAAY;EAE3D,KAAK;EACL,IAAI,CAAC,WAAW;GACf,QAAQ,MAAM,eAAe,YAAY;GACzC;EACD;EAEA,MAAM,UAAU,IAAI,gBAAgB,YAAY;GAC/C,MAAM,MAAM,QAAQ,GAAG,EAAE,CAAC,EAAE,cAAc;GAC1C,IAAI,CAAC,KAAK;GAGV,4BAA4B;IAC3B,IAAI,UAAU,SACb,QAAQ,MAAM,YAAY,cAAc,GAAG,OAAO,IAAI,SAAS,EAAE,GAAG;GAEtE,CAAC;EACF,CAAC;EAED,QAAQ;EACR,QAAQ,QAAQ,OAAO;CACxB;AACD"}