Get the AmmoTracker's in-popover editing working using the foreign document updating

module/Apps/popovers/AmmoTracker.mjs

@@ -37,7 +37,10 @@ export class AmmoTracker extends GenericPopoverMixin(HandlebarsApplicationMixin(
 
 	// #region Lifecycle
 	async _preparePartContext(partId, data) {
-		const ctx = { partId };
+		const ctx = {
+			meta: { idp: this.id },
+			partId,
+		};
 
 		let favouriteCount = 0;
 		ctx.ammos = data.ammos.map(ammo => {

templates/Apps/popovers/AmmoTracker/ammoList.hbs

@@ -1,10 +1,19 @@
 <div data-tooltip-direction="RIGHT">
+	{{log @root}}
 	{{#if ammos}}
 		<ul>
 			{{#each ammos as | data |}}
 				<li class="ammo" data-item-id="{{data.ammo.uuid}}">
 					<span class="name">{{ data.ammo.name }}</span>
-					<span class="value">{{ data.ammo.system.quantity }}</span>
+					<input
+						type="number"
+						id="{{@root.meta.idp}}-{{data.ammo.uuid}}-quantity"
+						class="value"
+						value="{{ data.ammo.system.quantity }}"
+						data-foreign-update-on="change,blur"
+						data-foreign-uuid="{{data.ammo.uuid}}"
+						data-foreign-name="system.quantity"
+					>
 					{{#if data.favourite}}
 						<button
 							type="button"

templates/Apps/popovers/AmmoTracker/style.css

@@ -1,4 +1,4 @@
-.ripcrypt--AmmoTracker.ripcrypt--AmmoTracker {
+.ripcrypt--AmmoTracker.ripcrypt--AmmoTracker.ripcrypt--AmmoTracker {
 	color: var(--popover-text);
 	background: var(--popover-background);
 	padding: 4px;
@@ -7,10 +7,6 @@
 	--button-text: var(--header-text);
 	--button-background: var(--header-background);
 
-	button {
-		border-radius: 4px;
-	}
-
 	ul {
 		display: flex;
 		flex-direction: column;
@@ -23,6 +19,8 @@
 			&:nth-child(even) {
 				color: var(--popover-alt-row-text);
 				background: var(--popover-alt-row-background);
+				--input-text: var(--popover-text);
+				--input-background: var(--popover-background);
 				--button-text: unset;
 				--button-background: unset;
 			}
@@ -31,10 +29,9 @@
 
 	.ammo {
 		display: grid;
-		grid-template-columns: 150px 30px min-content;
+		grid-template-columns: 130px 50px min-content;
 		grid-template-rows: min-content;
 		align-items: center;
-		justify-items: center;
 		gap: 8px;
 
 		.name {
@@ -42,4 +39,9 @@
 			justify-self: left;
 		}
 	}
+
+	input {
+		text-align: center;
+		border-radius: 999px;
+	}
 }